@import "@patternfly/patternfly/base/patternfly-common.css";
@import "@patternfly/patternfly/base/patternfly-globals.css";
@import "@patternfly/patternfly/base/patternfly-themes.css";
@import "@patternfly/patternfly/base/patternfly-fa-icons.css";
@import "@patternfly/patternfly/base/patternfly-pf-icons.css";

@import "@patternfly/patternfly/components/Spinner/spinner.css";

@import "#fonts/RedHat/faces.css";

@import "./base/fonts.css";
@import "./base/variables.css";
@import "./base/scrollbars.css";
@import "./base/globals.css";
@import "./base/common.css";
@import "./base/placeholder.css";

@import "#styles/locales/ja/globals.css";
@import "#styles/locales/ko/globals.css";
@import "#styles/locales/zh/globals.css";

@import "@patternfly/patternfly/components/BackgroundImage/background-image.css";
@import "#elements/locale/ak-locale-select.css";
@import "#elements/locale/ak-locale-select.css";
@import "#flow/FlowExecutor.css";

/**
 * @file Static global styles for authentik.
 *
 * Similar the base/globals.css file, this file is only injected in server templates
 * that may not have the full web component support.
 * If you're deciding on where to put a style, prefer a more specific file
 * to avoid unnecessarily increasing the global scope of the style.
 */

/* #region Custom login variables */

:root {
    --ak-c-login--PaddingMax: 8dvw;

    --ak-c-login--spacer: clamp(
        var(--pf-global--spacer--md),
        var(--pf-global--spacer--2xl),
        var(--ak-c-login--PaddingMax)
    );

    --ak-c-login--MaxWidth: 35rem;
    --ak-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
    --ak-c-login__main--Color: var(--pf-global--Color--dark-100);

    --ak-c-login__main--brand-PaddingMin: var(--pf-global--spacer--xs);
    --ak-c-login__main--brand-PaddingIdeal: 5rem;
    --ak-c-login__main--brand-PaddingMax: 15dvh;

    --ak-c-login__main-ColumnWidth: minmax(
        min(100%, var(--ak-c-login--MaxWidth)),
        var(--ak-c-login--MaxWidth)
    );

    --ak-c-login__main-header-PaddingBlock: clamp(
        var(--pf-global--spacer--xs),
        6dvw,
        var(--pf-global--spacer--lg)
    );

    --ak-c-login__main-header-PaddingInline: var(--ak-c-login--spacer);

    --ak-c-login__main--footer-PaddingMin: var(--pf-global--spacer--xs);
    --ak-c-login__main--footer-PaddingIdeal: 3rem;
    --ak-c-login__main--footer-PaddingMax: 9dvh;
    --ak-c-login__main--BoxShadow: var(--pf-global--BoxShadow--md);

    --ak-c-login__footer--PaddingBlock: var(--pf-global--spacer--md);
    --ak-c-login__footer--Color: var(--ak-global--BackgroundColorContrast--100);

    --ak-c-login__footer--ColumnGap: min(var(--pf-global--spacer--2xl), 2dvw);
    --ak-c-login__footer--RowGap: var(--pf-global--spacer--md);

    --ak-c-login__footer--Display: grid;

    --ak-c-login__footer--MaxWidth: var(--ak-c-login--MaxWidth);
    /* Gracefully degrade to the login max width if CSS size functions are not supported. */
    --ak-c-login__footer--MaxWidth: min(100dvw, var(--ak-c-login--MaxWidth));

    --ak-c-login__footer--TrackMin: max-content;
    --ak-c-login__footer--TrackWidth: minmax(
        var(--ak-c-login__footer--TrackMin),
        var(--ak-c-login__footer--TrackMax)
    );

    --ak-c-login__footer--ItemMaxWidth: calc(
        var(--ak-c-login__footer--MaxWidth) - var(--ak-c-login__footer--ColumnGap)
    );

    --ak-c-login__footer--ColumnCount: 4;
    --ak-c-login__footer--TrackMax: calc(
        (var(--ak-c-login__footer--MaxWidth) / var(--ak-c-login__footer--ColumnCount)) -
            var(--ak-c-login__footer--ColumnGap)
    );

    @media (width <= 35rem) {
        --ak-c-login__footer--TrackWidth: 1fr;
        --ak-c-login__footer__list-item--FlexBasis: 100%;
    }
}

