@use "@patternfly/patternfly/base/patternfly-themes.scss";
@use "./patternfly/patternfly-4-overrides.scss";

@import "global-variables";
@import "@patternfly/patternfly/components/Page/page.scss";

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

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

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

h4 {
  --ct-heading-font-size: var(--pf-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-]) {
        font-size: var(--ct-heading-font-size);
    }
}

/* End of headings resize */

a {
    cursor: pointer;
}

.disabled {
    pointer-events: auto;
}

.btn {
    min-height: 26px;
    min-width: 26px;
}

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

.btn.disabled:hover, .pf-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 {
    width: 100%;
}

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

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

/* 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 {
    margin-top: 3px;
    /* Right align footer idle messages after the buttons */
    margin-left: auto;
}

.dialog-wait-ct .spinner {
    display: inline-block;
    /* Add spacing between possible messages and the spinner */
    margin-left: var(--pf-global--spacer--md);
}

.dialog-wait-ct span {
    vertical-align: 4px;
    padding-left: 10px;
}

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

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

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

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

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

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

    // Used for highlighting link blocks (with a light background blue)
    --ct-color-link-hover-bg  : var(--pf-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-global--BackgroundColor--150);
    --ct-color-list-hover-border       : var(--pf-global--BackgroundColor--150);
    --ct-color-list-hover-icon         : var(--pf-global--palette--light-blue-400);
    --ct-color-list-selected-text      : var(--ct-color-link);
    --ct-color-list-selected-bg        : var(--pf-global--BackgroundColor--150);
    --ct-color-list-selected-border    : var(--pf-global--BackgroundColor--150);
    --ct-color-list-active-text        : var(--pf-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-global--palette--red-50);
    --ct-color-list-critical-border    : #e6bcbc; // red-500 mixed with white @ 50%
    --ct-color-list-critical-alert-text: var(--pf-global--palette--red-200);
}

[hidden] { display: none !important; }

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

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

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

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

.ct-icon-times-circle {
    color: var(--pf-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-c-page__main-breadcrumb .pf-c-button {
    --offset: calc(-1 * var(--pf-global--spacer--sm));
    margin-top: var(--offset);
    margin-bottom: var(--offset);
}

// Drop side padding in mobile mode,
// intended mainly for PF PageSection elements (pf-c-page__main-section).
// It's similar to adding padding={{ default: 'noPadding', sm: 'padding' }},
// except this only affects the sides, not the top and bottom.
@media screen and (max-width: $pf-global--breakpoint--sm) {
    .ct-pagesection-mobile {
        padding-left: 0;
        padding-right: 0;
    }
}
