.gds-tag {
    display: inline-block;
    background-color: white;
    color: $gg-light-4;
    border: 1px solid $gg-light-2;
    border-radius: $border-radius;
    margin: 0 ($unit * 0.5) ($unit * 0.5) 0;
    padding: 0 ($unit * 0.5);
    overflow: hidden;
    vertical-align: top;
    font-family: $pri-font-regular;
    font-weight: $font-weight-light;
}

.gds-tag--with-button {
    padding-right: ($unit * 2.75);
}

.gds-tag__button {
    border: none;
    background-color: transparent !important;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22100%25%22%20height%3D%22100%25%22%0A%09%20viewBox%3D%220%200%2020px%2020px%22%20preserveAspectRatio%3D%22none%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($gg-light-4)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%0A%20%20%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%0A%20%20%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%0A%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    padding: 0;
    position: absolute;
    top: 0;
    right: 0;
    top: -6px;
    right: -3px;
    background-position: 10px 10px;
    width: 40px;
    height: 40px;
    transform: scale(0.7);

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($primaryColor)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
        cursor: pointer;
    }

    &:focus {
        outline: none;
    }

    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -($unit * 0.25);
        width: 1px;
        height: 100%;
        background-color: $gg-light-2;
        pointer-events: none;
    }
}

.gds-tag__option {
    border: none;
    text-align: center;
    background-color: transparent !important;
    position: absolute;
    top: -6px;
    right: -3px;
    background-position: 10px 10px;
    width: 40px;
    height: 40px;
    transform: scale(0.7);
    font-size: $unit * 1.4;
    color: inherit;
    text-shadow: 0 0 0.25px $gg-light-4;
    cursor: pointer;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: -($unit * 0.25);
        width: 1px;
        height: 100%;
        background-color: $gg-light-2;
        pointer-events: none;
    }
    &:focus {
        outline: none;
    }
    &:hover {
        color: $primaryColor;
        text-shadow: 0 0 0.5px $primaryColor;
    }
}

.gds-tag__button--dark,
.gds-tag__option--dark {
    &:before {
        background-color: $gg-dark-4;
    }
}

.gds-tag--sm {
    font-size: ($unit * 0.8);
}

.gds-tag--xs {
    font-size: ($unit * 0.7);
}

.gds-tag--with-button-sm {
    padding-right: ($unit * 2.25);
}

.gds-tag--with-button-xs {
    padding-right: ($unit * 2);
}

.gds-tag__button--sm {
    transform: scale(0.6);
    width: 40px;
    height: 40px;
    background-position: 10px 10px;
    top: -9px;
    right: -7px;
}

.gds-tag__button--xs {
    transform: scale(0.45);
    width: 40px;
    height: 40px;
    background-position: 10px 10px;
    top: -10px;
    right: -7px;
}

.gds-tag__option--sm {
    width: 34px;
    height: 40px;
    background-position: 10px 10px;
    top: -8px;
    right: -4px;
    font-size: 1rem;
}

.gds-tag__option--xs {
    width: 28px;
    height: 40px;
    background-position: 10px 10px;
    top: -10px;
    right: -2px;
    font-size: $unit * 0.7;
}

.gds-tag--dark {
    border-color: $gg-dark-4;
}

.gds-tag--dark,
.gds-tag--primary-dark,
.gds-tag--secondary-dark,
.gds-tag--success-dark,
.gds-tag--warning-dark,
.gds-tag--danger-dark,
.gds-tag--blue-dark,
.gds-tag--gold-dark,
.gds-tag--green-dark,
.gds-tag--orange-dark,
.gds-tag--purple-dark,
.gds-tag--red-dark,
.gds-tag--darkblue-dark,
.gds-tag--darkgold-dark,
.gds-tag--darkgreen-dark,
.gds-tag--darkred-dark {
    background-color: $gg-dark-3;
}

// Primary tags
.gds-tag--primary {
    background-color: $primaryLight5Color;
    border-color: $primaryLight3Color;
    color: $primaryDark4Color;
}

// Primary Dark tags
.gds-tag--primary-dark {
    border-color: $primaryColor;
}

// Primary tags
.gds-tag--secondary {
    background-color: $secondaryLight5Color;
    border-color: $secondaryLight3Color;
    color: $secondaryDark4Color;
}

// Secondary Dark tags
.gds-tag--secondary-dark {
    border-color: $secondaryColor;
}

// Success tags
.gds-tag--success {
    background-color: $successLight5Color;
    border-color: $successLight3Color;
    color: $successDark4Color;
}