[data-theme="dark"] .pf-c-login {
    --ak-c-login__main--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
}

/* #endregion */

/* #region PF4 Login */

.pf-c-login {
    --pf-c-login__main-header--PaddingTop: var(--ak-c-login__main-header-PaddingBlock);
    --pf-c-login__main-header--PaddingBottom: var(--ak-c-login__main-header-PaddingBlock);
    --pf-c-login__main-header--PaddingLeft: var(--ak-c-login__main-header-PaddingInline);
    --pf-c-login__main-header--PaddingRight: var(--ak-c-login__main-header-PaddingInline);

    --pf-c-login__main--BackgroundColor: var(--ak-c-login__main--BackgroundColor);

    --pf-c-login__main-body--PaddingLeft: var(--ak-c-login--spacer);
    --pf-c-login__main-body--PaddingRight: var(--ak-c-login--spacer);
    --pf-c-login__main-body--PaddingBottom: 0;

    --pf-c-login__main-footer--PaddingBottom: clamp(
        var(--ak-c-login__main--footer-PaddingMin),
        var(--ak-c-login__main--footer-PaddingIdeal),
        var(--ak-c-login__main--footer-PaddingMax)
    );
    --pf-c-login__main-footer-band--BackgroundColor: transparent;

    --pf-c-login__footer--c-list--xl--PaddingTop: 0;
    --pf-c-login__footer--PaddingLeft: var(--pf-global--spacer--lg);
    --pf-c-login__footer--PaddingRight: var(--pf-global--spacer--lg);

    --pf-c-login__container--PaddingLeft: 0 !important;
    --pf-c-login__container--PaddingRight: 0 !important;
}

/* #endregion */

/* #region Form */

/* Fallback form controls with minimal runtime expectations. */
.form-control-static {
    margin-top: var(--pf-global--spacer--sm);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .avatar {
        display: flex;
        align-items: center;
    }

    img {
        margin-right: var(--pf-global--spacer--xs);
    }

    a {
        padding-top: var(--pf-global--spacer--xs);
        padding-bottom: var(--pf-global--spacer--xs);
        line-height: var(--pf-global--spacer--xl);
    }
}

/* #endregion */

/* #region Flow Links */

[name="flow-links"] {
    [part="list"],
    &::part(list) {
        --pf-c-list--m-inline--li--MarginRight: 0;

        /* 3 entries is a unique scenario where 2 columns is visually balanced. */
        &[data-count="3"] {
            --ak-c-login__footer--ColumnCount: 2;
        }

        justify-content: center;
        column-gap: var(--ak-c-login__footer--ColumnGap);
        row-gap: var(--ak-c-login__footer--RowGap);

        max-width: var(--ak-c-login__footer--MaxWidth);
        place-items: center;
        display: var(--ak-c-login__footer--Display);

        grid-template-columns: repeat(
            var(--ak-c-login__footer--ColumnCount),
            var(--ak-c-login__footer--TrackWidth)
        );

        grid-template-rows:
            [header] max-content
            [main] max-content
            [footer];
    }

    [part="list-item"],
    &::part(list-item) {
        /* CSS grid is preferred, but if the custom CSS overrides this, default to something reasonable. */
        flex: 1 1 var(--ak-c-login__footer__list-item--FlexBasis, auto);
        text-align: center;
        max-width: var(--ak-c-login__footer--ItemMaxWidth);

        &[data-kind="text"] {
            &[data-track-name="start"] {
                grid-column: 1 / -1;
            }
            &[data-track-name="end"] {
                grid-column: 1 / -1;
            }
        }
    }

    [part="list-item-link"],
    &::part(list-item-link) {
        color: unset;
    }
}

/* #endregion */
