@use 'sass:math';

.gds-search-select__input {
    background-image: none !important;
    &:hover ~ .gds-search-select__text-help {
        background-color: $primaryColor;
    }
}

.gds-search-select--success {
    .gds-search-select__input {
        box-shadow: inset 0 -0.125rem 0 0 $successColor, inset 0 0 0 1px $successColor;
        color: $successDark3Color;

        &:hover,
        &:focus,
        &:hover:focus {
            box-shadow: inset 0 -0.125rem 0 0 $successColor, inset 0 0 0 1px $successColor;
        }
    }
    .gds-form-group__checkbox-input:checked + .gds-form-group__checkbox-indicator,
    .gds-form-group__checkbox-input:checked + .gds-search-select__checkbox-indicator {
        border-color: $successColor;
    }
    .gds-tag {
        background-color: $successColor;
        border-color: $successDark1Color;
    }
}

.gds-search-select--warning {
    .gds-search-select__input {
        box-shadow: inset 0 -0.125rem 0 0 $warningColor, inset 0 0 0 1px $warningColor;
        color: $warningColor;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($warningColor)}%3B%22/%3E%3C/svg%3E') !important;
        &:hover,
        &:focus,
        &:hover:focus {
            box-shadow: inset 0 -0.125rem 0 0 $warningColor, inset 0 0 0 1px $warningColor;
        }
    }
    .gds-form-group__checkbox-input:checked + .gds-form-group__checkbox-indicator,
    .gds-form-group__checkbox-input:checked + .gds-search-select__checkbox-indicator {
        border-color: $warningColor;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%271.1%27%20preserveAspectRatio%3D%27none%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20height%3D%27100%25%27%20width%3D%27100%25%27%20viewBox%3D%270%200%20500%20500%27%20enable-background%3D%27new%200%200%20500%20500%27%20xml%3Aspace%3D%27preserve%27%3E%3Cg%3E%3Cpath%20d%3D%27M399.6%2C46.4L193.6%2C252.3l-88.4-88.2L29%2C240.4l88.2%2C88.4l76.4%2C76.4l76.3-76.4L476%2C122.9L399.6%2C46.4z%20M399.6%2C46.4%27%20style%3D%27fill%3A%23#{strip-hash($warningColor)}%3B%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    .gds-tag {
        background-color: $warningColor;
        border-color: $warningDark1Color;
    }
}

.gds-search-select--danger {
    .gds-search-select__input {
        box-shadow: inset 0 -0.125rem 0 0 $dangerColor, inset 0 0 0 1px $dangerColor;
        color: $dangerColor;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($dangerColor)}%3B%22/%3E%3C/svg%3E') !important;
        &:hover,
        &:focus,
        &:hover:focus {
            box-shadow: inset 0 -0.125rem 0 0 $dangerColor, inset 0 0 0 1px $dangerColor;
        }
    }
    .gds-form-group__checkbox-input:checked + .gds-form-group__checkbox-indicator,
    .gds-form-group__checkbox-input:checked + .gds-search-select__checkbox-indicator {
        border-color: $dangerColor;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%271.1%27%20preserveAspectRatio%3D%27none%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20height%3D%27100%25%27%20width%3D%27100%25%27%20viewBox%3D%270%200%20500%20500%27%20enable-background%3D%27new%200%200%20500%20500%27%20xml%3Aspace%3D%27preserve%27%3E%3Cg%3E%3Cpath%20d%3D%27M399.6%2C46.4L193.6%2C252.3l-88.4-88.2L29%2C240.4l88.2%2C88.4l76.4%2C76.4l76.3-76.4L476%2C122.9L399.6%2C46.4z%20M399.6%2C46.4%27%20style%3D%27fill%3A%23#{strip-hash($dangerColor)}%3B%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
    .gds-tag {
        background-color: $dangerColor;
        border-color: $dangerDark1Color;
    }
}

.gds-search-select__input--dark {
    &:hover {
        color: white;
    }
    &:hover:focus,
    &:focus {
        color: $gg-dark-4;
    }
}

.gds-search-select__input--has-help {
    margin-bottom: $unit * 1.5;
}

.gds-search-select__input--has-tag {
    padding-right: $unit * 11;
    text-overflow: ellipsis;
}

.gds-search-select__input--has-tag-sm {
    padding-right: $unit * 10;
    text-overflow: ellipsis;
}

