/* Common styling for Slack fields */
.field--name-field-item-slack-channel,
.field--name-field-interest-slack-channel,
.field--name-field-member-slack-id-number {
    font-size: 20px;
    line-height: 30px;
    padding-bottom: 20px;
}

/* Slack link styling for channels and usernames */
.field--name-field-item-slack-channel .field__item a,
.field--name-field-interest-slack-channel .field__item a,
.field--name-field-member-slack-id-number .field__item a {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #4A154B; /* Slack's branding color */
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Hover effect */
.field--name-field-item-slack-channel .field__item a:hover,
.field--name-field-interest-slack-channel .field__item a:hover,
.field--name-field-member-slack-id-number .field__item a:hover {
    background-color: #611f69; /* Slightly lighter shade of Slack's branding color */
}

/* Slack logo before the link for channels */
.field--name-field-item-slack-channel .field__item a::before,
.field--name-field-interest-slack-channel .field__item a::before {
    content: "";
    display: inline-block;
    background-image: url('https://a.slack-edge.com/80588/marketing/img/icons/icon_slack_hash_colored.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

/* Slack "@" icon for usernames using inline SVG */
.field--name-field-member-slack-id-number .field__item a::before {
    content: "";
    display: inline-block;
    background-image: url('https://a.slack-edge.com/80588/marketing/img/icons/icon_slack_hash_colored.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    margin-right: 8px;
}