/* Adapted from jarvis colors.css */
* {
    --color-*: initial;

    --color-white: var(--white);
    --color-black: var(--black);

    --color-cool-green-40: var(--cool-green-40);
    --color-cool-green-50: var(--cool-green-50);
    --color-cool-green-60: var(--cool-green-60);

    --color-cool-gray-10: var(--cool-gray-10);
    --color-cool-gray-20: var(--cool-gray-20);
    --color-cool-gray-30: var(--cool-gray-30);
    --color-cool-gray-40: var(--cool-gray-40);
    --color-cool-gray-50: var(--cool-gray-50);
    --color-cool-gray-60: var(--cool-gray-60);
    --color-cool-gray-70: var(--cool-gray-70);
    --color-cool-gray-80: var(--cool-gray-80);
    --color-cool-gray-90: var(--cool-gray-90);
    --color-cool-gray-100: var(--cool-gray-100);

    --color-surface-1: var(--system-colors-surface-01);
    --color-surface-2: var(--system-colors-surface-02);
    --color-surface-3: var(--system-colors-surface-03);
    --color-surface-4: var(--system-colors-surface-04);
    --color-surface-primary: var(--system-colors-surface-primary);
    --color-surface-hover: var(--system-colors-surface-hover);
    --color-surface-selected: var(--system-colors-surface-selected);

    --color-always-light: var(--system-colors-text-icon-colors-always-light);

    --color-subtle: var(--system-colors-text-icon-colors-subtle);
    --color-stroke: var(--system-colors-stroke-default);
    --color-error: var(--system-colors-text-icon-colors-error);
    --color-success: var(--system-colors-text-icon-colors-success);
    --color-hover: var(--system-colors-text-icon-colors-hover);
    --color-border-default: var(--system-colors-border-default);
    --color-text-primary: var(--system-colors-text-icon-colors-primary);
    --color-text-secondary: var(--system-colors-text-icon-colors-secondary);
    --color-high-contrast: var(--system-colors-surface-high-contrast);

    --border-default: var(--system-colors-border-default);
}

/* Adapted from jarvis radius.css */
* {
    --radius-s: var(--border-radius-default);
    --radius-large: var(--border-radius-l);
    --radius-xl: var(--border-radius-xl);
}

/* Adapted from jarvis spacing.css */
* {
    --shadow-box: var(--box-shadow);

    --spacing-xxl: var(--space-xxl);
    --spacing-xl: var(--space-xl);
    --spacing-l: var(--space-l);
    --spacing-m: var(--space-medium);
    --spacing-base: var(--space-base);
    --spacing-s: var(--space-s);
    --spacing-xs: var(--space-xs);
    --spacing-xxs: var(--space-xxs);
}

/* Adapted from jarvis typography.css */
* {
    --font-sans: var(--font-family-sans);
    --font-icons: 'onedata-icons';
    --text-sm: var(--font-size-small);
    --text-base: var(--font-size-base);
    --text-xl: var(--font-size-h5);
    --text-2xl: var(--font-size-h4);
    --text-3xl: var(--font-size-h3);
    --text-4xl: var(--font-size-h2);
    --text-5xl: var(--font-size-h1);
}

/* Apply jarvis colors to patternfly */
* {
    --pf-global--primary-color--200: var(--system-colors-text-icon-colors-always-light);
    --pf-global--primary-color--100: var(--system-colors-text-icon-colors-always-light);
    --pf-global--primary-color--dark-100: var(--system-colors-text-icon-colors-always-light);
    --pf-c-button--m-primary--BackgroundColor: var(--system-colors-surface-primary);
    --pf-c-button--m-primary--Color: var(--system-colors-text-icon-colors-always-light);

    --pf-global--icon--FontSize--sm: var(--text-sm);
    --pf-global--icon--FontSize--md: var(--text-base);
    --pf-global--icon--FontSize--lg: var(--text-xl);
    --pf-global--icon--FontSize--xl: var(--text-2xl);
    --pf-global--FontFamily--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--heading--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--monospace: var(--font-family-sans);
    --pf-global--FontFamily--redhat-updated--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--redhat-updated--heading--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--redhat--monospace: var(--font-family-sans);
    --pf-global--FontFamily--redhatVF--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--redhatVF--heading--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--redhatVF--monospace: var(--font-family-sans);
    --pf-global--FontFamily--overpass--sans-serif: var(--font-family-sans);
    --pf-global--FontFamily--overpass--monospace: var(--font-family-sans);
    --pf-global--FontSize--4xl: var(--text-4xl);
    --pf-global--FontSize--3xl: var(--text-3xl);
    --pf-global--FontSize--2xl: var(--text-2xl);
    --pf-global--FontSize--lg: var(--text-xl);
    --pf-global--FontSize--xl: var(--text-2xl);
    --pf-global--FontSize--md: var(--text-base);
    --pf-global--FontSize--sm: var(--text-sm);
    --pf-global--FontSize--xs: var(--text-sm);
    --pf-global--FontWeight--light: 300;
    --pf-global--FontWeight--normal: 400;
    --pf-global--FontWeight--semi-bold: 700;
    --pf-global--FontWeight--overpass--semi-bold: 500;
    --pf-global--FontWeight--bold: 700;
    --pf-global--FontWeight--overpass--bold: 600;

    font-family: "Jarvis-Protipo", Helvetica, Arial, sans-serif;
}

