@import "../core/index-noreset.scss";
@import "../button/scss/variable.scss";
@import "./scss/mixin";
@import "./scss/variable";

#{$menu-btn-prefix} {
    display: inline-block;
    box-shadow: none;

    &-spacing-tb {
        padding: $popup-spacing-tb 0;
    }

    .#{$css-prefix}icon {
        transition: transform $motion-duration-immediately $motion-linear;
    }

    .#{$css-prefix}menu-btn-arrow::before {
        content: $menu-btn-fold-icon-content;
    }

    &.#{$css-prefix}expand .#{$css-prefix}menu-btn-arrow {
        @if get-compiling-value($menu-btn-unfold-icon-content) != get-compiling-value($icon-reset) {
            &::before {
                content: $menu-btn-unfold-icon-content;
            }
        } @else {
            transform: rotate(180deg);
        }
    }
    // --------- this is for config platform
    &-symbol-unfold::before {
        content: $menu-btn-unfold-icon-content;
    }
    // --------- this is for config platform

    &.#{$css-prefix}btn-normal {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-pure-text-normal-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-pure-normal-color-hover;
        }
    }

    &.#{$css-prefix}btn-secondary {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-pure-text-secondary-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-pure-secondary-color-hover;
        }
        &.#{$css-prefix}btn-text:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-text-secondary-color-hover;
        }
    }

    &.#{$css-prefix}btn-primary {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-pure-text-primary-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-pure-primary-color-hover;
        }
    }

    &.#{$css-prefix}btn-text.#{$css-prefix}btn-normal {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-text-text-normal-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-text-normal-color-hover;
        }
    }

    &.#{$css-prefix}btn-text.#{$css-prefix}btn-primary {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-text-text-primary-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-text-primary-color-hover;
        }
    }

    &.#{$css-prefix}btn-ghost.#{$css-prefix}btn-light {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-ghost-light-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-ghost-light-color-hover;
        }
    }

    &.#{$css-prefix}btn-ghost.#{$css-prefix}btn-dark {
        .#{$css-prefix}menu-btn-arrow {
            color: $menu-btn-ghost-dark-icon-color;
        }
        &:hover .#{$css-prefix}menu-btn-arrow {
            color: $btn-ghost-dark-color-hover;
        }
    }

    &.disabled .#{$css-prefix}menu-btn-arrow,
    &[disabled] .#{$css-prefix}menu-btn-arrow {
        color: $menu-btn-disabled-icon-color;
    }

    &.#{$css-prefix}btn-text.disabled .#{$css-prefix}menu-btn-arrow,
    &.#{$css-prefix}btn-text[disabled] .#{$css-prefix}menu-btn-arrow {
        color: $menu-btn-disabled-icon-color;
    }

    &[disabled].#{$css-prefix}btn-ghost.#{$css-prefix}btn-dark .#{$css-prefix}menu-btn-arrow {
        color: $menu-btn-ghost-dark-disabled-icon-color;
    }

    &[disabled].#{$css-prefix}btn-ghost.#{$css-prefix}btn-light .#{$css-prefix}menu-btn-arrow {
        color: $menu-btn-ghost-light-disabled-icon-color;
    }
}