// Base accordion styles (shared by all variants)
.eds-c-accordion {
    width: 100%;
    background-color: $t-eds-c-accordion--background-color;
    margin-bottom: $t-eds-c-accordion--margin-bottom;
}

.eds-c-accordion__button {
    @include u-button-reset;
    width: 100%;
    padding: $t-eds-c-accordion--button-padding;
    border-top: 1px solid $t-eds-c-accordion--primary-color;
}

.eds-c-accordion__content ul {
    @include u-list-reset;
}

.eds-c-accordion:not(.eds-c-accordion--default) + .eds-c-accordion:not(.eds-c-accordion--default) .eds-c-accordion__button,
li + li > .eds-c-accordion:not(.eds-c-accordion--default) .eds-c-accordion__button {
    border-top: none;
}

.eds-c-accordion__icon {
    width: 1em;
    height: 1em;
    color: $t-eds-c-accordion--tertiary-color;
    fill: $t-eds-c-accordion--tertiary-color;
    transition: transform 0.3s ease;
}

.eds-c-accordion__button.is-open .eds-c-accordion__icon {
    color: $t-eds-c-accordion--secondary-color;
    fill: $t-eds-c-accordion--secondary-color;
    transform: rotate(180deg);
}

.eds-c-accordion__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $t-eds-c-accordion--header-gap;
}

.eds-c-accordion__title {
    display: inline-block;
    color: $t-eds-c-accordion--quaternary-color;
    font-family: $t-a-typography-font-family-default;
    font-size: $t-eds-c-accordion--font-size;
    font-weight: $t-a-typography-font-weight-bold;
    line-height: $t-a-typography-line-height-md;
}

.eds-c-accordion__button.is-open .eds-c-accordion__title {
    color: $t-eds-c-accordion--secondary-color;
}

.eds-c-accordion__content-wrapper {
    border-bottom: 1px solid $t-eds-c-accordion--primary-color;
}

.eds-c-accordion__content {
    background-color: $t-eds-c-accordion--content-background-color;
    padding: $t-eds-c-accordion--content-padding;
}

// ------------------------------
// Mobile Navigation Features
// These apply UNLESS .eds-c-accordion--default is present
// ------------------------------
.eds-c-accordion__button-container {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
}

.eds-c-accordion__heading-wrapper {
    width: 100%;
    flex-grow: 1;
    margin: 0;
}

.eds-c-accordion__button {
    border-bottom: 1px solid $t-eds-c-accordion--primary-color;
    flex-grow: 1;
}

@include from-tablet {
    .eds-c-accordion__button {
        border-left: 1px solid $t-eds-c-accordion--primary-color;
        border-right: 1px solid $t-eds-c-accordion--primary-color;
    }
}

.eds-c-accordion__button.is-open {
    border-left: none;
}

.eds-c-accordion__button.is-open + .eds-c-accordion__strip,
.eds-c-accordion__heading-wrapper.is-open + .eds-c-accordion__strip {
    flex-grow: 0;
    width: $t-eds-c-accordion--strip-width;
    background-color: $t-eds-c-accordion--secondary-color;
}

.eds-c-accordion__content ul {
    font-size: $t-eds-c-accordion--font-size;

    h1, h2, h3, h4, h5, h6 {
        font-size: $t-eds-c-accordion--heading-font-size;
        margin: $t-eds-c-accordion--heading-margin;
    }

    li + li {
        margin-top: $t-eds-c-accordion--list-item-spacing;
    }

    a {
        color: $t-eds-c-accordion--tertiary-color;
        line-height: $t-a-typography-line-height-md;
    }
}

.eds-c-accordion__content-wrapper.eds-c-accordion__content-wrapper--grouped > ul > li + li {
    margin-top: $t-eds-c-accordion--content-grouped-spacing;
}

// ------------------------------
// Default Variant (Opt-in for filters, FAQs, etc.)
// Removes mobile nav specific features
// ------------------------------
.eds-c-accordion--default {
    border-radius: $t-eds-c-accordion--default-border-radius;

    .eds-c-accordion__button-container {
        display: block; // Override mobile nav flex layout
    }

    .eds-c-accordion__title {
        font-size: $t-eds-c-accordion--default-font-size;
    }

    .eds-c-accordion__icon {
      font-size: $t-eds-c-accordion--default-icon-font-size;
    }

    .eds-c-accordion__button {
        border-top: $t-eds-c-accordion--default-button-border-top;
        border-bottom: none;
        border-left: none;
        border-right: none;
    }

    .eds-c-accordion__content-wrapper {
        border-bottom: none;
    }

    .eds-c-accordion__content {
        background-color: $t-eds-c-accordion--default-content-background-color;
        padding: $t-eds-c-accordion--default-padding;
        border-bottom-left-radius: $t-eds-c-accordion--default-border-radius;
        border-bottom-right-radius: $t-eds-c-accordion--default-border-radius;
    }

    // Hide strip in default variant
    .eds-c-accordion__strip {
        display: none;
    }

    // Remove mobile nav list styling in default variant
    .eds-c-accordion__content ul {
        font-size: inherit;

        h1, h2, h3, h4, h5, h6 {
            font-size: inherit;
            margin: inherit;
        }

        li + li {
            margin-top: inherit;
        }

        a {
            color: inherit;
            line-height: inherit;
        }
    }

    .eds-c-accordion__content-wrapper.eds-c-accordion__content-wrapper--grouped > ul > li + li {
        margin-top: inherit;
    }

    // Show more / Show less functionality
    .eds-c-accordion__content--has-show-more {
        max-height: $t-eds-c-accordion--show-more-height;
        max-height: var(--show-more-height, $t-eds-c-accordion--show-more-height);
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .eds-c-accordion__content--has-show-more.is-expanded {
        max-height: none;
    }

    .eds-c-accordion__btn-show-more {
        @include u-button-reset;
        display: block;
        width: 100%;
        padding: $t-eds-c-accordion--show-more-padding;
        color: $t-eds-c-accordion--secondary-color;
        font-size: $t-eds-c-accordion--font-size;
        font-weight: $t-a-typography-font-weight-bold;
        text-align: left;
        cursor: pointer;
    }

    .eds-c-accordion__btn-show-more-icon {
        width: 1rem;
        height: 1rem;
        margin-left: 0.25rem;
        vertical-align: middle;
        color: $t-eds-c-accordion--secondary-color;
        fill: $t-eds-c-accordion--secondary-color;
        transition: transform 0.3s ease;
    }

    .eds-c-accordion__btn-show-more-text,
    .eds-c-accordion__btn-show-less-text {
        text-decoration: underline;
        text-decoration-thickness: .0625rem;
        text-underline-offset: .25rem;

        &:hover,
        &:focus {
            text-decoration-thickness: .25rem;
        }
    }

    .eds-c-accordion__btn-show-more[aria-expanded="true"] .eds-c-accordion__btn-show-more-icon {
        transform: rotate(180deg);
    }

    .eds-c-accordion__btn-show-less-text {
        display: none;
    }

    .eds-c-accordion__btn-show-more[aria-expanded="true"] .eds-c-accordion__btn-show-more-text {
        display: none;
    }

    .eds-c-accordion__btn-show-more[aria-expanded="true"] .eds-c-accordion__btn-show-less-text {
        display: inline;
    }
}