// Temporary CSS rules as part of the migration to PF6. They are expected to
// change significantly, especially the token names, as the interface
// customization is refined.
@font-face {
  font-family: "SUSE Text";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/SUSE-VariableFont_wght.ttf");
}

@font-face {
  font-family: "SUSE Display";
  font-weight: 600;
  font-style: normal;
  src: local(""), url("./fonts/SUSE-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/NotoSans-VariableFont_wdth_wght.ttf");
}

@font-face {
  font-family: "Noto Sans SC";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansSC-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans SC Display";
  font-weight: 600;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansSC-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans JP";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansJP-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans JP Display";
  font-weight: 600;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansJP-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans KR";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansKR-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans KR Display";
  font-weight: 600;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansKR-VariableFont_wght.ttf");
}

@font-face {
  font-family: "Noto Sans Georgian";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansGeorgian-VariableFont_wdth_wght.ttf");
}

@font-face {
  font-family: "Noto Sans Georgian Display";
  font-weight: 600;
  font-style: normal;
  src: local(""), url("./fonts/NotoSansGeorgian-VariableFont_wdth_wght.ttf");
}

@font-face {
  font-family: "Roboto Mono";
  font-weight: 400;
  font-style: normal;
  src: local(""), url("./fonts/RobotoMono-VariableFont_wght.ttf");
}

:root {
  --agm-t--color--pine: #0c322c;
  --agm-t--color--pine--shade--100: #025937;
  --agm-t--color--jungle: #30ba78;
  --agm-t--color--jungle--hover: #c0efde;
  --agm-t--color--fog: #efefef;
  --agm-t--color--midnight: #192072;
  --agm-t--color--waterhole: #2453ff;

  --agm-t--action--background--color--hover: #eafaf4;

  --pf-t--global--background--color--secondary--default: var(--agm-t--color--fog);
  --pf-t--global--background--color--action--plain--hover: var(
    --agm-t--action--background--color--hover
  );
  --pf-t--global--background--color--action--plain--alt--hover: var(
    --agm-t--action--background--color--hover
  );
  --pf-t--global--background--color--action--plain--alt--clicked: var(--agm-t--color--jungle);

  --agm-t--install--button--background: var(--agm-t--color--pine);
  --agm-t--install--button--background--hover: var(--agm-t--color--pine--shade--100);
  --agm-t--install--button--color: var(--pf-t--color--white);

  --pf-t--global--color--brand--default: var(--agm-t--color--pine);
  --pf-t--global--color--brand--hover: var(--agm-t--color--pine--shade--100);
  --pf-t--global--font--family--100: "SUSE Text", "Noto Sans", verdana;
  --pf-t--global--font--family--200: "SUSE Display", "Noto Sans", verdana;
  --pf-t--global--font--family--300: "Roboto Mono", monospace;
  --pf-t--global--font--line-height--100: 1.3;
  --pf-t--global--font--line-height--200: 1.5;
  --pf-t--global--font--size--100: 0.875rem;
  --pf-t--global--font--size--200: 1em;
  --pf-t--global--font--size--300: 1.125rem;
  --pf-t--global--font--size--400: 1.25rem;
  --pf-t--global--font--size--500: 1.5rem;
  --pf-t--global--font--size--600: 1.75rem;
  --pf-t--global--font--size--700: 2rem;
  --pf-t--global--font--size--800: 2.25rem;
  --pf-t--global--font--weight--100: 100;
  --pf-t--global--font--weight--200: 600;
  --pf-t--global--font--weight--300: 700;
  --pf-t--global--font--weight--400: 800;
  --pf-t--global--color--status--warning--200: #fe7c3f;
  --pf-t--global--color--status--info--default: var(--agm-t--color--waterhole);
  --pf-t--global--icon--color--status--info--default: var(--agm-t--color--waterhole);
  --pf-t--global--breakpoint--lg: 64rem;
  --pf-t--global--font--size--body--sm: var(--pf-t--global--font--size--sm);
  --pf-t--global--background--color--disabled--default: #dcdbdc;
  --pf-t--global--border--radius--pill: var(--pf-t--global--border--radius--small);
  --pf-t--global--color--brand--clicked: var(--agm-t--color--pine);
}

/*
 * Use Noto font family for Cyrillic languages of countries with larger
 * populations based on data from
 * https://worldpopulationreview.com/country-rankings/countries-that-use-cyrillic
 */
:lang(ru), /* Russian */
:lang(uk), /* Ukrainian */
:lang(kk), /* Kazakh */
:lang(tg), /* Tajik */
:lang(be), /* Belarusian */
:lang(bg), /* Bulgarian */
:lang(sr-Cyrl) {
  /* Serbian (Cyrillic) */
  --pf-t--global--font--family--100: "Noto Sans", sans-serif;
  --pf-t--global--font--family--200: "Noto Sans", sans-serif;
}

/* Georgian */
:lang(ka) {
  --pf-t--global--font--family--100: "Noto Sans Georgian", sans-serif;
  --pf-t--global--font--family--200: "Noto Sans Georgian Display", sans-serif;
}

