@import '../../common/styles/_layers';
@import '../../common/styles/colors';
@import '../../common/styles/media/_screen';
@import '../../common/styles/drop';
@import '../../common/styles/text-base';
@import '../../common/styles/rounded-corner-base';

.bloko-drop {
    .bloko-text-medium();

    display: inline-block;
    position: absolute;
    border-radius: @rounded-corner-default;
    box-sizing: border-box;
    word-wrap: break-word;
    width: auto;
    color: @color-white;
    font-family: @_font-family;
    line-height: @bloko-drop-line-height;
    pointer-events: none;

    .layers();
}

.bloko-drop_flexible {
    max-width: none;
}

.bloko-drop_clickable {
    pointer-events: auto;
}

@media @screen-lt-s {
    :global(.xs-friendly) .bloko-drop_fullscreen-on-xs {
        .bloko-text-large();

        position: fixed;
        width: auto;
        max-height: 90%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        left: 10px;
        right: 10px;
        bottom: 0;
        top: auto;
        z-index: @topmost + 1;

        &.bloko-drop_stretch-on-xs {
            height: 90%;
        }
    }
}

.bloko-drop__overlay {
    position: fixed;
    background: fade(@color-gray-80, 55%);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: @topmost;
}

.bloko-drop__arrow {
    position: absolute;

    @media @screen-lt-s {
        .bloko-drop_fullscreen-on-xs & {
            display: none;
        }
    }
}

.bloko-drop_top .bloko-drop__arrow {
    top: 100%;
    left: 50%;
}

.bloko-drop_left .bloko-drop__arrow {
    left: 100%;
    top: 50%;
}

.bloko-drop_right .bloko-drop__arrow {
    left: 0;
    top: 50%;
}

.bloko-drop_bottom .bloko-drop__arrow {
    top: 0;
    left: 50%;
}

.bloko-drop_theme-dark {
    background: @bloko-drop-dark-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-dark-color;
    }
}

.bloko-drop_theme-attention {
    background: @bloko-drop-attention-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-attention-color;
    }
}

.bloko-drop_theme-light {
    background: @bloko-drop-light-color;
    color: @bloko-drop-dark-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-light-color;
    }
}

.bloko-drop_theme-bright {
    background: @bloko-drop-bright-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-bright-color;
    }
}

.bloko-drop_theme-info {
    background: @bloko-drop-info-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-info-color;
    }
}

.bloko-drop_theme-neural {
    background: @bloko-drop-neural-color;

    .bloko-drop__arrow {
        border-color: @bloko-drop-neural-color;
    }
}

.bloko-drop_active-enter {
    opacity: 0;
}

.bloko-drop_done-enter {
    opacity: 1;
    transition: all 300ms ease-out;
}

.bloko-drop_bottom {
    &.bloko-drop_active-enter {
        transform: translateY(-5px);
    }

    &.bloko-drop_done-enter {
        transform: translateY(0%);
    }
}

.bloko-drop_top {
    &.bloko-drop_active-enter {
        transform: translateY(5px);
    }

    &.bloko-drop_done-enter {
        transform: translateY(0%);
    }
}

.bloko-drop_right {
    &.bloko-drop_active-enter {
        transform: translateX(-5px);
    }

    &.bloko-drop_done-enter {
        transform: translateX(0%);
    }
}

.bloko-drop_left {
    &.bloko-drop_active-enter {
        transform: translateX(5px);
    }

    &.bloko-drop_done-enter {
        transform: translateX(0%);
    }
}

.bloko-drop__content-wrapper {
    display: flex;
    justify-content: space-between;
}

.bloko-drop__content {
    flex: 1 1 auto;
}

.bloko-drop__close {
    opacity: 0.3;
    position: relative;
    left: 5px;
    padding-left: 10px;

    @media @screen-lt-s {
        .bloko-drop_fullscreen-on-xs & {
            position: sticky;
            height: 0;
            top: 0;
            text-align: right;
            padding-right: 15px;
            transform: translateY(15px);
        }
    }
}

.bloko-drop__title {
    height: 60px;
    border-bottom: 1px solid fade(@color-gray-80, 25%);
    flex-direction: row;
    justify-content: space-between;
    display: none;
    position: sticky;
    top: 0;
    z-index: 1;
    background: @color-white;

    @media @screen-lt-s {
        display: flex;
    }
}

.bloko-drop__title-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 20px;
    line-height: 60px;
    .bloko-text-strong();
}