@import "../variables/variables";
@import "../mixins/private/token-mixins";

summary.details__summary {
    @include border-radius-token(expand-btn-border-radius, border-radius-50);
    @include color-token(
        details-summary-foreground-color,
        color-foreground-primary
    );

    align-items: center;
    box-sizing: border-box;
    display: inline-flex;
    font-size: var(--font-size-default);
    font-weight: var(--font-weight-bold);
    list-style-position: inside;
    list-style-type: none; /* Remove details marker for non-webkit */
    padding: 12px 8px;

    &::before {
        content: none;
    }

    /* Remove details marker for non-webkit */
    &::-webkit-details-marker {
        display: none;
    }

    &:focus,
    &:hover {
        background-color: var(--color-state-secondary-hover);
        outline: 1;
    }

    &:active {
        background-color: var(--color-state-secondary-active);
        outline: 1;
    }
}

summary.details__summary--center {
    justify-content: center;
    width: 100%;
}

summary.details__summary--small {
    font-size: var(--font-size-small);
    padding: 4px 8px;
}

span.details__icon {
    margin-inline-start: 8px;
}

/* progressive enhancement - override hidden SVG */
span.details__icon[hidden] {
    display: inline-flex;
}

details.details[open] {
    span.details__icon {
        transform: rotate(180deg);
    }

    summary.details__summary::before {
        content: none;
    }
}

/* https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/ */
details.details summary:focus:not(:focus-visible) {
    outline: none;
}
