/**
 * RH OM Styles
 *
 * Theme overrides for OM Cookie Manager 14.x.
 * Project themes may override the --rh-omstyles-* custom properties.
 */

.om-cookie-panel {
    --rh-omstyles-active-color: var(--first-color, #315f3b);
    --rh-omstyles-active-color-hover: var(--first-color--hover, color-mix(in srgb, var(--rh-omstyles-active-color) 82%, black));
    --rh-omstyles-active-emphasis: #fff;
    --rh-omstyles-inactive-color: #4b5563;
    --rh-omstyles-inactive-color-hover: #374151;
    --rh-omstyles-inactive-emphasis: #fff;
    --rh-omstyles-focus-color: color-mix(in srgb, var(--rh-omstyles-active-color) 55%, white);
    --rh-omstyles-border-radius: 0;
    --rh-omstyles-z-index: 10000;
    --rh-omstyles-attribution-display: none;

    --om-cookie-panel-active-color: var(--rh-omstyles-active-color);
    --om-cookie-panel-active-emphasis: var(--rh-omstyles-active-emphasis);
    --om-cookie-panel-inactive-color: var(--rh-omstyles-inactive-color);
    --om-cookie-panel-inactive-emphasis: var(--rh-omstyles-inactive-emphasis);
    --om-cookie-panel-border-radius: var(--rh-omstyles-border-radius);

    z-index: var(--rh-omstyles-z-index);
}

.om-cookie-panel .cookie-panel__attribution {
    display: var(--rh-omstyles-attribution-display);
}

.om-cookie-panel .cookie-panel__control {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    gap: 0.625rem;
    align-items: stretch;
}

.om-cookie-panel .cookie-panel__control [data-omcookie-panel-save="all"] {
    flex: 1 1 15rem;
}

.om-cookie-panel .cookie-panel__button,
.om-cookie-panel .cookie-panel__button--color--green {
    min-height: 2.75rem;
    margin: 0;
    border: 0;
    border-radius: var(--rh-omstyles-border-radius);
    padding: 0.75rem 1.5rem;
    background-color: var(--rh-omstyles-active-color);
    color: var(--rh-omstyles-active-emphasis);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-transform: none;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.om-cookie-panel .cookie-panel__button:not(.cookie-panel__button--color--green) {
    background-color: var(--rh-omstyles-inactive-color);
    color: var(--rh-omstyles-inactive-emphasis);
}

.om-cookie-panel .cookie-panel__button:hover,
.om-cookie-panel .cookie-panel__button--color--green:hover {
    background-color: var(--rh-omstyles-active-color-hover);
}

.om-cookie-panel .cookie-panel__button:not(.cookie-panel__button--color--green):hover {
    background-color: var(--rh-omstyles-inactive-color-hover);
}

.om-cookie-panel .cookie-panel__button:focus-visible,
.om-cookie-panel a:focus-visible,
.om-cookie-panel .cookie-panel__checkbox:focus-visible + label {
    outline: 3px solid var(--rh-omstyles-focus-color);
    outline-offset: 3px;
}

.om-cookie-panel h3 {
    padding-inline: 0;
}

.om-cookie-panel .cookie-panel__checkbox + label::before {
    border-color: var(--rh-omstyles-active-color);
}

.om-cookie-panel .cookie-panel__checkbox:checked + label::before,
.om-cookie-panel .cookie-panel__checkbox:checked + label .checkbox-toggle {
    background-color: var(--rh-omstyles-active-color);
}

.om-cookie-panel__tabswitch .om-cookie-panel__tabswitch-btngroup ul button[aria-selected="true"],
.om-cookie-panel__tabswitch .om-cookie-panel__tabswitch-btngroup ul button.active {
    border-color: var(--rh-omstyles-active-color);
    background-color: var(--rh-omstyles-active-color);
    color: var(--rh-omstyles-active-emphasis);
}

@media (min-width: 64rem) {
    .om-cookie-panel:not(.om-cookie-panel-position-1) {
        width: 100vw;
        max-width: none;
        left: 50%;
        border-right: 0;
        border-left: 0;
        transform: translateY(100%) translateX(-50%);
    }

    .om-cookie-panel:not(.om-cookie-panel-position-1).active {
        transform: translateY(0) translateX(-50%);
    }
}

@media (max-width: 47.99rem) {
    .om-cookie-panel {
        padding-inline: clamp(1rem, 5vw, 1.5rem);
    }

    .om-cookie-panel .cookie-panel__control {
        flex-direction: column;
        gap: 0.5rem;
    }

    .om-cookie-panel .cookie-panel__control [data-omcookie-panel-save="all"] {
        flex-basis: auto;
    }

    .om-cookie-panel .cookie-panel__button,
    .om-cookie-panel .cookie-panel__button--color--green {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .om-cookie-panel,
    .om-cookie-panel *,
    .om-cookie-panel *::before,
    .om-cookie-panel *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .om-cookie-panel .cookie-panel__button,
    .om-cookie-panel .cookie-panel__checkbox + label::before,
    .om-cookie-panel .checkbox-toggle {
        forced-color-adjust: auto;
    }
}