@use "@patternfly/patternfly/base/patternfly-themes.scss";
@use "@patternfly/patternfly/patternfly-theme-dark.scss";
@use "./patternfly/patternfly-5-overrides.scss";
@import "global-variables";

/* Globally resize headings */
h1 {
  --ct-heading-font-size: var(--pf-v5-global--FontSize--4xl);
}

h2 {
  --ct-heading-font-size: var(--pf-v5-global--FontSize--3xl);
}

h3 {
  --ct-heading-font-size: var(--pf-v5-global--FontSize--2xl);
}

h4 {
  --ct-heading-font-size: var(--pf-v5-global--FontSize--lg);
}

// Only apply a custom font size when a heading does NOT have a PF4 class
h1, h2, h3, h4 {
  &:not([class*="pf-"]):not([data-pf-content="true"]) {
    font-size: var(--ct-heading-font-size);
  }
}

/* End of headings resize */

a {
  cursor: pointer;
}

.disabled {
  pointer-events: auto;
}

.btn {
  min-block-size: 26px;
  min-inline-size: 26px;
}

.btn.disabled, .pf-v5-c-button.disabled {
  pointer-events: auto;
}

.btn.disabled:hover, .pf-v5-c-button.disabled:hover {
  z-index: auto;
}

.btn-group {
  /* Fix button groups from wrapping in narrow widths */
  display: inline-flex;
}

a.disabled {
  cursor: not-allowed !important;
  text-decoration: none;
  pointer-events: none;
  color: #8b8d8f;
}

a.disabled:hover {
  text-decoration: none;
}

.highlight-ct {
  background-color: var(--ct-color-link-hover-bg);
}

.curtains-ct {
  inline-size: 100%;
}

/* Animation of new items */
.ct-new-item {
  animation: ctNewRow 4s ease-in;
}

:root {
  --ct-animation-new-background: #fdf4dd;
}

.pf-v5-theme-dark {
  --ct-animation-new-background: #353428;
}

/* Animation background is instantly yellow and fades out halfway through */
@keyframes ctNewRow {
  0% {
    background-color: var(--ct-animation-new-background);
  }

  50% {
    background-color: var(--ct-animation-new-background);
  }
}

/* Dialog patterns */

.dialog-wait-ct {
  /* Right align footer idle messages after the buttons */
  margin-inline-start: auto;
  display: flex;
  column-gap: var(--pf-v5-global--spacer--sm);
  align-items: center;
}

:root {
  /* Cockpit custom colors */
  --ct-color-light-red: #f8cccc;
  --ct-color-red-hat-red : #e00;

  // Blend between --pf-v5-global--palette--black-200 and 300
  --ct-global--palette--black-250: #e6e6e6;

  /* Semantic colors */
  --ct-color-fg: var(--pf-v5-global--color--100);
  --ct-color-bg: var(--pf-v5-global--BackgroundColor--100);
  --ct-color-text: var(--ct-color-fg);

  --ct-color-link        : var(--pf-v5-global--active-color--100);
  --ct-color-link-visited: var(--pf-v5-global--active-color--100);

  --ct-color-subtle-copy: var(--pf-v5-global--disabled-color--100);

  // General border color (semantic shortcut, instead of specifying the color directly)
  --ct-color-border: var(--pf-v5-global--BorderColor--100);

  // Used for highlighting link blocks (with a light background blue)
  --ct-color-link-hover-bg  : var(--pf-v5-global--palette--light-blue-100);

  /* Colors used for custom lists */
  // as seen in Journal, Listing, Table widgets and pages like Machines, Updates, Services
  --ct-color-list-text               : var(--ct-color-text);
  --ct-color-list-link               : var(--ct-color-link);
  --ct-color-list-bg                 : var(--ct-color-bg);
  --ct-color-list-border             : var(--ct-color-border);
  --ct-color-list-hover-text         : var(--ct-color-link);
  --ct-color-list-hover-bg           : var(--pf-v5-global--BackgroundColor--150);
  --ct-color-list-hover-border       : var(--pf-v5-global--BackgroundColor--150);
  --ct-color-list-hover-icon         : var(--pf-v5-global--palette--light-blue-400);
  --ct-color-list-selected-text      : var(--ct-color-link);
  --ct-color-list-selected-bg        : var(--pf-v5-global--BackgroundColor--150);
  --ct-color-list-selected-border    : var(--pf-v5-global--BackgroundColor--150);
  --ct-color-list-active-text        : var(--pf-v5-global--palette--blue-500);
  --ct-color-list-active-bg          : var(--ct-color-bg);
  --ct-color-list-active-border      : var(--ct-color-list-border);
  --ct-color-list-critical-bg        : var(--pf-v5-global--palette--red-50);
  --ct-color-list-critical-border    : #e6bcbc; // red-500 mixed with white @ 50%
  --ct-color-list-critical-alert-text: var(--pf-v5-global--palette--red-200);
}

.pf-v5-theme-dark {
  --ct-color-list-critical-bg        : #261213; // red-100 mixed with black-850 @ 20%
  --ct-color-list-critical-border    : var(--pf-v5-global--danger-color--200);
  --ct-color-list-critical-alert-text: var(--pf-v5-global--palette--red-8888);
}

[hidden] { display: none !important; }

// Let PF4 handle the scrolling through page component otherwise we might get double scrollbar
html:not(.index-page) body {
  overflow-block: hidden;

  // Ensure UI fills the entire page (and does not run over)
  .ct-page-fill {
    block-size: 100% !important;
  }
}

.ct-icon-info-circle {
  color: var(--pf-v5-global--info-color--100);
}

.ct-icon-exclamation-triangle {
  color: var(--pf-v5-global--warning-color--100);
}

.ct-icon-times-circle {
  color: var(--pf-v5-global--danger-color--100);
}

// Action buttons in headers add extra space. Offset that with a negative margin
// to compensate, so headings are always the same height regardless of action
// buttons or not.
.pf-v5-c-page__main-breadcrumb .pf-v5-c-button {
  --offset: calc(-1 * var(--pf-v5-global--spacer--sm));
  margin-block: var(--offset);
}

// To be used only from testlib.py for pixel-tests
main.pixel-test {
  overflow-y: clip;
}