@import '../node_modules/sh-core/src/base';

.sh-input-select {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 40px;

    font-size: $size-font2;
    color: $color-line1;

    &:hover {
        .input {
            background: $color-box-background4;
        }
    }

    &.open-up {
        .dropdown-wrapper {
            bottom: calc(100% + 1px);
        }

        .dropdown {
            bottom: 0;
        }
    }

    &.open-down {
        .dropdown-wrapper {
            top: calc(100% + 1px);
        }

        .dropdown {
            top: 0;
        }
    }

    &.sh-invalid {
        &.sh-touched {
            .input {
                border: 1px solid $color-error;
            }
        }
    }

    &.opened {
        &.open-up {
            .input {
                border-top-left-radius: 0;
                border-top-right-radius: 0;
            }

            .dropdown {
                border-top-left-radius: $size-border-radius-small;
                border-top-right-radius: $size-border-radius-small;
            }
        }

        &.open-down {
            .input {
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }

            .dropdown {
                border-bottom-left-radius: $size-border-radius-small;
                border-bottom-right-radius: $size-border-radius-small;
            }
        }

        .dropdown-wrapper {
            height: 200px;
        }
    }

    .input {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;

        background: $color-box-background5;
        border-radius: $size-border-radius-small;
        line-height: 1;
        cursor: pointer;
        z-index: 1;

        transition: border-radius $transition-fast, background $transition-hover;

        @include focus;

        .input-selected {
            height: 100%;
            line-height: 2.4;
            padding: 0 28px 0 15px;

            @include ellipsis;
        }

        .icon-svg {
            position: absolute;
            top: 8px;
            right: 8px;
        }
    }

    .dropdown-wrapper {
        position: absolute;
        right: 0;
        left: 0;
        height: 0;

        overflow: hidden;

        transition: height $transition-fast;

        .dropdown {
            position: absolute;
            left: 100%;
            width: 100%;
            max-height: 200px;

            color: $color-dark-line2;
            background: $color-box-background;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 2;

            transition: left $transition;

            &.current {
                left: 0;
            }

            &.left {
                left: -100%;
            }

            .icon-svg {
                fill: $color-dark-line2;
            }
        }
    }

    .option {
        position: relative;
        padding: 10px 15px;

        background: transparent;
        line-height: 1;
        cursor: pointer;
        @include ellipsis;

        transition: background $transition-hover, color $transition-hover;

        &:focus,
        &:hover {
            color: $color-font;
            background: $color-primary;
            outline: 0;

            .icon-svg {
                fill: $color-line1;
            }
        }

        &.back {
            text-align: center;
        }

        .option-details {
            display: inline-block;
            width: 100%;

            @include ellipsis;
        }

        .tree-forward-icon {
            position: absolute;
            top: 7px;
            right: 0;
        }

        .tree-back-icon {
            position: absolute;
            top: 7px;
            left: 5px;
        }
    }

    .icon-svg {
        fill: $color-line1;
        vertical-align: bottom;

        transition: fill $transition-hover;
    }

}