.c-filter {
    @extend $input-field;

    +placeholder() {
        color: transparent;
    }

    &--error {
        border-width: 2px;
        border-color: $color--danger;
        padding-left: 19px;
        padding-right: @padding-left;

        &:hover, &:focus {
            border-color: @border-color;
        }

        & ~ .c-form__msg {
            color: @border-color;
        }
    }

    &--disabled, &[disabled] {
        background-color: $color--gray-2;
        border-color: transparent;
    }

    &__label {
        position: absolute;
        z-index: 2;
        top: 30px;
        left: 20px;
        transform: translate(0, -50%);
        width: calc(100% - 40px);
        font-size: calc(1rem + 2px);
        font-weight: $font--regular;
        color: $color--gray-1;
        line-height: 1;
        pointer-events: none;
        transition: .2s ease-out;
        text-ellipsis();

        &--sm {
            top: 8px;
            transform: none;
            font-size: calc(1rem - 3px);
        }
    }

    &__control {
        width: 100%;
        height: 40px;
        font-size: inherit;
        color: inherit;
        font-weight: $font--bold;
        box-shadow: none;
        border: none;

        &:focus {
            & ~ .c-filter__selected {
                display: none;
            }

            & ~ .c-filter__label {
                @extend .c-filter__label--sm
            }
        }
    }

    &__selected {
        position: absolute;
        top: 17px;
        width: calc(100% - 40px);
        height: 42px;
        line-height: @height;
        text-ellipsis();
    }

    &__menu {
        position: absolute;
        left: 0;
        z-index: 10;
        width: 100%;
        margin-top: 10px;
    }

    &__option {
        color: $color--gray-1;

        &:hover {
            background-color: transparent;
            color: $color--main;
            cursor: pointer;
        }

        & + & {
            margin-top: 10px;
        }

        &.is-selected, &--is-focused {
            color: $color--main;
        }

        &-btn{
            width: 100%;
            padding: 0;
            background: none;
            border: none;
            box-shadow: none;
            text-align: left;

            &:focus {
                color: $color--main;
            }
        }
    }
}