@import "mixins/mixins";
@import "common/var";
@import "common/transition";

.el-collapse {
    border-top: 1px solid $color-gray--015;
    border-bottom: 1px solid $color-gray--015;
}

.el-collapse--borderless {
    border: none;
    .el-collapse-item__header, .el-collapse-item__wrap {
        border: none;
    }
}

.el-collapse-item:last-child {
    margin-bottom: -1px;
}

.el-collapse-item__header {
    height: $--collapse-header-height;
    line-height: $--collapse-header-height;
    background-color: $--collapse-header-fill;
    color: $--collapse-header-color;
    cursor: pointer;
    border-bottom: 1px solid $--collapse-border-color;
    font-size: $--collapse-header-size;
    font-weight: 500;
    transition: border-bottom-color .3s;
    outline: none;

    &.focusing:focus:not(:hover){
        color: $--color-primary;
    }
}

.el-collapse-item__header.is-active {
    border-bottom-color: transparent;
}

.el-collapse-item__arrow {
    margin-right: $space2;
    transition: transform .3s;
    float: right;
    height: 100%;
}

.el-collapse-item__arrow.is-active {
    transform: rotate(90deg);
}

.el-collapse-item__wrap {
    background-color: $--collapse-content-fill;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid $--collapse-border-color;
}

.el-collapse-item__content {
    padding-bottom: 25px;
    font-size: $--collapse-content-size;
    color: $--collapse-content-color;
    line-height: 1.8;
}