@use '../../styles/variables';

$cascader-menu-min-width: 122px;

.thy-cascader {
    outline: none;
    position: relative;
    display: inline-block;
    &:focus {
        .form-control-custom:not(.disabled) {
            border: 1px solid variables.$primary;
        }
    }

    .form-control {
        cursor: variables.$hand-cursor;

        &.disabled {
            cursor: variables.$disabled-cursor;
        }
    }
    &-menus {
        font-size: 14px;
        background: variables.$bg-panel;
        position: relative;
        z-index: 1050;
        border-radius: 4px;
        border: 1px solid variables.$gray-200;
        box-shadow: variables.$box-shadow;
        white-space: nowrap;
        margin-top: 4px;
        margin-bottom: 4px;
        ul,
        ol {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        &-empty,
        &-hidden {
            display: none;
        }
    }
    &-menu {
        display: inline-block;
        vertical-align: top;
        min-width: $cascader-menu-min-width;
        max-width: 300px;
        height: 180px;
        list-style: none;
        margin: 0;
        padding: 0;
        border-right: 1px solid variables.$gray-200;
        overflow: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857
        &:first-child {
            border-radius: 5px 0 0 5px;
        }
        &:last-child {
            border-right-color: transparent;
            margin-right: -1px;
            border-radius: 0 5px 5px 0;
        }
        &:only-child {
            border-radius: 5px;
        }
    }
    &-menu-item {
        padding: 7px 16px;
        line-height: 22px;
        cursor: variables.$hand-cursor;
        white-space: nowrap;
        transition: all 0.3s;
        color: variables.$gray-700;
        align-items: center;
        &:hover {
            background: variables.$gray-100;
            color: variables.$body-color;
        }
        &-active:not(&-disabled) {
            &,
            &:hover {
                background: rgba(variables.$primary, 0.1);
                color: variables.$primary;
            }
        }
        &-active:is(&-disabled) {
            background-color: variables.$gray-100;
            cursor: variables.$disabled-cursor;

            &:hover {
                background-color: variables.$gray-100;
            }
        }
        &-disabled {
            &,
            &:hover {
                color: variables.$gray-400;
                cursor: variables.$disabled-cursor;
                background-color: transparent;
            }
        }
        &-expand {
            position: relative;
            padding-right: 24px;
        }
        &-expand &-expand-icon,
        &-expand &-loading-icon {
            color: variables.$gray-500;
            position: absolute;
            right: 10px;
        }
        &-active &-expand-icon,
        &-active &-loading-icon {
            color: variables.$primary;
        }
        &-disabled &-expand-icon,
        &-disabled &-loading-icon {
            color: variables.$gray-400;
        }
    }

    &-empty-container {
        min-width: $cascader-menu-min-width;
    }

    &-search-list {
        height: 180px;
        overflow: auto;
        min-width: $cascader-menu-min-width;
    }

    &-search-list-item {
        height: 36px;
        &:hover {
            background-color: variables.$dropdown-menu-item-hover-bg;
        }
        &.active:not(.multiple) {
            background: rgba(variables.$primary, 0.1);
            color: variables.$primary;
        }
        // 覆盖 thyFlexibleText 默认样式使其垂直居中
        .option-label-item {
            max-width: 140px;
            width: unset;
            vertical-align: bottom;
        }
    }
}
