@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/search';

@mixin msk-search {
    @include search.search;

    .#{$prefix}--search {
        font-family: v.$msk--global-font-family;

        // default height of search
        .#{$prefix}--search-input {
            height: m.msk-rem(40px);
        }

        &.#{$prefix}--search--sm {
            .#{$prefix}--search-input {
                height: m.msk-rem(32px);
            }
        }

        &.#{$prefix}--search--lg {
            .#{$prefix}--search-input {
                height: m.msk-rem(48px);
            }
        }
        &.#{$prefix}--search--disabled {
            .#{$prefix}--search-input {
                background-color: c.$msk--warm-gray-10;
            }
        }
        .#{$prefix}--search-button:active {
            --#{$prefix}-focus: #{c.$msk--black-100};
            --#{$prefix}-background-selected: #{c.$msk--white-0};
        }

        // clear button
        .msk-search--close {
            position: absolute;
            right: 0;
            top: 0;

            &.msk-search--close-hidden {
                visibility: hidden;
            }
        }

        .msk-search--close-btn {
            color: tk.$msk--color-content-action;

            &:hover,
            &:not(:disabled):focus,
            &:not(:disabled):focus:active {
                box-shadow: inset 0 0 0 0.125rem
                    tk.$msk--color-border-focus-inner;
                border-color: tk.$msk--color-border-focus-outer;
            }
        }

        .#{$prefix}--search-input {
            @include m.msk-edge-input-default;
        }
        .#{$prefix}--search-magnifier-icon {
            @include m.msk-icon-background;
            @include m.msk-icon-bg-search;

            background-size: m.msk-rem(24px);
            height: m.msk-rem(24px);
            left: m.msk-rem(10px);
            width: m.msk-rem(24px);

            path {
                display: none; // hide carbon icon
            }
        }

        // expandable search
        &.#{$prefix}--search--expandable {
            .cds--search-input {
                border: none;
            }

            &.#{$prefix}--search--expanded {
                .cds--search-input {
                    border: 1px solid tk.$msk--color-border-input;
                }
            }

            .cds--search-magnifier {
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: m.msk-rem(4px);
            }

            .cds--search-magnifier-icon {
                left: auto;
                right: auto;
            }
        }
    }
}