/**
 * Extensions of PF4's sidebar color to better match our existing dark theme.
 */
.pf-c-page {
    /* TODO: Revisit this after native <dialog> modals are implemented. */
    --pf-c-page__main--ZIndex: auto;
    --pf-c-page__header--ZIndex: auto;
    --pf-c-page__main--ZIndex: auto;
    --pf-c-page__main-nav--BackgroundColor: var(--pf-global--BackgroundColor--200);
    --pf-c-page__sidebar--m-dark--BackgroundColor: var(--pf-global--BackgroundColor--100);

    --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-light--BackgroundColor);
}

.pf-c-page__drawer {
    position: relative;
}

@media (width >= 1200px) {
    .pf-c-page__sidebar.pf-m-expanded {
        --pf-c-page__sidebar--BoxShadow: var(--pf-global--BoxShadow--sm-right);
    }
}

@media (width < 1200px) {
    .pf-c-page__sidebar.pf-m-expanded ~ .pf-c-page__drawer .pf-c-page__sidebar-backdrop::after {
        background-color: var(--pf-global--BackgroundColor--dark-transparent-100);
        content: "";
        position: absolute;
        inset: 0;
        z-index: calc(var(--pf-c-page__sidebar--ZIndex) - 1);
    }
}

ak-tabs::part(row) {
    background-color: transparent;
    margin-block-start: 0;
    padding-block-start: var(--pf-global--spacer--sm);
}

/**
 * We reverse the page header colors because PatternFly assumes a dark header
 * on light themes. The opposite must be done for dark themes.
 */
.pf-c-page__header {
    --pf-global--Color--100: var(--pf-global--Color--dark-100);
    --pf-global--Color--200: var(--pf-global--Color--dark-200);
    --pf-global--BorderColor--100: var(--pf-global--BorderColor--dark-100);
    --pf-global--primary-color--100: var(--pf-global--primary-color--dark-100);
    --pf-global--link--Color: var(--pf-global--link--Color--dark);
    --pf-global--link--Color--hover: var(--pf-global--link--Color--dark);
    --pf-global--BackgroundColor--100: transparent;
}

/* #region Dark Theme */

[data-theme="dark"] .pf-c-page,
:host([theme="dark"]) .pf-c-page {
    --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--200);

    /**
     * Lighten the main section background to contrast page content.
     */
    --pf-c-page__main-section--BackgroundColor: var(--pf-global--BackgroundColor--200);

    --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor: var(
        --pf-global--BackgroundColor--300
    );
    --pf-c-page__sidebar--BackgroundColor: var(--pf-c-page__sidebar--m-dark--BackgroundColor);
    --pf-c-page__header--BackgroundColor: transparent;

    /**
     * cf. Color reversal.
     */
    .pf-c-page__header {
        --pf-global--Color--100: var(--pf-global--Color--light-100);
        --pf-global--Color--200: var(--pf-global--Color--light-200);
        --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
        --pf-global--primary-color--100: var(--pf-global--primary-color--light-100);
        --pf-global--link--Color: var(--pf-global--link--Color--light);
        --pf-global--link--Color--hover: var(--pf-global--link--Color--light);
    }

    .pf-c-page__header-tools-item.pf-m-selected .pf-c-button {
        color: var(--pf-global--Color--100);
    }

    .pf-c-page__header-tools-item.pf-m-selected
        .pf-c-button
        .pf-c-notification-badge:hover::before {
        background-color: var(
            --pf-c-page__header-tools--c-button--m-selected--before--BackgroundColor
        );
    }
}

/* #endregion */
