/* This file was adapted by XiTrust - Changes are CSS variables and at the Bottom of this File */

/* whole page */

@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
}

:root {
    --main-color-light: #D0E096;
    --main-color: #97BE0D;
    --main-color-dark: #668009;
    --error-color: #B95437;
    --text-color: #515151;
    --button-text-color: #FFF;
    --divider-color: #D1D1D1;
    --form-outline-color: #D1D1D1;
    --font-family: "Public Sans";
    --background-image: url("../img/moxis-keycloak-login.png");
    --xitrust-logo: url("../img/default-moxis-logo.svg");
    --xitrust-darkmode-logo: url("../img/default-dark-moxis-logo.svg");

    /* OVERRIDE OF KC26 DEFAULT FONT-FAMILY ---- */
    /* otherwise it won't use our custom font-family */
    /* NO NEED TO CHANGE ANYTHING (WILL TAKE THE GIVEN CUSTOM FONT-FAMILY) */
    --pf-v5-global--FontFamily--text: var(--font-family), "Arial", sans-serif;
    --pf-v5-global--FontFamily--heading: var(--font-family), "Arial", sans-serif;
    --pf-v5-global--FontFamily--monospace: var(--font-family), "Arial", sans-serif;
    --pf-v5-global--FontFamily--text--vf: var(--font-family), "Arial", sans-serif;
    --pf-v5-global--FontFamily--heading--vf: var(--font-family), "Arial", sans-serif;
    --pf-v5-global--FontFamily--monospace--vf: var(--font-family), "Arial", sans-serif;
}

body {
    font-family: var(--font-family), "Arial", sans-serif !important;
}

input {
    accent-color: var(--main-color);

    &:hover {
        accent-color: var(--main-color-dark);
    }
}

/* background */

#keycloak-bg {
    background: var(--background-image) no-repeat center right fixed;
    background-size: cover;
    height: 100%;
}

/* main container */

.xitrust-login-container-wrapper {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-areas: ". main .";

    .xitrust-login-container {
        border-radius: 8px;
        width: 800px;
        max-width: calc(100% - 20px);
        margin: auto;
    }
}

/* link */

.xitrust-link {
    color: var(--main-color);

    &:hover {
        color: var(--main-color-dark);
    }
}

/* header */

.xitrust-main-header {
    padding: 5% 5% 6.5%;
    grid-template-columns: 1fr 1fr 1fr;

    .pf-v5-c-login__main-header-utilities {
        grid-column: 3 / 3;
        width: 50%;
        justify-self: end;

        .pf-v5-c-form-control__toggle-icon {
            padding-left: 0;
            padding-right: 0;
        }
    }
}

.xitrust-logo-wrapper {
    grid-column: 2 / 3;
    max-height: 100px;
    margin: auto;
    content: var(--xitrust-logo);
    @media (prefers-color-scheme: dark) {
        content: var(--xitrust-darkmode-logo);
    }
}

.xitrust-language-select {
    width: 70% !important;
}

.xitrust-main-title {
    text-align: center;
    margin-bottom: 5%;
    font-size: 18px !important;
    font-weight: bold !important;
}

/* styled primary button */

.xitrust-primary-button, .xitrust-primary-link-button {
    border-radius: 8px;
    border: 1px solid var(--main-color);
    width: 30% !important;
    font-size: 1em;
    font-weight: normal;
    text-transform: none;
    background-image: linear-gradient(45deg, var(--main-color) 0%, var(--main-color-dark) 100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--button-text-color);

    &.pf-v5-c-button {
        width: fit-content !important;
        padding: 10px;
    }

    &:hover {
        text-decoration: none;
        background-position: right center;
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
        transform: translateY(-2px);
        color: var(--button-text-color) !important;
    }

    &:active {
        box-shadow: none;
        transform: translateY(0);
    }
}

/* back/cancel button */

.xitrust-back-button {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--text-color);
    background-color: transparent !important;
    color: var(--text-color) !important;
    font-size: 1em;
    font-weight: normal;
    text-transform: none;

    &:after {
        display: none;
    }
}

/* styled saml list + buttons; styled link button to look like a primary button */

.xitrust-saml-list-wrapper {
    padding-bottom: 0;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.xitrust-saml-list {
    margin: 3.5% 0;
}

.xitrust-saml-button {
    padding: 10px;
    background-image: linear-gradient(45deg, var(--main-color) 0%, var(--main-color-dark) 100%) !important;
    background-size: 200% auto;
    color: var(--button-text-color);
    border: 1px solid var(--main-color);
    box-shadow: rgba(0, 0, 0, .1) 0 2px 4px 0;
    border-radius: 8px;
    font-size: 1em;
    touch-action: manipulation;
    transform: translateY(0);
    transition: all 300ms cubic-bezier(.23, 1, 0.32, 1);
    will-change: transform;
    margin-top: 5px !important;

    &:hover {
        text-decoration: none;
        background-position: right center;
        box-shadow: rgba(0, 0, 0, 0.25) 0 8px 15px;
        transform: translateY(-2px);
        color: var(--button-text-color) !important;
    }

    &:active {
        box-shadow: none;
        transform: translateY(0);
    }

}

/* divider */

.xitrust-login-divider {
    margin: 25px auto;
    border: 1px solid var(--divider-color);
    width: 85%;
}

/* form inputs */

.xitrust-form-input {
    border: 1px solid var(--form-outline-color) !important;
    border-radius: 8px;
    outline: none;

    &:hover {
        border-color: var(--main-color-dark) !important;
    }

    &:focus, &:active {
        border-color: var(--main-color-dark) !important;
        box-shadow: inset 0 0 1px var(--main-color-dark), 0 0 8px var(--main-color-dark) !important;
    }
}

.xitrust-form-hide-border {
    &:before, &:after {
        display: none;
    }
}

.xitrust-toggle-pw-button {
    border: 1px solid var(--form-outline-color);
    border-radius: 8px;
    margin-left: 5%;
}

/* footer */

.xitrust-footer {
    text-align: right;
    margin-top: 5%;
    margin-bottom: -5%;
}

/* action group buttons (forgot pw form) */

.xitrust-action-group-class {
    justify-content: space-between;
    margin-bottom: 2.5%;
}

/* pw policy info text */

.xitrust-password-policy {
    margin: 2.5% 0;
    text-wrap: balance;
}