@import "./var.less";
@import "./mixin.less";

.@{prefixCls}-claps {
    border: 1px solid @border-color1;
    border-radius: @border-radius;
    box-sizing: border-box;

    &-item:not(:last-child) {
        border-bottom: 1px solid @border-color1;
    }


    .@{prefixCls}-claps-item {
        &-title {
            padding: 8px;
            font-size: 12px;
            line-height: 16px;
            color: @color-text-grey1;
            cursor: pointer;
            position: relative;
            display: flex;

            &-icon {
                color: @color-text-grey3;
                display: inline-block;
            }

            &-icon-position-left {
                position: unset;
                margin-right: 8px;
                color: @color-text-grey1;
            }

            &-icon-position-right {
                position: absolute;
                right: 16px;
                top: 12px;
            }

            &-arrow {
                transition: all 0.3s;
                transform: rotateZ(-90deg);
                display: inline-block;
                top: 12px;
            }

            .@{prefixCls}-claps-item-title-icon > .@{prefixCls}-claps-item-title-minus {
                position: relative;
                display: inline-block;
            }

            .@{prefixCls}-claps-item-title-minus > .@{prefixCls}-claps-item-title-plus {
                font-size: 16px;
            }

            .@{prefixCls}-claps-item-title-minus > .@{prefixCls}-claps-item-title-minus-active {
                // transition: all 0.3s;
                position: absolute;
                transform: rotateZ(90deg);
                right: 0;
                top: 3px;
            }
        }

        &-wrap {
            height: 0;
            opacity: 0;
            overflow: hidden;
            .property-prefix(transition, opacity ease-in @motion-duration-b);

            &-content {
                border-top: 1px solid @border-color1;
                padding: 8px;
                padding-bottom: 6px;
                font-size: 12px;
                color: @color-text-grey1;
            }
        }
    }

    .@{prefixCls}-claps-item-active > .@{prefixCls}-claps-item-wrap {
        height: auto;
        opacity: 1;
        .property-prefix(transition, opacity ease-out @motion-duration-b @motion-duration-b);
    }

    &-item-active > &-item-title > &-item-title-icon > &-item-title-arrow {
        transform: rotateZ(0deg);
    }

    &-item-active > &-item-title > &-item-title-icon > &-item-title-minus > &-item-title-minus-active {
        transform: rotateZ(90deg);
    }

    &-type-borderless {
        border-left: none;
        border-right: none;
        border-radius: 0;

        > .@{prefixCls}-claps-item > .@{prefixCls}-claps-item-wrap > .@{prefixCls}-claps-item-wrap-content {
            border: none;
        }
    }

    &-type-panel {
        border-color: transparent;

        .@{prefixCls}-claps-item:not(:last-child) {
            border-bottom-color: transparent;
        }

        > .@{prefixCls}-claps-item > .@{prefixCls}-claps-item-wrap > .@{prefixCls}-claps-item-wrap-content {
            border-top-color: transparent;
        }
    }
}