// @import "../core/core";

//  ---------------------------------------------------------------------------
//
//  Defines a simple search form
//
//  ---------------------------------------------------------------------------

//  = INPUT & BUTTON
//  ---------------------------------------------------------------------------
@mixin dc-search-form {
    display: inline-block;
    position: relative;
    margin-bottom: $dc-space150;
}

@mixin dc-search-form__input {
    max-height: 36px;
    margin: 0;
    padding-right: 30px;
    -moz-appearance: none;
    -webkit-appearance: none;

    &[type="date"]::-webkit-clear-button { display: none; }
    &[type="date"]::-ms-clear { display: none; }
}

@mixin dc-search-form__btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: $dc-gray40;
    font-size: 1.6rem;
}

@mixin dc-search-form__btn__icon {
    display: block;
    margin-right: 0;
}

@mixin dc-search-form__btn--is-active {
    background: transparent;
    box-shadow: none;
}

@mixin dc-icon--is-search-form {
    display: block;
    width: 3.6rem;
    height: 3.6rem;
    margin-top: 0;
    margin-right: 0;
    color: $dc-gray50;
    font-size: 1.6rem;
    line-height: 3.6rem;
}


//  = AUTOSUGGEST
//  ---------------------------------------------------------------------------
@mixin dc-suggest {
    position: absolute;
    left: 0;
    min-width: 100%;
    margin: 0;
    padding: 0;
    transform: translateY(-4px);
    transition: transform .3s ease-out, opacity .2s;
    border: 1px solid $dc-gray60;
    border-radius: 0 0 2px 2px;
    background: $dc-white;
    box-shadow: 0 1px 1px rgba($dc-black, .2);
    opacity: 0;
    z-index: 800;
    list-style-type: none;
    pointer-events: none;
}

@mixin dc-suggest--is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

@mixin dc-suggest__item {
    display: flex;
    align-items: flex-start;
    padding: 0 $dc-space100;
    color: $dc-text-color;
    line-height: $dc-touch-size;
    white-space: nowrap;
}

@mixin dc-suggest__item--is-active {
    background: $dc-blue70;
    color: $dc-text-color;
}

@mixin dc-suggest__item__img-frame {
    display: flex;
    justify-content: center;
    width: 48px;
    height: $dc-space150;
    margin: 1rem $dc-space100 0 0;
    overflow: hidden;
}

@mixin dc-suggest__item__img {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
}

@mixin dc-suggest__item__label {
    flex: 1 1 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

@mixin dc-suggest__item__action {
    display: block;
    flex-grow: 0;
    align-self: flex-end;
    margin-left: $dc-space100;
    white-space: nowrap;
}

@mixin dc-search-form-selectors {
    .dc-search-form {
        @include dc-search-form;
    }

    .dc-search-form__input {
        @include dc-search-form__input;
    }

    .dc-search-form__btn {
        @include dc-search-form__btn;

        &:hover,
        &:active,
        &:focus {
            @include dc-search-form__btn--is-active;
        }
    }

    .dc-search-form__btn__icon {
        @include dc-search-form__btn__icon;
    }

    .dc-font-icon--is-search-form {
        @include dc-icon--is-search-form;
    }

    .dc-suggest {
        @include dc-suggest;

        &:hover,
        &:active {
            @include dc-suggest--is-visible;
        }
    }

    .dc-suggest--is-visible {
        @include dc-suggest--is-visible;
    }

    .dc-suggest__item {
        @include dc-suggest__item;

        &:hover,
        &:active {
            @include dc-suggest__item--is-active;
        }
    }

    .dc-suggest__item__img-frame {
        @include dc-suggest__item__img-frame;
    }

    .dc-suggest__item__img {
        @include dc-suggest__item__img;
    }

    .dc-suggest__item__action {
        @include dc-suggest__item__action;
    }

    .dc-suggest__item__label {
        @include dc-suggest__item__label;
    }

    // FIXME - @controversial BEM maybe better a dc-search-form--interactive modifier ?
    .dc-search-form__input:focus ~ .dc-suggest {
        @include dc-suggest--is-visible;
    }
}