/* AMB skin on top of the keycloak.v3 account console (PatternFly 5). See docs/amb-theme/README.md. */

:root {
    --amb-green: #98bf00;
    --amb-green-light: #b2d52f;
    --amb-green-dark: #4f6400;
    --amb-on-green: #10140a;
    /* green that is readable as text on the page background */
    --amb-text-green: var(--amb-green-dark);
}

:root.pf-v5-theme-dark {
    --amb-text-green: var(--amb-green-light);
}

/* PatternFly sets its colours again for the dark theme, so both are named here */
:root,
:root.pf-v5-theme-dark {
    --pf-v5-global--primary-color--100: var(--amb-green);
    --pf-v5-global--primary-color--200: var(--amb-green-light);
    --pf-v5-global--primary-color--300: var(--amb-green);
    --pf-v5-global--primary-color--light-100: var(--amb-green-light);
    --pf-v5-global--primary-color--dark-100: var(--amb-green);
    --pf-v5-global--active-color--100: var(--amb-green);
    --pf-v5-global--active-color--300: var(--amb-green);
    --pf-v5-global--active-color--400: var(--amb-green-light);
    --pf-v5-global--link--Color: var(--amb-text-green);
    --pf-v5-global--link--Color--hover: var(--amb-text-green);
    --pf-v5-global--link--Color--light: var(--amb-green-light);
    --pf-v5-global--link--Color--light--hover: #fff;
}

/* dark text on the green buttons: white on this green is too faint */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--amb-green);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--amb-green-light);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--amb-green-light);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--amb-green-light);
    --pf-v5-c-button--m-primary--Color: var(--amb-on-green);
    --pf-v5-c-button--m-primary--hover--Color: var(--amb-on-green);
    --pf-v5-c-button--m-primary--focus--Color: var(--amb-on-green);
    --pf-v5-c-button--m-primary--active--Color: var(--amb-on-green);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--hover--Color: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--focus--Color: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--active--Color: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--amb-text-green);
    --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--amb-text-green);
}

.pf-v5-c-button.pf-m-link {
    --pf-v5-c-button--m-link--Color: var(--amb-text-green);
    --pf-v5-c-button--m-link--hover--Color: var(--amb-text-green);
}

.pf-v5-c-nav {
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--amb-green);
    --pf-v5-c-nav__link--hover--after--BorderColor: var(--amb-green);
}

.pf-v5-c-masthead .pf-v5-c-brand {
    height: 36px;
    width: auto;
}

/* The "Profile picture" page (resources/avatar/avatar.js) */

.amb-avatar {
    display: flex;
    flex-direction: column;
    gap: var(--pf-v5-global--spacer--lg);
    max-width: 640px;
}

.amb-avatar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pf-v5-global--spacer--xl);
}

.amb-avatar__picture {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--amb-green);
    background: var(--pf-v5-global--BackgroundColor--200);
}

.amb-avatar__picture--empty {
    border-style: dashed;
    border-color: var(--pf-v5-global--BorderColor--100);
}

.amb-avatar__side {
    display: flex;
    flex: 1 1 260px;
    flex-direction: column;
    gap: var(--pf-v5-global--spacer--md);
}

.amb-avatar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-v5-global--spacer--sm);
}

.amb-avatar__hint {
    color: var(--pf-v5-global--Color--200);
    font-size: var(--pf-v5-global--FontSize--sm);
}