/* ============================================================================
   06-COMPONENTS -> #ACCORDION
   ========================================================================= */

/**
 * A vertical stack of interactive headings used to toggle the display of
 * further information.
 */


//
// SCSS imports
//

@use '../01-settings' as *;
@use '../02-tools' as *;


/**
 * Accordion
 */

.accordion {
    --accordion-item-bg: var(--bg-secondary);
    --accordion-item-border-color: var(--border-color-secondary);
    --accordion-item-border-radius: var(--rounded-md);
    --accordion-item-border-width: var(--border-width);
    --accordion-item-color: var(--text-color-secondary);
    --accordion-item-icon-color: var(--text-color-secondary);
    --accordion-item-icon-size: var(--icon-size-lg);
    --accordion-item-padding-x: var(--card-padding-x);
    --accordion-item-padding-y: var(--card-padding-y);
    --accordion-item-active-bg: var(--bg-highlight);
    
    display: flex;
    flex-direction: column;
}


/**
 * Accordion item
 */

.accordion__item {
    background-color: var(--accordion-item-bg);
    border: var(--accordion-item-border-width) solid var(--accordion-item-border-color);
    border-radius: var(--accordion-item-border-radius);
    overflow: hidden;

    & + & {
        margin-top: var(--accordion-item-padding-y);
    }
}

.accordion__item[open] {
    .accordion__item-header {
        background-color: var(--accordion-item-active-bg);
    }
    
    .accordion__item-icon {
        transform: rotate(-180deg);
    }
}


/**
 * Accordion item header
 *
 * 1. Remove default summary tag arrow.
 */

.accordion__item-header {
    @include transition('background-color');
    color: var(--accordion-item-color);
    cursor: pointer;
    font-weight: var(--font-weight-semi-bold);
    list-style: none; // [1]
    padding-bottom: var(--accordion-item-padding-y);
    padding-left: var(--accordion-item-padding-x);
    padding-right: calc(var(--accordion-item-padding-x) * 2 + var(--accordion-item-icon-size));
    padding-top: var(--accordion-item-padding-y);
    position: relative;

    &::-webkit-details-marker {
        display: none; // [1]
    }

    &:hover {
        background-color: var(--accordion-item-active-bg);
    }
}


/**
 * Accordion item icon
 */

.accordion__item-icon {
    color: var(--accordion-item-icon-color);
    display: flex;
    height: var(--accordion-item-icon-size);
    position: absolute;
    right: var(--accordion-item-padding-x);
    top: var(--accordion-item-padding-y);
    width: var(--accordion-item-icon-size);
}


/**
 * Accordion item content
 */

.accordion__item-content {
    border-top: var(--accordion-item-border-width) solid var(--accordion-item-border-color);
    padding: var(--accordion-item-padding-y) var(--accordion-item-padding-x);
}