@import "./base/var";
@import "./mixins/index.scss";

@include c(collapse) {
    border: $--border-default;
    border-radius: $--border-radius-default;
    background-color: $--color-white;

    @include m(simple) {
        border-left: none;
        border-right: none;
        border-radius: 0;


        @include ci(collapse-item) {
            & > {
                @include ci(collapse-item__header) {
                    background-color: transparent;
                }
            }


            &--opened > {
                @include ci(collapse-item__header) {
                    border-bottom-color: transparent;
                }
            }
        }
    }

    @include m(right) {

        @include ci(collapse-item) {
            &__header {
                padding-right: 34px;

                &-icon {
                    margin-right: 0;
                    margin-left: 10px;
                    position: absolute;
                    right: 16px;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            &--opened > {
                @include ci(collapse-item__header) {
                    & > {
                        @include ci(collapse-item__header-icon) {
                            transform: translateY(-50%) rotate(90deg);
                        }
                    }
                }
            }
        }
    }
}

@include c(collapse-item) {
    border-bottom: $--border-default;
    &:last-child {
        border-bottom: 0;
    }

    @include e(header) {
        display: flex;
        align-items: center;
        height: $--collapse-item-header-height;
        line-height: $--collapse-item-header-height;
        background-color: $--collapse-item-header-background-color;
        padding: 0 16px;
        border-bottom: $--border-default;
        border-color: transparent;
        cursor: pointer;
        transition: all $--animation-time ease-in-out;
        position: relative;

        @include e(header-name) {
            flex: 1;
            @include utils-ellipsis();
        }
        @include e(header-icon) {
            margin-right: 10px;
            transition: transform $--animation-time ease-in-out;
        }
    }
    @include e(content) {

    }
    @include e(content-inner) {
        padding: 16px;
    }

    @include m(opened) {
        & > {
            @include e(header, false) {
                border-bottom: $--border-default;
                & > {
                    @include e(header-icon, false) {
                        transform: rotate(90deg);
                    }
                }
            }
        }
    }

    @include when(disabled) {
        @include e(header, false) {
            opacity: $--opacity-disabled;
            cursor: not-allowed;
        }
    }
}