/* Main background */
.login-pf body {
    background: var(--color-surface-2);
    height: 100%;
}

/* Phone */
@media (max-width: 767px) {
    .login-pf-page .card-pf {
        max-width: calc(100% - 32px);
        margin-left: 16px;
        margin-right: 16px;

        box-shadow: var(--box-shadow);
        border-top: 4px solid;
        border-color: var(--color-surface-primary);
    }

    .logo-container {
        margin-left: 116px !important;
    }

    #kc-page-title {
        font-size: var(--font-size-h3);
        font-weight: 400 !important;
    }
}

/* Hovering login card with main form */
.card-pf {
    padding: var(--space-base) var(--space-l) var(--space-l) var(--space-l) !important;
    border-radius: var(--radius-large);
    border-color: var(--color-surface-primary);
    margin: 0 auto;
    box-shadow: var(--box-shadow);
    max-width: 500px;
    background-color: white;
    width: 500px;
    font-size: var(--font-size-base);
}

/* Hide default title text */
div#kc-header-wrapper {
    display: none;
}

#kc-page-title {
    font-size: var(--font-size-h3);
    font-weight: 400;
}

/* Custom logo container should be centered above card */
.logo-container {
    padding: var(--spacing-xl) 0 0 8px !important;
    border-radius: var(--radius-large);
    border-color: transparent;
    max-width: 300px;
    width: fit-content;
    height: fit-content;
    font-size: var(--font-size-base);
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Fix missing margin for alerts */
.alert-warning {
    margin-bottom: var(--space-medium);
}

span.kc-feedback-text {
    align-content: center;
}

/* Links */
a {
    color: var(--color-text-primary);
    text-decoration: underline;

    &:hover{
        color: var(--color-text-primary) !important;
    }
}

/* Adapted from OdLabel.vue */
label {
    color: var(--color-text-primary);
    font-size: var(--font-size-small);
    font-family: var(--font-family-sans), sans-serif;

    &.disabled {
        color: var(--system-colors-text-icon-colors-disabled);
    }
}

/* Adapted from OdTextField.scss */
input[type="text"], input[type="password"] {
    display: flex;
    align-items: center;
    position: relative;
    border: var(--system-colors-border-default) 1px solid;
    border-radius: var(--radius-s);
    background: var(--system-colors-surface-01);
    height: 40px;
    cursor: text;
    padding: 8px;

    &:hover:not(:focus-within):not(.disabled):not(.error):not(.success) {
        border-color: var(--system-colors-border-hover);
    }

    &:focus-within:not(.error):not(.success) {
        border-color: var(--system-colors-border-selected);
        outline: none;
    }

    &:focus:focus-visible {
        border-color: var(--system-colors-border-default);
        outline: 1px solid var(--system-colors-outline-focussed);
        outline-offset: 1px;
        border-bottom: solid 1px
    }

    &:not(:hover):not(:focus):not(:focus-visible):not(:focus-within) {
        .clear-button, .mask-button {
            visibility: hidden;
        }
    }
}

/* Adapted from OdButton.scss */
.pf-c-button {
    font-size: var(--font-size-base);
    min-width: 7rem;
    padding: 0 1.5rem;
    height: 2.5rem;
    border-radius: var(--radius-large);
    font-weight: 400;
    font-family: var(--font-family-sans), sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    margin-top: 0.5rem;

    text-decoration: none;

    &[disabled] {
        background: var(--color-surface-2);
        pointer-events: none;
        &:active {
            background: var(--color-surface-2);
            color: var(--color-surface-2);
        }
    }

    &:hover {
        border-color: var(--system-colors-border-hover);
        color: var(--system-colors-text-icon-colors-hover);
        i {
            color: var(--system-colors-text-icon-colors-hover);
        }
    }
    &:active {
        color: var(--system-colors-text-icon-colors-selected);
        border-color: var(--system-colors-border-selected);
        i {
            color: var(--system-colors-text-icon-colors-selected);
        }
    }

    &:focus-visible {
        box-shadow:
                0 0 0 1px var(--color-surface-1),
                0 0 0 2px var(--system-colors-outline-focussed);
        outline: none;
    }

    &:focus:active {
        box-shadow: none;
    }
}

.pf-c-button.btn-default {
    border: 1px solid;
    border-color: var(--system-colors-surface-high-contrast);
    background: transparent;
    color: var(--color-text-primary);

    &[disabled] {
        color: var(--system-colors-text-icon-colors-disabled);
        border-color: var(--system-colors-border-disabled);

        i {
            color: var(--system-colors-text-icon-colors-disabled);
        }
    }
}

.pf-c-button.pf-m-primary {
    background: var(--system-colors-surface-primary);
    color: var(--system-colors-text-icon-colors-always-light);

    i {
        color: var(--system-colors-text-icon-colors-always-light);
    }

    &:hover {
        background: var(--system-colors-surface-primary-hover);
        i {
            background: var(--system-colors-surface-primary-hover);
        }
    }
    &:active {
        background: var(--system-colors-surface-primary-pressed);
        i {
            background: var(--system-colors-surface-primary-pressed);
        }
    }

    &:focus-visible {
        box-shadow:
                0 0 0 1px var(--color-surface-1),
                0 0 0 2px var(--system-colors-outline-focussed);
        outline: none;
    }

    &:focus:active {
        box-shadow: none;
    }

    &[disabled] {
        background: var(--color-surface-2);
        color: var(--system-colors-text-icon-colors-disabled);

        i {
            color: var(--system-colors-text-icon-colors-disabled);
        }
    }
}

/* Special theming for custom password-wrapper on login form  (otherwise the absolute button is outside of the form) */
.password-wrapper {
    position: relative;
    width: 100%;

    button[data-password-toggle] {
        right: 0 !important;
    }
}

/* Special theming for show password button on login and reset forms */
button[data-password-toggle] {
    position: absolute;

    /* Override PatternFly button border variables */
    --pf-c-button--after--BorderColor: transparent !important;

    border: none !important;
    background: none !important;

    top: -0.5rem;
    right: 1.5rem;

    width: 2.5rem; !important;
    min-width: 2.5rem; !important;

    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 1000 !important;  /* Ensure above input even if input is active */
    pointer-events: auto !important;  /* Ensure clickable */
}

/* Font icons */
.od-icon {
    font-size: var(--text-3xl);

    /* Webkit tweaks. Otherwise the icon appears very thick. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-stroke-width: 0.001em;
}

/* Links to external IdPs should have same styling as buttons*/
a[data-once-link][class*="kc-social"],
.kc-social-item {
    /* Override PatternFly button border variables */
    --pf-c-button--after--BorderColor: transparent !important;

    font-size: var(--font-size-base);
    min-width: 7rem;
    padding: 0 1.5rem;
    height: 2.5rem;
    font-weight: 400;
    font-family: var(--font-family-sans), sans-serif;
    display: flex;
    flex-direction: row;
    cursor: pointer;
    text-transform: uppercase;

    text-decoration: none;

    border: 1px solid;
    background: transparent;
    color: var(--color-text-primary);

    margin-top: 0;

    i {
        margin-right: auto;
    }

    span {
        flex: 1;
        text-align: center;
    }


    &[disabled] {
        color: var(--system-colors-text-icon-colors-disabled);
        border-color: var(--system-colors-border-disabled);

        i, span {
            color: var(--system-colors-text-icon-colors-disabled);
        }
    }

    &:hover {
        border-color: var(--system-colors-border-hover);
        color: var(--system-colors-text-icon-colors-hover);
        i, span {
            color: var(--system-colors-text-icon-colors-hover);
        }
    }
    &:active {
        color: var(--system-colors-text-icon-colors-selected);
        border-color: var(--system-colors-border-selected);
        i, span {
            color: var(--system-colors-text-icon-colors-selected);
        }
    }

    &:focus-visible {
        box-shadow:
                0 0 0 1px var(--color-surface-1),
                0 0 0 2px var(--system-colors-outline-focussed);
        outline: none;
    }

    &:focus:active {
        box-shadow: none;
    }
}

/* Locale selection */
#kc-locale {
    margin-top: 20px;
    font-size: var(--font-size-small);

    & ul li a {
        text-decoration: none;
    }
}

/* Single clean error style without icons */
input[aria-invalid="true"],
.pf-c-form-control[aria-invalid="true"] {
    background-image: none;
    border: 1px solid;
    border-color: var(--system-colors-border-error) !important;
}

/* Override Chrome / WebKit autofill background */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: currentColor !important; /* Maintain text color */
    transition: background-color 5000s ease-in-out 0s !important;
}

/* Override Firefox autofill (yellow) */
input:-moz-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    -moz-text-fill-color: currentColor !important;
}

/* Override Safari autofill */
input:-webkit-autofill {
    background-clip: padding-box !important;
}