:root {
    /* define default colors for mgm theme light */
    --mgm-color-100: var(--pf-v5-global--palette--black-500);
    --mgm-color-200: var(--pf-v5-global--palette--black-600);
    --mgm-color-400: var(--pf-v5-global--palette--black-700);

    /* replace blue accents of primary and hove/active styles by grey */
    --pf-v5-global--active-color--100: var(--mgm-color-100);
    --pf-v5-global--active-color--400: var(--mgm-color-400);
    --pf-v5-global--primary-color--100: var(--mgm-color-100);
    --pf-v5-global--primary-color--200: var(--mgm-color-200);
    --pf-v5-global--primary-color--300: var(--mgm-color-400);
    --pf-v5-global--primary-color--light-100: var(--mgm-color-100);
    --pf-v5-global--primary-color--dark-100: var(--mgm-color-400);

    /* define background and logo - see CSS for '.login-pf body' below */
    --keycloak-logo-url: url('../img/mgm-logo-white.svg');
    --keycloak-bg-logo-url: url("../img/mgm-chroma_1920x1080_light.jpg");
    --keycloak-logo-height: auto;
    --keycloak-logo-width: 10em;
    --keycloak-logo-position: 1em 1em;
    --keycloak-logo-small-height: auto;
    --keycloak-logo-small-width: 8em;
    --keycloak-logo-small-position: 0.5em 0.5em;

    /* change top border of the login dialog box */
    --keycloak-card-top-color: var(--mgm-color-400);
}

:root:where(.pf-v5-theme-dark) {
    /* define default colors for mgm theme dark */
    --mgm-color-100: var(--pf-v5-global--palette--black-200);
    --mgm-color-400: var(--pf-v5-global--palette--black-100);

    --keycloak-bg-logo-url: url("../img/mgm-chroma_1920x1080_dark.jpg");
}

/* hide realm name on login page */
#kc-header {
    display: none;
}

/* replace blue focus box by a grey one */
:focus, :focus-visible {
    outline-color: var(--pf-v5-global--palette--black-400);
}

/* for Firefox outline style has to be set (not auto) to change the color */
@supports selector(:-moz-focusring) {
    :focus, :focus-visible {
        outline-style: solid;
        outline-width: 2px;
    }
}

/* disable tile movement on selection */
div.pf-v5-c-tile {
    --pf-v5-c-tile--m-selected--TranslateY: 0;
    --pf-v5-c-tile--after--TranslateY: -1px;
    background: transparent;
}

/* enlarge the focus outline around the token selection tile to not overlap with the tile border */
div.pf-v5-c-tile:focus, div.pf-v5-c-tile:focus-visible {
    outline-offset: 1px;
}

/* redefine background style to add mgm logo for three screen sizes */
.login-pf body {
    background-image: var(--keycloak-logo-url), var(--keycloak-bg-logo-url);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: var(--keycloak-logo-width) var(--keycloak-logo-height), cover;
    background-position: var(--keycloak-logo-position), center;
}

@media (max-width: 870px) {
    /* setup background an mgm logo for smaller screens */
    .login-pf body {
        background-size: calc(var(--keycloak-logo-small-width) * 0.5) var(--keycloak-logo-small-height), cover;
        background-position: var(--keycloak-logo-small-position), center;
    }
}

@media (max-width: 600px) {
    /* setup background an mgm logo for smaller screens */
    .login-pf body {
        background-image: var(--keycloak-bg-logo-url);
        background-size: cover;
        background-position: center;
    }
}