@import "./colors.css";
@import "./colors-dark.css";
@import "./spacers.css";
@import "./icons.css";
@import "./shadows.css";
@import "./z-indexes.css";
@import "./borders.css";

/* #region Miscellaneous */

:root {
    --pf-global--ListStyle: disc outside;
    --pf-global--Transition: all 250ms cubic-bezier(0.42, 0, 0.58, 1);
    --pf-global--TimingFunction: cubic-bezier(0.645, 0.045, 0.355, 1);
    --pf-global--TransitionDuration: 250ms;
    --pf-global--arrow--width: 0.9375rem;
    --pf-global--arrow--width-lg: 1.5625rem;
    --pf-global--target-size--MinWidth: 44px;
    --pf-global--target-size--MinHeight: 44px;
}

/* #endregion */

/* #region authentik extensions */

/* #region Root */

:root {
    --ak-accent: #fd4b2d;

    --ak-dark-foreground: #fafafa;
    --ak-dark-background: #18191a;
    --ak-dark-background-light: #1c1e21;
    --ak-dark-background-lighter: #2b2e33;

    --ak-global--BackgroundColorContrast--100: var(--pf-global--Color--light-100);

    --ak-global--BackgroundContrastFilter: drop-shadow(
        0 0 2px
            var(--ak-locale-select--ShadowBlendColor, var(--pf-global--BackgroundColor--dark-200))
    );

    /* Minimum width after which the sidebar becomes automatic */
    --ak-sidebar--minimum-auto-width: 80rem;
}

/* #region Root globals, V2 */
:root {
    /* ---- Background Colors ---- */
    --ak-v2-global--BackgroundColor--100: #fff;
    --ak-v2-global--BorderWidth--sm: 1px;

    /* ---- Text Colors ---------- */
    --pf-v5-global--Color--100: #151515;

    /* ---- Border Colors -------- */
    --ak-v2-global--BorderColor--100: #d2d2d2;
    --ak-v2-global--BorderColor--200: #8a8d90;

    /* ---- Box Shadows ------ */
    --ak-v2-global--BoxShadow--lg:
        0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
    --ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
    --ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
    --ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
    --ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);

    /* ---- Spacers -------------- */
    --ak-v2-global--spacer--xs: 0.25rem;
    --ak-v2-global--spacer--sm: 0.5rem;
    --ak-v2-global--spacer--md: 1rem;
    --ak-v2-global--spacer--lg: 1.5rem;
    --ak-v2-global--spacer--xl: 2rem;
    --ak-v2-global--spacer--2xl: 3rem;
    --ak-v2-global--spacer--3xl: 4rem;
    --ak-v2-global--spacer--4xl: 5rem;
    --ak-v2-global--spacer--form-element: 0.375rem;
    --ak-v2-global--gutter: 1rem;
    --ak-v2-global--gutter--md: 1.5rem;

    /* ---- Z-Index -------------- */
    --ak-v2-global--ZIndex--xs: 100;
    --ak-v2-global--ZIndex--sm: 200;

    /* ---- Animation ------------ */
    --ak-v2-global--TransitionDuration: 250ms;

    /* ---- Customization Bridge - */
    --ak-v2-global--dark-background: var(--ak-dark-background);
}

/* -------- Dark Theme ------------------------------- */

[data-theme="dark"] {
    /* ---- Background Colors ---- */
    --ak-v2-global--BackgroundColor--100: #18191a;

    /* ---- Text Colors ---------- */
    --ak-v2-global--Color--100: #e0e0e0;

    /* ---- Border Colors -------- */
    --ak-v2-global--BorderColor--100: #444548;
    --ak-v2-global--BorderColor--200: #444548;

    /* ---- Box Shadows ------ */
    --ak-v2-global--BoxShadow--lg:
        0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
    --ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
    --ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
    --ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
    --ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
}

/* -------- Semantic Names -------------------------- */

:root {
    /* ---- Background Colors ---- */
    --ak-v2-global--ContentSurface: var(--ak-v2-global--BackgroundColor--100);
    --ak-v2-global--SecondaryContentSurface: var(--ak-v2-global--BackgroundColor--200);
    /* Not sure what to call this next one; this is the background color Patternfly uses when you hover
       over something and it changes color to indicate it's interactive in some way. It's the same
       color as the one above in their default theme. */
    --ak-v2-global--AffordanceIndicatedSurface: var(--ak-v2-global--BackgroundColor--200);

    /* ---- Text Colors ---- */
    --ak-v2-global--PrimaryText: var(--ak-v2-global--Color--100);

    /* ---- Border Colors ---- */
    --ak-v2-global--StandardBorder: var(--pf-v5-global--BorderColor--100);
    --ak-v2-global--InputAccentBorder: var(--pf-v5-global--BorderColor--200);
}

/* #endregion */
