@use '~flux/components/css/mixin';

.expandable {
    display: flex;
    flex-flow: column;
}

.expandableOpened {
    composes: expandable;
}

.expandableHeader {
    display: flex;
    height: 54px;
    padding-left: 18px;
    padding-right: 18px;
    align-items: center;
    gap: 12px;
    background: unset;
    border: 0;
    color: var(--foreground-prominent);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-default);
    transition-property: background, mixin.focus-ring-transition-properties();
    z-index: 1;

    @include mixin.focus-ring();

    @include mixin.hover {
        background: var(--surface-hover);
    }

    :is(span) {
        flex-grow: 1;
        font-weight: 600;
    }

    :local(.icon):last-child {
        color: var(--foreground-secondary);
    }
}

.expandableBody {
    transition: height 390ms var(--swift-out), translate 300ms var(--swift-out) 120ms, opacity 300ms var(--swift-out) 120ms;

    &:global(.v-enter-from),
    &:global(.v-leave-to) {
        opacity: 0;
        translate: 0 -15px;
    }

    &:global(.v-enter-to),
    &:global(.v-leave-from) {
        opacity: 1;
    }

    &:global(.v-leave-active) {
        transition-delay: 0s;
    }

    &:global(.v-enter-active),
    &:global(.v-leave-active) {
        overflow: hidden;
    }
}

.expandableContent {
    padding: 0 18px 18px;
}

.basePane > .expandable {
    border-radius: inherit;
}

.basePane > .expandable .expandableHeader {
    border-radius: inherit;
}

.basePane > .expandableOpened .expandableHeader {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.expandableGroup {
    display: flex;
    flex-flow: column;

    .expandable + .expandable {
        border-top: 1px solid var(--surface-stroke);
    }

    &:not(:first-child) {
        border-top: 1px solid var(--surface-stroke);
    }

    &:not(:last-child) {
        border-bottom: 1px solid var(--surface-stroke);
    }
}

.basePane > .expandableGroup:first-child .expandable:first-child .expandableHeader {
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

.basePane > .expandableGroup:last-child .expandable:not(.expandableOpened):last-child .expandableHeader {
    border-bottom-left-radius: var(--radius);
    border-bottom-right-radius: var(--radius);
}