/* Chinese (Simplified) */
:lang(zh) {
  --pf-t--global--font--family--100: "Noto Sans SC";
  --pf-t--global--font--family--200: "Noto Sans SC Display", "Noto Sans SC", serif;
}

/* Japanese */
:lang(ja) {
  --pf-t--global--font--family--100: "Noto Sans JP", serif;
  --pf-t--global--font--family--200: "Noto Sans JP Display", "Noto Sans JP", serif;
}

/* Korean */
:lang(ko) {
  --pf-t--global--font--family--100: "Noto Sans KR", serif;
  --pf-t--global--font--family--200: "Noto Sans KR Display", "Noto Sans KR", serif;
}

strong {
  font-weight: var(--pf-t--global--font--weight--400);
}

// Temporary CSS rules written during migration to PFv6

// Reserve the sidebar space also for "lg" breakpoint
@media (width >= 64rem) {
  .pf-v6-c-page__main-container {
    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
  }

  .pf-v6-c-page.agm-full-layout {
    --pf-v6-c-page__sidebar--Width: 12rem; // var(--pf-v6-c-page__sidebar--xl--Width);
    grid-template-areas:
      "header  header"
      "sidebar main  ";
    grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
  }

  .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
    --pf-v6-c-page__main-container--GridArea: var(
      --pf-v6-c-page--masthead--main-container--GridArea
    );
  }
}

#productSelectionForm img {
  max-inline-size: 100px;
}

.agm-install-button {
  background: var(--agm-t--install--button--background);
  color: var(--agm-t--install--button--color);
  font-weight: 600;
  font-size: var(--pf-t--global--font--size--md);
  align-items: center;

  svg {
    fill: var(--agm-t--install--button--color);
  }

  &:hover {
    background: var(--agm-t--install--button--background--hover);
  }
}

.agm-inline-toggle {
  border-radius: 0;
  inline-size: fit-content;
  align-items: center;
  padding: var(--pf-t--global--spacer--control--vertical--compact);

  &:hover,
  &.pf-m-expanded {
    background: #c0efde; // var(--agm-t--action--background--color--hover);
    border-radius: var(--pf-t--global--border--radius--small);

    &::before {
      border-radius: var(--pf-t--global--border--radius--small);
    }
  }

  &::before {
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--pf-t--global--border--color--default);
  }

  &:focus-visible::before {
    color: red;
    border-bottom: 0;
  }
}

.agm-issues-drawer-body {
  padding: var(--pf-t--global--spacer--lg);

  h4 a {
    text-decoration: underline;
    font-weight: var(--pf-t--global--font--weight--400);
  }

  ul li.pf-m-info,
  ul li.pf-m-warning {
    --pf-v6-c-notification-drawer__list-item--before--BackgroundColor: none;
  }
}

#productSelectionForm {
  input[type="radio"] {
    align-self: center;
    flex-shrink: 0;
    inline-size: 20px;
    block-size: 20px;
  }

  .pf-v6-c-card {
    img {
      max-inline-size: 80px;
    }

    label {
      cursor: pointer;
    }

    label::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
  }
}

// PatternFly overrides

.pf-v6-c-masthead__main {
  inline-size: 50dvw;
}

.pf-v6-c-masthead__toggle button {
  --pf-v6-c-button--LineHeight: 0;

  svg {
    font-size: var(--pf-t--global--font--size--xl);
  }
}

.pf-v6-c-masthead {
  --pf-v6-c-masthead__logo--Width: fit-content;
  --pf-v6-c-masthead--PaddingBlock: var(--pf-t--global--spacer--sm);

  h1 {
    font-size: clamp(1.1rem, 0rem + 1.6vw, 1.75rem);
  }
}

.pf-v6-c-page__main-section {
  --pf-v6-c-page__main-section--PaddingInlineStart: var(--pf-t--global--spacer--md);
  --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--md);
}

.pf-v6-c-page__main-section.pf-m-sticky-top {
  --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
}

.pf-v6-c-page__main-group.pf-m-sticky-bottom {
  --pf-v6-c-page--section--m-sticky-bottom--BoxShadow: var(--pf-t--global--box-shadow--md--top);
}

// .pf-v6-c-page__sidebar-body .pf-v6-c-nav:first-child {
//   --pf-v6-c-nav--PaddingBlockStart: 0;
// }

:not(.pf-v6-c-alert-group__item) > .pf-v6-c-alert {
  --pf-v6-c-alert--m-info__title--Color: var(--agm-t--color--waterhole);
  --pf-v6-c-alert__icon--FontSize: var(--pf-t--global--font--size--md);
  --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--xs);
  // --pf-v6-c-alert--BoxShadow: var(--pf-t--global--box-shadow--sm);
  --pf-v6-c-alert--BoxShadow: none;
  --pf-v6-c-alert--PaddingBlockStart: var(--pf-t--global--spacer--sm);
  --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
  --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
  --pf-v6-c-alert--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  border-width: 0;
  border-radius: 0;
  border-inline-start-width: var(--pf-t--global--border--width--box--status--default);

  &:has(.pf-v6-c-alert__description) {
    row-gap: var(--pf-t--global--spacer--xs);
  }

  $pf-alert-modifiers: "custom", "info", "success", "warning", "danger";

  @each $modifier in $pf-alert-modifiers {
    &.pf-m-#{$modifier} {
      background: linear-gradient(
        to right in srgb,
        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 94%),
        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 96%),
        color-mix(in srgb, var(--pf-v6-c-alert--m-#{$modifier}--BorderColor), transparent 98%),
        transparent
      );
    }
  }

  &.pf-m-plain {
    border: 0;
    background: none;
  }
}