// Secondary Dark tags
.gds-tag--success-dark {
    border-color: $successColor;
}

// Warning tags
.gds-tag--warning {
    background-color: $warningLight5Color;
    border-color: $warningLight3Color;
    color: $warningDark4Color;
}

// Warning Dark tags
.gds-tag--warning-dark {
    border-color: $warningColor;
}

// Danger tags
.gds-tag--danger {
    background-color: $dangerLight5Color;
    border-color: $dangerLight3Color;
    color: $dangerDark4Color;
}

// Danger Dark tags
.gds-tag--danger-dark {
    border-color: $dangerColor;
}

// Blue tags
.gds-tag--blue {
    background-color: $blueLight5Color;
    border-color: $blueLight3Color;
    color: $blueDark4Color;
}

// Blue Dark tags
.gds-tag--blue-dark {
    border-color: $blueColor;
}

// Gold tags
.gds-tag--gold {
    background-color: $goldLight5Color;
    border-color: $goldLight3Color;
    color: $goldDark4Color;
}

// Gold Dark tags
.gds-tag--gold-dark {
    border-color: $goldColor;
}

// Green tags
.gds-tag--green {
    background-color: $greenLight5Color;
    border-color: $greenLight3Color;
    color: $greenDark4Color;
}

// Green Dark tags
.gds-tag--green-dark {
    border-color: $greenColor;
}

// Orange tags
.gds-tag--orange {
    background-color: $orangeLight5Color;
    border-color: $orangeLight3Color;
    color: $orangeDark4Color;
}

// Orange Dark tags
.gds-tag--orange-dark {
    border-color: $orangeColor;
}

// Purple tags
.gds-tag--purple {
    background-color: $purpleLight5Color;
    border-color: $purpleLight3Color;
    color: $purpleDark4Color;
}

// Purple Dark tags
.gds-tag--purple-dark {
    border-color: $purpleColor;
}

// Red tags
.gds-tag--red {
    background-color: $redLight5Color;
    border-color: $redLight3Color;
    color: $redDark4Color;
}

// Red Dark tags
.gds-tag--red-dark {
    border-color: $redColor;
}

// Dark Blue tags
.gds-tag--darkblue {
    background-color: $darkBlueLight5Color;
    border-color: $darkBlueLight3Color;
    color: $darkBlueDark4Color;
}

// Dark Blue Dark tags
.gds-tag--darkblue-dark {
    border-color: $darkBlueColor;
}

// Dark Gold tags
.gds-tag--darkgold {
    background-color: $darkGoldLight5Color;
    border-color: $darkGoldLight3Color;
    color: $darkGoldDark4Color;
}

// Dark Gold Dark tags
.gds-tag--darkgold-dark {
    border-color: $darkGoldColor;
}

// Dark Green tags
.gds-tag--darkgreen {
    background-color: $darkGreenLight5Color;
    border-color: $darkGreenLight3Color;
    color: $darkGreenDark4Color;
}

// Dark Green Dark tags
.gds-tag--darkgreen-dark {
    border-color: $darkGreenColor;
}

// Dark Red tags
.gds-tag--darkred {
    background-color: $darkRedLight5Color;
    border-color: $darkRedLight3Color;
    color: $darkRedDark4Color;
}

// Dark Red Dark tags
.gds-tag--darkred-dark {
    border-color: $darkRedColor;
}

.gds-tag--primary-dark,
.gds-tag--secondary-dark,
.gds-tag--success-dark,
.gds-tag--warning-dark,
.gds-tag--danger-dark,
.gds-tag--blue-dark,
.gds-tag--gold-dark,
.gds-tag--green-dark,
.gds-tag--orange-dark,
.gds-tag--purple-dark,
.gds-tag--red-dark,
.gds-tag--darkblue-dark,
.gds-tag--darkgold-dark,
.gds-tag--darkgreen-dark,
.gds-tag--darkred-dark {
    color: white;
    text-shadow: 0 0 3px rgba(black, 0.35);
}

.gds-tag__button--primary-dark,
.gds-tag__option--primary-dark {
    &:before {
        background-color: $primaryColor;
    }
}

.gds-tag__button--secondary-dark,
.gds-tag__option--secondary-dark {
    &:before {
        background-color: $secondaryColor;
    }
}

.gds-tag__button--success-dark,
.gds-tag__option--success-dark {
    &:before {
        background-color: $successColor;
    }
}

.gds-tag__button--warning-dark,
.gds-tag__option--warning-dark {
    &:before {
        background-color: $warningColor;
    }
}

