@import '../../style/themes/index.less';
@import '../../style/mixins/index.less';
@import './minxin.less';

@collapse-prefix-cls: ~'@{acud-prefix}-collapse';

.@{collapse-prefix-cls} {
    .reset-component();

    &>&-item {
        border: @collapse-border;
        border-bottom: 0;
        overflow: hidden;

        &:first-child {
            border-top-left-radius: @R3;
            border-top-right-radius: @R3;
        }

        &:last-child {
            border-bottom: @collapse-border;
            border-bottom-left-radius: @R3;
            border-bottom-right-radius: @R3;
        }

        >.@{collapse-prefix-cls}-header {
            outline: none;
            position: relative;
            background-color: @collapse-header-bg;
            padding: @collapse-padding;
            padding-left: 10*@P;
            cursor: pointer;
            font-size: @collapse-font-size;
            line-height: @collapse-line-height;
            .basic-tp-config(@collapse-header-text-tp);

            &:hover {
                background-color: @collapse-header-bg-hover;
            }

            .@{collapse-prefix-cls}-arrow {
                position: absolute;
                width: 4*@P;
                height: 4*@P;
                left: 4*@P;
                top: 50%;
                margin-top: -2*@P;
                .basic-tp-config(@collapse-header-icon-tp);

                & svg {
                    font-size: @T4;
                    transition: transform 0.24s;
                }
            }
        }
    }

    &-content {
        border-top: @collapse-border;
        background-color: @collapse-content-bg;
        transition: all 0.3s;

        &>&-box {
            padding: @collapse-padding;

            p {
                font-size: @collapse-font-size;
                line-height: @collapse-line-height;
                color: @collapse-content-color;
                margin: 0;
            }
        }

        &-hidden {
            display: none;
        }
    }

    &>&-item-disabled {
        &:hover {
            box-shadow: none;
        }
    }

    &>&-item-disabled>&-header {
        & {
            .collapse-disabled(@collapse-header-text-tp);
            &:hover {
                background-color: @collapse-header-bg;
            }
        }

        &>.@{collapse-prefix-cls}-arrow {
            .collapse-disabled(@collapse-header-icon-tp);
        }
    }
}