.gds-search-select--open {
    .gds-search-select__input {
        @include defaultShadows($primaryColor, black);
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-bottom-width: 0px;
        z-index: $z-index-3;
        color: inherit !important;
        box-shadow: inset 0 -0.125rem 0 0 $primaryColor, inset 0 0 0 1px $primaryColor;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($primaryColor)}%3B%22/%3E%3C/svg%3E');
        &--success {
            box-shadow: inset 0 -0.125rem 0 0 $successColor, inset 0 0 0 1px $successColor;
        }
        &--warning {
            box-shadow: inset 0 -0.125rem 0 0 $warningColor, inset 0 0 0 1px $warningColor;
        }
        &--danger {
            box-shadow: inset 0 -0.125rem 0 0 $dangerColor, inset 0 0 0 1px $dangerColor;
        }
    }
    .gds-search-select__menu {
        max-height: 198px;
        border: 1px solid $primaryColor;
        border-top-color: $primaryColor !important;
        box-shadow: 0 2px 2px 0 rgba(black, 0.1);
        @include transition-ease-out(all, 00ms);
        &.gds-search-select__menu--success {
            border: 1px solid $successColor;
            border-top-color: $successColor !important;
        }
        &.gds-search-select__menu--warning {
            border: 1px solid $warningColor;
            border-top-color: $warningColor !important;
        }
        &.gds-search-select__menu--danger {
            border: 1px solid $dangerColor;
            border-top-color: $dangerColor !important;
        }
    }
    .gds-search-select__input--dark {
        color: $gg-dark-4;
    }
}

.gds-search-select--success {
    .gds-search-select__input {
        @include defaultShadows($successColor, black);
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($successColor)}%3B%22/%3E%3C/svg%3E');
    }
    .gds-search-select__text-help {
        background-color: $successColor !important;
    }
    .gds-search-select__menu-item:hover {
        background-color: rgba($successColor, 0.55);
    }
}

.gds-search-select--warning {
    .gds-search-select__input {
        @include defaultShadows($warningColor, black);
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($warningColor)}%3B%22/%3E%3C/svg%3E');
    }
    .gds-search-select__text-help {
        background-color: $warningColor !important;
    }
    .gds-search-select__menu-item:hover {
        background-color: rgba($warningColor, 0.55);
    }
}

.gds-search-select--danger {
    .gds-search-select__input {
        @include defaultShadows($dangerColor, black);
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20478.87%20249%22%3E%3Cpath%20d%3D%22M478.85%2C0S264.32%2C233.49%2C255.7%2C242.33s-24.33%2C8.94-32.56%2C0L0%2C0H478.85Z%22%20transform%3D%22translate%280.02%200%29%22%20style%3D%22fill%3A%23#{strip-hash($dangerColor)}%3B%22/%3E%3C/svg%3E');
    }
    .gds-search-select__text-help {
        background-color: $dangerColor !important;
    }
    .gds-search-select__menu-item:hover {
        background-color: rgba($dangerColor, 0.55);
    }
}

.gds-search-select__text-help {
    position: absolute;
    z-index: 0;
    top: calc(100% - 1px);
    width: 100%;
}

.gds-search-select__clear {
    border-radius: 50%;
    background-color: white;
    position: absolute;
    top: math.div($unit, 1.25);
    right: $unit * 2.5;
    z-index: $z-index-6;
    height: $unit * 1.6;
    width: $unit * 1.6;
    font-size: $font-size-minus-4;
    color: $gg-light-4;
    text-align: left;
    border: 1px solid $gg-light-3;
    cursor: pointer;
    @include transition-ease-out(all, 500ms);
    &:hover {
        border-color: $primaryColor;
        color: $primaryColor;
    }
    &:active {
        transform: scale(0.95);
    }
    &:focus {
        outline: none;
    }
}

.gds-search-select__clear--sm {
    top: $unit * 0.5;
    height: $unit * 1.2;
    width: $unit * 1.2;
    font-size: 9px;
    padding-left: 3px;
}

.gds-search-select__tag-indicator {
    position: absolute;
    top: math.div($unit, 1.25);
    right: $unit * 2.5;
    z-index: $z-index-4;
    cursor: pointer;
}

.gds-search-select__tag-indicator--sm {
    top: math.div($unit, 2.5);
    right: $unit * 2;
}

.gds-search-select__tag-indicator--xs {
    top: math.div($unit, 6.4);
    right: $unit * 2;
}

.gds-search-select__menu {
    position: absolute;
    height: auto;
    max-height: 0;
    border: 0px solid $gg-light-4;
    background-color: white;
    border-bottom-right-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
    overflow: auto;
    margin-top: -2px;
    left: 0;
    right: 0;
    box-shadow: 0 0 0px 0 rgba(black, 0);
    z-index: $z-index-5;
    @include transition-ease-in(all, 00ms);
}

.gds-search-select__menu-item {
    padding: $unit * 0.25 $unit * 0.5;
    cursor: pointer;
    z-index: $z-index-6;
    color: $primaryDark5Color;
    font-size: $font-size-minus-1;
    background-color: rgba($primaryColor, 0);
    @include no-select();
    @include transition-ease-out(all, 00ms);
}

