$lg: 992px;

/* Base colors */
$body-color: #000000;
$color-black: #000000;
$color-graphite: #454444;
$color-lightgrey: #f5f5f5;
$color-white: #ffffff;
$color-clear: transparent;

$color-primary-20: #eadef1;
$color-primary-30: #dfccea;
$color-primary-40: #d5bce4;
$color-primary-60: #c19cd6;
$color-primary-80: #ab7ac8;
$color-primary-90: #a069c0;
$color-primary-100: #9558b9;

h1 {
    font-size: 30px;
}

h2 {
    font-size: 26px;
}

h3 {
    font-size: 24px;
}

%icon {
    color: $color-black;
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: "liga";
    transition: all 0.3s;
}

/* accordion */
.accordion {
    background-color: $color-primary-30;
    border: 2px solid $color-primary-30;
    border-radius: 0.5rem;
    margin-bottom: 0.75rem;
    overflow: hidden;
    position: relative;
    transition: 0.3s ease all;
    padding: 0 0 0.75rem 0;

    @media (min-width: $lg) {
        padding: 0 0 1.5rem 0;
    }

    &:has(button:hover, button:focus-visible) {
        border-color: $color-primary-100;
    }

    &-head {
        background-color: $color-primary-30;
        border: none;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.75rem 0.75rem 0 0.75rem;
        position: relative;
        text-align: left;
        cursor: pointer;
        transition: 0.3s ease all;

        @media (min-width: $lg) {
            padding: 1.5rem 1.5rem 0 1.5rem;
        }

        &:focus-visible {
            outline: none;
        }

        &::after {
            @extend %icon;
            content: "\e313";
            color: $color-black;
            font-size: 24px;
            left: inherit;
            right: 20px;
            transition: all 0.3s;
        }

        &.__active {
            background: $color-primary-30;
            padding-bottom: 0.75rem;

            @media (min-width: $lg) {
                padding-bottom: 1.5rem;
            }

            &::after {
                content: "\e316";
            }
        }
    }

    &-content {
        display: none;
        padding: 0 0.75rem;
        transition: 0.3s ease all;

        @media (min-width: $lg) {
            padding: 0 1.5rem;
        }

        p:last-child {
            margin-bottom: 0;
        }
    }
}