// 1. Revert inline overrides of the original library 🤦🏻‍♂️.
// 2. Any order is correct for us, but call the typography mixin last to prevent Sass deprecation warning.
//    @see https://sass-lang.com/d/mixed-decls
// 3. Alma's stylelint-config is not yet ready to force blockless mixin calls to come after declarations (see 2.).

@use '@tokens' as tokens;
@use '../tools/typography';

// Dialog
#cc-main .pm--box {
    max-height: 39em;

    @media screen and (width <= 640px) {
        max-height: 100%;
    }
}

// Header
#cc-main .pm__header {
    padding-inline: tokens.$space-1000;
    padding-top: tokens.$space-1000;
    padding-bottom: tokens.$space-700;
}

#cc-main .pm__title {
    margin-right: tokens.$space-500;

    // stylelint-disable-next-line order/order -- 3.
    @include typography.generate(tokens.$heading-small-bold); // 2.
}

// Close button
#cc-main .pm__close-btn {
    padding: 0;
    color: tokens.$component-button-tertiary-content;
    border-color: tokens.$component-button-tertiary-border;
    background-color: tokens.$component-button-tertiary-state-default;

    &:hover {
        border-color: tokens.$component-button-tertiary-border;
        background-color: tokens.$component-button-tertiary-state-hover;
    }
}

#cc-main .pm__close-btn svg,
#cc-main .pm__close-btn:hover svg {
    stroke: currentcolor;
}

// Body
#cc-main .pm__body {
    padding-inline: tokens.$space-1000;
    padding-block: tokens.$space-700;
}

// Content
#cc-main .pm__section-title {
    border-radius: tokens.$radius-200;
}

#cc-main .pm__section-desc {
    @include typography.generate(tokens.$body-small-regular);
}

#cc-main .pm__section,
#cc-main .pm__section--toggle {
    border-radius: tokens.$radius-200;
}

#cc-main .pm__section--toggle {
    margin-bottom: tokens.$space-500;
}

#cc-main .pm__section--toggle.is-expanded {
    --cc-cookie-category-block-bg: revert; // 1.
    --cc-cookie-category-block-border: revert; // 1.

    background-color: var(--cc-cookie-category-expanded-block-bg);

    &:hover {
        background-color: var(--cc-cookie-category-expanded-block-hover-bg);
    }
}

#cc-main .pm__section--toggle .pm__section-desc-wrapper {
    border-bottom-right-radius: tokens.$radius-200;
    border-bottom-left-radius: tokens.$radius-200;
}

#cc-main .pm__section--expandable .pm__section-arrow {
    background: none;
}

#cc-main .pm__section--expandable .pm__section-arrow svg {
    stroke: currentcolor;
}

// Footer
#cc-main .pm__footer {
    padding-inline: tokens.$space-1000;
    padding-top: tokens.$space-700;
    padding-bottom: tokens.$space-1000;
}

// Footer actions
#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group {
    margin-left: tokens.$space-700;
}

#cc-main .pm--flip .pm__btn + .pm__btn,
#cc-main .pm--flip .pm__btn-group + .pm__btn-group {
    margin-right: tokens.$space-700;
}

@media screen and (width <= 640px) {
    #cc-main .pm__btn + .pm__btn,
    #cc-main .pm__btn-group + .pm__btn-group {
        // stylelint-disable-next-line declaration-no-important -- Override original library styles.
        margin: tokens.$space-500 0 0 !important;
    }

    #cc-main .pm--flip .pm__btn + .pm__btn,
    #cc-main .pm--flip .pm__btn-group + .pm__btn-group {
        // stylelint-disable-next-line declaration-no-important -- Override original library styles.
        margin-bottom: tokens.$space-500 !important;
    }
}