/* Note: For some reason the @font-face or @import at-rule don't work in a stylesheet for the Shadow DOM of a web component. For that reason, fonts must be loaded by the embedding web page externally. */

:host {
    --va-accordion-color-1: #4c638c;
    --va-accordion-color-2: #00205b;
    --va-accordion-color-3: #ffffff;
    --va-accordion-color-4: #1F2833;
    --va-accordion-font-family: "BrownStd";
    --va-accordion-font-size: 16px;

    display: block;
    background: var(--va-accordion-color-3);
    border: var(--va-accordion-color-1) solid 1px;
    border-inline-start-width: 6px;
    border-radius: 4px;
    margin-block-end: 26px;
    font-size: 1rem;
}

:host:has(button[aria-expanded=true]) {
    border-inline-start-color: var(--va-accordion-color-2);
}

* {
    box-sizing: border-box;
}

:is(h1, h2, h3, h4, h5, h6) {

    &.heading {
        margin: 0;
        color: var(--va-accordion-color-2);
    }
}

button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    gap: 20px;
    inline-size: 100%;
    min-block-size: 24px;
    padding-inline-start: 28px;
    padding-inline-end: 24px;
    padding-block: 24px;
    font-family: var(--va-accordion-font-family);
    font-weight: 700;
    font-size: var(--va-accordion-font-size);
    line-height: 1.1;    
    cursor: pointer;

    &:focus,
    &:hover,
    &[aria-expanded=true] {
        color: var(--va-accordion-color-3);
        background: var(--va-accordion-color-2);
    }

    @media (forced-colors: active) {

        &:focus,
        &:hover {
            outline: dashed 4px;
            outline-offset: -8px;
        }
    }
}

.content {
    padding-inline-start: 28px;
    padding-inline-end: 24px;
    padding-block: 24px;
    background: var(--va-accordion-color-3);
    margin: 0;
    color: var(--va-accordion-color-4);
}

.icon-minus,
.icon-plus {
    inline-size: 1rem;
    block-size: 1rem;
    flex-shrink: 0;
    fill: currentColor;
}

.icon-minus {
    button[aria-expanded=false]>& {
        display: none;
    }
}

.icon-plus {
    button[aria-expanded=true]>& {
        display: none;
    }
}

.off-screen {
    position: absolute;
    inset-inline-start: -99999px;
    clip-path: rect(0 0 0 0);
}