@import "../lib.less";
@import "../variables/components/collapse.less";

.@{veui-prefix}-collapse {
    border: 1px solid @veui-collapse-border-color;
    border-radius: @veui-collapse-border-radius-s;

    &-header {
        position: relative;
        display: flex;
        align-items: center;
        margin: -1px;
        font-size: @veui-collapse-font-size-s;
        line-height: @veui-collapse-header-line-height-s;
        padding: @veui-collapse-header-padding-y-s @veui-collapse-header-padding-x-s;
        border: 1px solid @veui-collapse-border-color;
        background-color: @veui-collapse-header-background-color;
        color: @veui-collapse-header-font-color;
        .border-top-radius(inherit);
        
        .veui-transition(color, background-color, border-color, border-radius);
        outline: none;
        cursor: pointer;

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

        &.focus-visible {
            background-color: @veui-collapse-header-background-color-focus;
            border-color: @veui-collapse-border-color-focus;
            z-index: 1;
        }

        &:active {
            background-color: @veui-collapse-header-background-color-active;
        }
    }

    &-collapsed &-header {
        .border-bottom-radius(inherit);
    }

    &-toggle {
        .veui-icon-size(@veui-collapse-icon-size);
        color: @veui-collapse-icon-color-aux;
        margin-right: @veui-collapse-header-content-spacing;
        .veui-transition(transform);
    }

    &-expanded &-toggle {
        transform: rotateZ(90deg);
    }

    &.@{veui-prefix}-disabled {
        .@{veui-prefix}-collapse {
            &-header {
            background-color: @veui-collapse-header-background-color-disabled;
            color: @veui-collapse-header-font-color-disabled;
            cursor: not-allowed;
            }

            &-toggle {
                color: @veui-collapse-icon-color-aux-disabled;
            }
        }
    }

    &-body {
        background-color: @veui-collapse-body-background-color;
        overflow: hidden;
        will-change: height;
        .veui-transition(height);
        .border-bottom-radius(inherit);
        color: @veui-collapse-body-font-color;
        font-size: @veui-collapse-font-size-s;
    }

    &-content {
        padding: @veui-collapse-body-padding-y-s @veui-collapse-body-padding-right-s @veui-collapse-body-padding-y-s @veui-collapse-body-padding-left-s;
    }

    &[ui~="m"] {
        border-radius: @veui-collapse-border-radius-m;

        .@{veui-prefix}-collapse {
            &-header {
                font-size: @veui-collapse-font-size-m;
                line-height: @veui-collapse-header-line-height;
                padding: @veui-collapse-header-padding-y @veui-collapse-header-padding-x;
            }
            &-body {
                font-size: @veui-collapse-font-size-m;
            }
            &-content {
                padding: @veui-collapse-body-padding-y @veui-collapse-body-padding-right @veui-collapse-body-padding-y @veui-collapse-body-padding-left;
            }
        }
    }
}