.pf-v6-c-alert-group.pf-m-toast {
  padding: var(--pf-t--global--spacer--xl);
}

.pf-v6-c-alert__title {
  font-size: var(--pf-t--global--font--size--md);
}

.pf-v6-c-menu {
  --pf-v6-c-menu--BoxShadow: var(--pf-t--global--box-shadow--lg);
  // background: #eafaf8;
}

.pf-v6-c-menu__item.pf-m-selected {
  --pf-v6-c-menu__item-select-icon--Color: var(--agm-t--color--jungle);
}

.pf-v6-c-nav__link {
  --pf-v6-c-nav__link--AlignItems: center;
  padding-inline-start: var(--pf-t--global--spacer--sm);
  padding-inline-end: var(--pf-t--global--spacer--sm);

  svg {
    font-size: var(--pf-t--global--font--size--lg);
  }
}

.pf-v6-c-nav__link.pf-m-current {
  font-weight: 600;
}

.pf-v6-c-button {
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--small);

  &:disabled {
    fill: currentcolor;
  }
}

.pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
  text-decoration: none;
  color: inherit;
}

label.pf-m-disabled + .pf-v6-c-check__description {
  color: var(--pf-v6-c-check__label--disabled--Color);
}

.pf-v6-c-menu__list-item.pf-m-danger.pf-m-disabled {
  --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__item--m-disabled--Color);
}

// Do not change the default cursor for labels forms because it is confusing
//
// See:
//  * https://github.com/openSUSE/Agama/issues/115#issuecomment-1090205696
//  * https://github.com/patternfly/patternfly/issues/4777#issuecomment-1092090484
.pf-v6-c-form__label {
  --pf-v6-c-form__label--hover--Cursor: default;
  --pf-v6-c-form__label--m-disabled--hover--Cursor: default;
}

.pf-v6-c-form {
  --pf-v6-c-form__group--m-action--MarginBlockStart: var(--pf-t--global--spacer--md);
}

.pf-v6-c-list.pf-m-inline {
  --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--sm);
  --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--md);
}

.pf-v6-c-form__group {
  justify-self: flex-start;
}

// Fix select toggle icon visibility by creating more space at the end :/
.pf-v6-c-form-control > select {
  --pf-v6-c-form-control--PaddingInlineEnd: calc(
    var(--pf-v6-c-form-control__select--PaddingInlineEnd) * 3
  );
}

.pf-v6-c-check {
  row-gap: var(--pf-t--global--spacer--xs);
  align-content: baseline;

  input[type="checkbox"] {
    align-self: center;
  }
}

.pf-v6-c-list.pf-m-inline {
  --pf-v6-c-list--m-inline--RowGap: var(--pf-t--global--spacer--sm);
  --pf-v6-c-list--m-inline--ColumnGap: var(--pf-t--global--spacer--md);
}

.pf-v6-c-data-list li.pf-m-clickable {
  --pf-v6-c-data-list__item--hover--BackgroundColor: var(--agm-t--action--background--color--hover);
}

.pf-v6-c-modal-box {
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--xs);
}

// Nested content inside forms should respect parent grid gap
.pf-v6-c-form [class*="pf-v6-u-mx"] {
  display: grid;
  gap: inherit;
}

.pf-v6-c-skip-to-content {
  --pf-v6-c-skip-to-content--focus--InsetInlineStart: var(
    --pf-t--global--spacer--inset--page-chrome
  );

  a.pf-m-primary {
    background: var(--agm-t--color--waterhole);
    font-size: var(--pf-t--global--font--size--md);
  }
}

.pf-v6-c-table__sort-indicator {
  --pf-v6-c-table__sort-indicator--MarginInlineStart: var(--pf-t--global--spacer--xs);
}

// Some utilities not found at PF
.w-14ch {
  inline-size: 14ch;
}

div[aria-live]:empty {
  display: none;
}

pre {
  white-space: pre-line;
}

input[type="checkbox"] {
  inline-size: var(--pf-t--global--font--size--md);
  block-size: var(--pf-t--global--font--size--md);
}

// Custom style for :focus-visible appearance
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--agm-t--color--waterhole);
  outline-offset: 3px;
}

.agm-strong-icon {
  font-size: 1.6rem;
  vertical-align: middle;
}

// FIXME: make ir more generic, if possible, or even without CSS but not
// rendering such a label if "storage instructions" are more than one
.storage-structure:has(> li:nth-child(2)) span.action-text {
  display: none;
}

.agm-backdrop-gray-and-blur {
  background-color: rgb(0 0 0 / 30%);
  backdrop-filter: grayscale(100%) blur(4px);
}
