/*
* created by zhongzheng at 2019.12.10
*/
@import '../style/themes/default.less';
@import '../style/mixins/index.less';

@dropdown-prefix-cls: ~'@{sino-prefix}-dropdown';

.@{dropdown-prefix-cls} {
    &-menu {
        display: flex;
        height: @dropdown-menu-height;
        background-color: @dropdown-menu-background-color;
        user-select: none;

        &-item {
            display: flex;
            flex: 1;
            align-items: center;
            justify-content: center;
            min-width: 0;
            cursor: pointer;

            &:active {
                opacity: @dropdown-menu-item-active-opacity;
            }

            &-disabled {
                &:active {
                    opacity: 1;
                }

                .sn-dropdown-menu-title {
                    color: @dropdown-menu-title-disabled-text-color;
                }
            }
        }

        &-title {
            position: relative;
            display: flex;
            align-items: center;
            max-width: 100%;
            color: @dropdown-menu-title-text-color;
            font-size: @dropdown-menu-title-font-size;
            line-height: @dropdown-menu-title-line-height;
            transition: all @animation-duration-base;

            &-active {
                color: @dropdown-menu-title-active-text-color;

                > .@{dropdown-prefix-cls}-menu-title-arrow {
                    color: @dropdown-menu-title-active-text-color;
                    transform: rotate(-180deg);
                }
            }

            &-arrow {
                margin-left: 0.12rem;
                font-size: 0.24rem;
                color: #d8d8d8;
                transform-origin: center;
                transition: all @animation-duration-base;
            }
        }
    }

    &-item {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 10;
        overflow: hidden;

        &-option {
            text-align: left;

            &-active {
                color: @dropdown-menu-option-active-color;

                .@{dropdown-prefix-cls}-item-icon {
                    color: @dropdown-menu-option-active-color;
                }
            }
        }

        &-up {
            top: 0;
        }

        &-down {
            bottom: 0;
        }

        &-content {
            position: absolute;
            max-height: @dropdown-menu-content-max-height;
        }

        &-icon {
            color: @theme-color;
        }
    }
}
