@use './accordion-theme' as *;

.kbq-accordion {
    display: block;
}

.kbq-accordion-item {
    box-sizing: border-box;
    display: block;

    border-width: 2px;
    border-style: solid;
    border-color: transparent;
}

.kbq-accordion-header {
    display: flex;

    height: var(--kbq-accordion-size-item-header-height);
}

.kbq-accordion-content {
    display: block;
    overflow: hidden;

    & > p {
        margin: unset;
        padding: var(--kbq-accordion-size-item-content-padding);
    }

    &[data-state='open'] {
        transition: 300ms ease-out;
        height: var(--radix-accordion-content-height);
    }

    &[data-state='closed'] {
        transition: 300ms ease-out;
        height: 0;
    }
}

@include kbq-accordion-theme();
@include kbq-accordion-typography();