@import 'commons';

:root {
    --m-searchfield--color-icon: #{ $m-color-interactive-light };
    --m-searchfield--color-icon-hover: white;
    --m-searchfield--color-button: transparent;
    --m-searchfield--color-button-hover: #{ $m-color-interactive-light };
    --m-searchfield--color-button-active: #{ $m-color-interactive-dark };
}

.m-searchfield {
    --m-input-style--hover-color: #{ $m-color-interactive-light };
    --m-input-style--border-color: #{ $m-color-grey-lightest };
    --m-input-style--background-color: #{ $m-color-grey-lightest };

    position: relative;

    @include m-input-inline-spacing();

    // dirty hack for ghost pixel glitch >_<
    .m-input-style.m--has-label:not(.m--is-label-up) .m-input-style__append {
        margin-bottom: -1px;
    }

    &__search-button {
        @include m-button;

        flex: 1;
        width: 100%;
        display: flex;
        cursor: pointer;
        padding: 0 $m-input-style--padding;
        color: var(--m-searchfield--color-icon);
        border: 1px solid var(--m-searchfield--color-button);
        background-color: var(--m-searchfield--color-button);

        &:hover,
        &:focus {
            --m-searchfield--color-icon: var(--m-searchfield--color-icon-hover);
            --m-searchfield--color-button: var(--m-searchfield--color-button-hover);
        }

        &:active {
            --m-searchfield--color-button: var(--m-searchfield--color-button-active);
        }

        .m-input-style.m--has-error & {
            --m-searchfield--color-button: var(--m-input-style--error-color);
            --m-searchfield--color-icon: var(--m-searchfield--color-icon-hover);
        }

        .m-input-style.m--is-valid & {
            --m-searchfield--color-button: var(--m-input-style--valid-color);
            --m-searchfield--color-icon: var(--m-searchfield--color-icon-hover);
        }
    }

    &__search-button-icon {
        align-self: center;
    }

    &__reset {
        margin-left: $m-space-xs;
    }

    &__validation {
        transition: margin-top $m-transition-duration ease;
        display: flex;

        .m-searchfield.m--has-validation-message & {
            margin-top: $m-space-2xs;
        }
    }

    input {
        appearance: none;

        &[type='search']::-webkit-search-decoration,
        &[type='search']::-webkit-search-cancel-button,
        &[type='search']::-webkit-search-results-button,
        &[type='search']::-webkit-search-results-decoration {
            display: none;
        }

        &[type='search']::-webkit-textfield-decoration-container {
            background-color: none;
        }
    }
}

// override stupid .mu-app-root specificity issue
.m-searchfield__search-button.m-searchfield__search-button {
    border-radius: 0 $m-input-style--border-radius $m-input-style--border-radius 0;
}