@use '../shared-styles/spacing' as *;
@use '../shared-styles/radii' as *;

.pageContent {
    max-width: var(--theme-normal-container-max-width);
    margin: 0 auto;
    padding: var(--theme-content-spacing) 0;

    @media (max-width: 768px) {
        max-width: var(--theme-narrow-container-max-width);
        padding: $mod-space-20 $mod-space-16;
    }
}

.accordionWrapper {
    margin-bottom: var(--theme-content-spacing);
    position: relative;


    &.last {
        margin-bottom: 0;
    }
}

.proBadge {
    display: inline-flex;
    align-items: center;
    padding: $mod-space-4 $mod-space-10;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0.3px;
    color: #ffffff;
    background-color: var(--theme-palette-color-4);
    border-radius: $mod-radius-4;
    white-space: nowrap;
    margin-left: var(--theme-content-spacing);
}

.accordionTitle {
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.triangleIcon {
    width: 0;
    height: 0;
    border-left: $mod-space-6 solid transparent;
    border-right: $mod-space-6 solid transparent;
    border-bottom: $mod-space-10 solid var(--wp-admin-theme-color);
    display: inline-block;
    transition: transform 0.2s ease-in-out;
    margin-left: $mod-space-15;
    margin-right: $mod-space-25;
    transform: rotate(180deg);
}