@import '../mixins/blend-modes';
@import '../animation/main';
@import '../base/states';
@import './layout';

$list-container-border: rgba(0, 0, 0, .08) !default;
$list-container-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
$list-container-background: $base !default;

$list-item-hover-background: $hover-background !default;
$list-item-selected-color: $selected-text-color !default;
$list-item-selected-background: blend-multiply($selected-background, $hover-background) !default;
$list-item-focused-box-shadow: inset 0 0 0 2px darken($base, 9%) !default;
$list-item-focused-border: rgba(0, 0, 0, .1) !default;
$list-item-selected-focused-box-shadow: inset 0 0 0 1px blend-multiply($accent, darken($background, 8%)) !default;

$popup-text: $normal-text-color !default;

@include exports('popup/theme') {

    .k-popup {
        // TODO: @include appearance(popup);
        color: $popup-text;
    }

    .k-popup.k-list-container {
        background-color: $list-container-background;
        border-color: $list-container-border;

        .k-item {
            transition: $transition;
            cursor: pointer;

            &.k-state-selected {
                box-shadow: none;
            }

            &:hover {
                background-color: $list-item-hover-background;

                &.k-state-selected {
                    background-color: $list-item-selected-background;
                    color: $list-item-selected-color;
                }
            }

            &:focus,
            &.k-state-focused {
                box-shadow: $list-item-focused-box-shadow;

                &.k-state-selected {
                    box-shadow: $list-item-selected-focused-box-shadow;
                }
            }
        }

        .k-list-optionlabel {
            border-bottom-color: $list-container-border;
            box-shadow: $list-container-box-shadow;
        }
    }

    .k-animation-container {
        border-radius: 0 0 $border-radius $border-radius;
    }
}