.gds-tag__button--danger-dark,
.gds-tag__option--danger-dark {
    &:before {
        background-color: $dangerColor;
    }
}

.gds-tag__button--blue-dark,
.gds-tag__option--blue-dark {
    &:before {
        background-color: $blueColor;
    }
}

.gds-tag__button--gold-dark,
.gds-tag__option--gold-dark {
    &:before {
        background-color: $goldColor;
    }
}

.gds-tag__button--green-dark,
.gds-tag__option--green-dark {
    &:before {
        background-color: $greenColor;
    }
}

.gds-tag__button--orange-dark,
.gds-tag__option--orange-dark {
    &:before {
        background-color: $orangeColor;
    }
}

.gds-tag__button--purple-dark,
.gds-tag__option--purple-dark {
    &:before {
        background-color: $purpleColor;
    }
}
.gds-tag__button--red-dark,
.gds-tag__option--red-dark {
    &:before {
        background-color: $redColor;
    }
}

.gds-tag__button--darkblue-dark,
.gds-tag__option--darkblue-dark {
    &:before {
        background-color: $darkBlueColor;
    }
}

.gds-tag__button--darkgold-dark,
.gds-tag__option--darkgold-dark {
    &:before {
        background-color: $darkGoldColor;
    }
}

.gds-tag__button--darkgreen-dark,
.gds-tag__option--darkgreen-dark {
    &:before {
        background-color: $darkGreenColor;
    }
}

.gds-tag__button--darkred-dark,
.gds-tag__option--darkred-dark {
    &:before {
        background-color: $darkRedColor;
    }
}
.gds-tag__button--primary,
.gds-tag__button--secondary,
.gds-tag__button--success,
.gds-tag__button--warning,
.gds-tag__button--danger,
.gds-tag__button--blue,
.gds-tag__button--gold,
.gds-tag__button--green,
.gds-tag__button--orange,
.gds-tag__button--purple,
.gds-tag__button--red,
.gds-tag__button--darkblue,
.gds-tag__button--darkgold,
.gds-tag__button--darkgreen,
.gds-tag__button--darkred {
    &:before {
        background-color: rgba($gg-dark-1, 0.15);
    }
}

.gds-tag__button--primary,
.gds-tag__button--primary-dark,
.gds-tag__button--secondary,
.gds-tag__button--secondary-dark,
.gds-tag__button--success,
.gds-tag__button--success-dark,
.gds-tag__button--warning,
.gds-tag__button--warning-dark,
.gds-tag__button--danger,
.gds-tag__button--danger-dark,
.gds-tag__button--blue,
.gds-tag__button--blue-dark,
.gds-tag__button--gold,
.gds-tag__button--gold-dark,
.gds-tag__button--green,
.gds-tag__button--green-dark,
.gds-tag__button--orange,
.gds-tag__button--orange-dark,
.gds-tag__button--purple,
.gds-tag__button--purple-dark,
.gds-tag__button--red,
.gds-tag__button--red-dark,
.gds-tag__button--darkblue,
.gds-tag__button--darkblue-dark,
.gds-tag__button--darkgold,
.gds-tag__button--darkgold-dark,
.gds-tag__button--darkgreen,
.gds-tag__button--darkgreen-dark,
.gds-tag__button--darkred,
.gds-tag__button--darkred-dark {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{ffffff}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{ffffff}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 0.7;
    }
}

.gds-tag__button--primary {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($primaryDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($primaryDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--secondary {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($secondaryDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($secondaryDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--danger {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($dangerDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($dangerDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--warning {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($warningDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($warningDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--success {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($successDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($successDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--blue {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($blueDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($blueDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--gold {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($goldDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($goldDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--red {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($redDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($redDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--green {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($greenDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($greenDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}

.gds-tag__button--orange {
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($orangeDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E');
    opacity: 0.7;

    &:hover {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20100%25%20100%25%22%20fill%3D%22none%22%20stroke%3D%22%23#{strip-hash($orangeDark4Color)}%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%3E%3Cline%20class%3D%22st0%22%20x1%3D%220.9%22%20y1%3D%221%22%20x2%3D%2219.1%22%20y2%3D%2219.2%22%2F%3E%3Cline%20class%3D%22st0%22%20x1%3D%2219.1%22%20y1%3D%221%22%20x2%3D%220.9%22%20y2%3D%2219.2%22%2F%3E%3C%2Fsvg%3E') !important;
        opacity: 1;
    }
}