/* Maps PatternFly v5 global variables to the FSM design tokens. Shared by the
   admin (keycloak.v2) and account (keycloak.v3) consoles, which are both built
   on PatternFly v5. Theme-specific overrides live in each theme's css/styles.css. */
@import url('./variables.css');
@import url('./global.css');
@import url('./font-faces.css');

:root {
  --pf-v5-global--FontFamily--sans-serif: var(--fsm-text-font-family);
  --pf-v5-global--FontFamily--text: var(--fsm-text-font-family);
  --pf-v5-global--FontFamily--heading: var(--fsm-heading-font-family);
  --pf-v5-global--FontFamily--monospace: var(--fsm-code-font-family);

  --pf-v5-c-toolbar--BackgroundColor: var(--fsm-color-surface-default);
  --pf-v5-global--BackgroundColor--light-100: var(--fsm-color-surface-default);
  --pf-v5-global--BackgroundColor--light-200: var(--fsm-color-surface-default);
  --pf-v5-global--BackgroundColor--light-300: var(--fsm-color-surface-default);
  --pf-v5-global--BackgroundColor--light-400: var(--fsm-color-surface-default);
  --pf-v5-global--BackgroundColor--100: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--200: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--300: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--400: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--palette--black-1000: var(--fsm-color-surface-subtle-default);
  --pf-v5-c-page__sidebar--BackgroundColor: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--dark-100: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--dark-200: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--dark-300: var(--fsm-color-surface-subtle-default);
  --pf-v5-global--BackgroundColor--dark-400: var(--fsm-color-surface-subtle-default);

  --pf-v5-c-form-control--Color: var(--fsm-color-text-default);
  --pf-v5-global--Color--100: var(--fsm-color-text-default);
  --pf-v5-global--Color--200: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--300: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--400: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--dark-100: var(--fsm-color-text-default);
  --pf-v5-global--Color--dark-200: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--dark-300: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--dark-400: var(--fsm-color-text-subtle-default);
  /* The Keycloak theme used as the basis employs the "global--Color--light"
  variables for text in the header and sidebar on a dark background. Therefore,
  these variables are overridden with dark text colors for the light backgrounds
  in this theme. */
  --pf-v5-global--Color--light-100: var(--fsm-color-text-default);
  --pf-v5-global--Color--light-200: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--light-300: var(--fsm-color-text-subtle-default);
  --pf-v5-global--Color--light-400: var(--fsm-color-text-subtle-default);

  --pf-v5-global--primary-color--100: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--200: var(--fsm-color-fill-interactive-hover);
  --pf-v5-global--active-color--100: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--dark-100: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--dark-200: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--dark-300: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--dark-400: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--light-100: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--light-200: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--light-300: var(--fsm-color-fill-interactive-default);
  --pf-v5-global--primary-color--light-400: var(--fsm-color-fill-interactive-default);

  --pf-v5-global--link--Color: var(--fsm-color-text-interactive-default);
  --pf-v5-global--link--Color--hover: var(--fsm-color-text-interactive-hover);
  --pf-v5-global--link--Color--light: var(--fsm-color-text-interactive-default);
}

.pf-v5-c-nav__list .pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--fsm-color-text-subtle-default);

  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--fsm-color-surface-subtle-default);
  --pf-v5-c-nav__link--m-current--Color: var(--fsm-color-text-interactive-default);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--fsm-color-border-interactive-default);

  --pf-v5-c-nav__link--hover--BackgroundColor: var(--fsm-color-surface-hover);
  --pf-v5-c-nav__link--hover--Color: var(--fsm-color-text-interactive-hover);
}

.pf-v5-c-nav__link {
  color: var(--fsm-color-text-interactive-default);
}

.pf-v5-c-nav__link:hover {
  color: var(--fsm-color-text-interactive-hover);
}

.pf-v5-c-data-list__item.pf-m-expanded::before {
  background-color: var(--fsm-color-border-interactive-default);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--fsm-color-fill-interactive-default);
  --pf-v5-c-button--m-primary--Color: var(--fsm-color-text-inverse-default);

  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--fsm-color-fill-interactive-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--fsm-color-text-inverse-hover);

  &:focus {
    color: var(--fsm-color-text-inverse-default);
  }
}

#app {
  color: var(--fsm-color-text-default);
}

.pf-v5-c-form__label-text,
.pf-v5-c-nav__link {
  font-size: var(--fsm-text-medium-font-size);
}

.pf-v5-c-form__label-text {
  color: var(--fsm-color-heading-default);
}

.pf-v5-c-masthead {
  border-bottom: 1px solid var(--fsm-color-border-default);
  padding: var(--fsm-spacing-3) var(--fsm-spacing-7);
  min-height: 56px;
  --pf-v5-c-masthead--BackgroundColor: var(--fsm-color-surface-subtle-default);
}

.pf-v5-c-masthead__content {
  min-height: unset;
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
  padding: 0;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
  flex-wrap: nowrap;
  align-items: center;
  column-gap: var(--fsm-spacing-3);
}

.pf-v5-c-masthead .pf-v5-c-toolbar__item {
  min-width: 0;
}

.pf-v5-c-masthead a[data-testid='referrer-link'] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-v5-c-masthead .pf-v5-c-toolbar__item:has(a[data-testid='referrer-link']) {
  overflow: hidden;
}

.pf-v5-c-masthead__brand img {
  width: 9.375rem;
  height: 2.125rem;
}

.pf-v5-c-masthead__toggle {
  margin-inline-start: 0;
  margin-right: var(--fsm-spacing-7);
}

.pf-v5-c-masthead__toggle .pf-v5-c-button#nav-toggle {
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--fsm-color-icon-default);

  svg {
    width: 28px;
    height: 28px;
    background-color: var(--fsm-color-icon-default);
    -webkit-mask-image: url('../img/menu-icon.svg');
    mask-image: url('../img/menu-icon.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color 0.15s ease;
  }

  &:hover,
  &:focus-visible {
    color: var(--fsm-color-icon-interactive-hover);
    svg {
      background-color: var(--fsm-color-icon-interactive-hover);
    }
  }
}

.pf-v5-c-form-control,
.pf-v5-c-form-control > :is(input, select, textarea) {
  border-radius: var(--fsm-border-radius-medium);
  &:before,
  &:after {
    border-radius: var(--fsm-border-radius-medium);
  }
}

.pf-v5-c-form__actions,
.pf-v5-c-modal-box__footer {
  flex-direction: row-reverse;
}

@media (max-width: 767px) {
  .pf-v5-c-masthead {
    padding: var(--fsm-spacing-3) var(--fsm-spacing-5);
  }
  .pf-v5-c-masthead__content {
    grid-column: 1 / 3;
    margin-top: var(--fsm-spacing-2);
  }
  .pf-v5-c-masthead a[data-testid='referrer-link'] {
    font-size: var(--fsm-text-small-font-size);
  }
}

.pf-v5-c-form__group.pf-m-action {
  right: 0;
}