.gds-search-select__menu-item:hover {
    background-color: $primaryLight5Color;
    .gds-search-select__checkbox-indicator {
        border-color: white;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%271.1%27%20preserveAspectRatio%3D%27none%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20height%3D%27100%25%27%20width%3D%27100%25%27%20viewBox%3D%270%200%20500%20500%27%20enable-background%3D%27new%200%200%20500%20500%27%20xml%3Aspace%3D%27preserve%27%3E%3Cg%3E%3Cpath%20d%3D%27M399.6%2C46.4L193.6%2C252.3l-88.4-88.2L29%2C240.4l88.2%2C88.4l76.4%2C76.4l76.3-76.4L476%2C122.9L399.6%2C46.4z%20M399.6%2C46.4%27%20style%3D%27fill%3A%23#{strip-hash(#ffffff)}%3B%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
}

.gds-search-select__menu-item--selected,
.gds-search-select__menu-item--selected:hover {
    background-color: $primaryLight4Color;
    .gds-search-select__checkbox-indicator {
        border-color: white;
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%271.1%27%20preserveAspectRatio%3D%27none%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20height%3D%27100%25%27%20width%3D%27100%25%27%20viewBox%3D%270%200%20500%20500%27%20enable-background%3D%27new%200%200%20500%20500%27%20xml%3Aspace%3D%27preserve%27%3E%3Cg%3E%3Cpath%20d%3D%27M399.6%2C46.4L193.6%2C252.3l-88.4-88.2L29%2C240.4l88.2%2C88.4l76.4%2C76.4l76.3-76.4L476%2C122.9L399.6%2C46.4z%20M399.6%2C46.4%27%20style%3D%27fill%3A%23#{strip-hash(#ffffff)}%3B%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
}

.gds-search-select__menu-item:active {
    background-color: $primaryLight3Color;
    .gds-search-select__checkbox-indicator {
        background-image: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%271.1%27%20preserveAspectRatio%3D%27none%27%20id%3D%27Layer_1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%20x%3D%270px%27%20y%3D%270px%27%20height%3D%27100%25%27%20width%3D%27100%25%27%20viewBox%3D%270%200%20500%20500%27%20enable-background%3D%27new%200%200%20500%20500%27%20xml%3Aspace%3D%27preserve%27%3E%3Cg%3E%3Cpath%20d%3D%27M399.6%2C46.4L193.6%2C252.3l-88.4-88.2L29%2C240.4l88.2%2C88.4l76.4%2C76.4l76.3-76.4L476%2C122.9L399.6%2C46.4z%20M399.6%2C46.4%27%20style%3D%27fill%3A%23#{strip-hash(#ffffff)}%3B%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    }
}

.gds-search-select__checkbox {
    pointer-events: none;
}

.gds-search-select__checkbox-indicator--success {
    border-color: $successColor !important;
}

.gds-search-select__checkbox-indicator--warning {
    border-color: $warningColor !important;
}

.gds-search-select__checkbox-indicator--danger {
    border-color: $dangerColor !important;
}

.gds-search-select__tag-holder {
    position: relative;
    background-color: $gg-light-1;
    border-right: 1px solid $gg-light-3;
    border-left: 1px solid $gg-light-3;
    border-bottom: 1px solid $gg-light-3;
    padding: $unit * 0.25;
    @include transition-ease-out(all, 00ms);
}

.gds-search-select__tag-overflow {
    max-height: ($unit * 10);
    overflow-y: auto;
}

.gds-search-select__tag-holder--bubble {
    right: 180px;
    width: auto;
    top: -2px;
    pointer-events: none;
    transform: translateY(calc(-50% + 27px)) translateX(50px);
    @include transition-ease-out(all, 00ms);
    opacity: 0;
    position: absolute;
    z-index: $z-index-9;
    max-width: 250px;
    border-radius: $border-radius;
    background-color: $balloon-bg-color;
    border-width: 1px;
    border-style: solid;
    border-color: $balloon-bd-color;
    color: $balloon-tx-color;
    min-height: 90px;
    box-shadow: 0 0 $unit rgba(black, 0.1);

    @include createNubbin('right', $balloon-arrow-size, $balloon-bg-color, $balloon-bd-color);
}

.gds-search-select__tag-holder--bubble-sm {
    right: 160px;
    top: -10px;
}

.gds-search-select__tag-holder--bubble-xs {
    right: 155px;
    top: -10px;
}

.gds-search-select__tag-holder:empty {
    display: none;
}

.gds-search-select__tag-holder--bubble-active {
    pointer-events: all;
    transform: translateY(calc(-50% + 27px)) translateX(0px);
    opacity: 1;
}

.gds-search-select__toggle-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: $unit * 2;
    background: transparent;
    border: none;
    z-index: $z-index-8;
    outline: none;
    cursor: pointer;
    color: $grayLight4Color;

    &:hover {
        color: $primaryDark2Color;
    }
    &:active {
        color: $primaryDark4Color;
    }
}