// Use this file to override styles from 3rd party dependencies
$pf-4-nav-bar-height: 76px; // Height of the PatternFly 4 masthead

form.pf-c-form {
  --pf-c-form__helper-text--Color: var(--pf-global--Color--200);
}

// account for collapsing space between .btn
.btn + .btn {
  margin-left: 3px;
}

// Removes PF white gradiant effect since it doesn't work in Firefox. Truncated text still has trailing ...
// Upstream issue https://github.com/patternfly/patternfly-next/issues/2633
.catalog-tile-pf-description .truncated::after {
  background: none;
}

kbd {
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.modal.right-side-modal-pf {
  top: 76px; // since PatternFly 4's masthead is taller than PatternFly 3's

  .modal-dialog {
    height: 100%; // Entend panel to bottom
    margin-top: 0; // parent is positioned: fixed so margin isn't needed for positioning

    .modal-content {
      height: 100%; // Use % instead of vh so that scroll-shadows can be used
      max-height: none;
    }
  }

  &.fade {
    .modal-dialog {
      transition-duration: 200ms;
    }
    &:not(.in) .modal-dialog {
      transform: translate3d(15px, 0, 0);
    }
  }
}

.modal-footer .alert {
  text-align: left;
}

// fix bug where monaco-aria-container is visible in Firefox but shouldn't be
// bug occurs only if the suggestions overlay has been enabled
.monaco-aria-container {
  top: -999em;
}

// PatternFly 4 overrides

h1,
h2,
h3,
h4,
h5,
h6 {
  // reset headings font family back to correct value
  // bug caused by PF4 _shield-inheritable.scss
  .pf-l-split {
    font-family: $headings-font-family;
  }
}

.pf-c-about-modal-box {
  &__brand {
    align-items: flex-start; // so logos don't stretch vertically
    min-width: 220px;
  }

  &__brand-image {
    height: auto !important; // allow logo to be taller
  }
}

// Webpack will not properly bundle the background-image from PatternFly
@media only screen and (min-width: 576px) {
  .pf-c-about-modal-box__hero {
    background-image: url('../imgs/pfbg_992.jpg') !important;
  }
}

.pf-c-about-modal-box__brand-image,
.pf-c-brand {
  max-width: 100%;
}

.pf-c-alert--top-margin {
  margin-top: var(--pf-global--spacer--lg);
}

.pf-c-app-launcher__group-title {
  // Reset font to RedHatText so it doesn't appear too bold
  font-family: $font-family-base;
}

// Temp fix to adjust user menu dropdown toggle padding until it can be converted back to a standard dropdown
.co-user-menu .pf-c-app-launcher__toggle {
  padding-left: 0;
  padding-right: 0;
}

.pf-c-breadcrumb {
  padding-bottom: 12px;
  padding-top: 25px;

  &--no-padding-top {
    padding-top: 0;
  }
}

.pf-c-button--align-right {
  margin-left: auto !important;
}

.pf-c-button.co-p-has-sidebar__sidebar-close {
  float: right;
  font-size: 21px !important;
  line-height: 1;
  opacity: 0.35;
  padding: 0;
  &:hover,
  &:focus {
    opacity: 1;
  }
}

.pf-c-button.pf-m-link {
  white-space: normal; // override default .pf-c-button to enable wrapping
}

.pf-c-button.pf-m-inline {
  text-align: left; // override default .pf-c-button text centering
}

.pf-c-button.pf-m-link--align-left {
  padding-left: 0;
}

.pf-c-button.pf-m-link--align-right {
  padding-right: 0;
}

.pf-c-button.pf-c-button--no-default-values {
  border: 0;
  font-size: unset;
  font-weight: unset;
  line-height: unset;
  padding: 0;
  text-align: unset;
  white-space: normal;
}

.pf-c-button.co-p-has-sidebar__sidebar-close {
  float: right;
  font-size: 21px !important;
  line-height: 1;
  opacity: 0.35;
  padding: 0;
  &:hover,
  &:focus {
    opacity: 1;
  }
}

.pf-c-button {
  &:hover,
  &:focus {
    .pf-c-button-icon--plain {
      color: var(--pf-c-button--m-plain--hover--Color);
    }
  }
}

.pf-c-button-icon--plain {
  color: var(--pf-c-button--m-plain--Color);
}

.pf-c-chip-group.pf-m-toolbar {
  margin-bottom: var(--pf-global--spacer--xs);
}
// PF components that calculate their correct height based on --pf-global--FontSize--md: 1rem
.pf-c-modal-box,
.pf-c-switch {
  --pf-global--FontSize--md: 1rem;
}

.pf-c-page {
  display: block !important;
  position: relative;

  &__header {
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &__header-brand-link {
    flex: 0 1 auto !important; // so link doesn't grow larger than logo
  }

  &__header-tools {
    @media (max-width: $grid-float-breakpoint-max) {
      margin-right: 8px !important;
    }
    .pf-c-dropdown__toggle,
    .pf-c-app-launcher__toggle {
      font-size: $pf-header-icon-fontsize !important;
    }
  }

  &__main {
    // `z-index: auto` is required for fullscreen terminal
    --pf-c-page__main--ZIndex: auto;
    bottom: 0;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--pf-c-page__header--MinHeight);
    transition: left 100ms ease;
  }

  // `.pf-c-page` specificity required
  .pf-c-data-toolbar {
    --pf-c-data-toolbar--PaddingTop: 0;
    --pf-c-data-toolbar__content--PaddingLeft: 0;
    --pf-c-data-toolbar__content--PaddingRight: 0;
  }

  .pf-c-page__main-section {
    overflow: hidden; // needed for Firefox to enable proper scrolling of content-scrollable
    --pf-c-page__main-section--PaddingBottom: 0;
    --pf-c-page__main-section--PaddingLeft: 0;
    --pf-c-page__main-section--PaddingRight: 0;
    --pf-c-page__main-section--PaddingTop: 0;
  }

  .pf-c-page__sidebar {
    --pf-c-page__sidebar--Transition: all 100ms ease;
  }
}

@media screen and (min-width: $grid-float-breakpoint) {
  .pf-m-expanded + .pf-c-page__main {
    left: var(--pf-c-page__sidebar--md--Width);
  }
}

@-webkit-keyframes autofill-success {
  to {
    background: var(--pf-c-form-control--success--Background);
  }
}
@-webkit-keyframes autofill-invalid {
  to {
    background: var(--pf-c-form-control--invalid--Background);
  }
}

// specificity targeting form elements to override --pf-global--FontSize--md
.pf-c-page,
.modal-dialog {
  .pf-c-app-launcher,
  .pf-c-button,
  .pf-c-dropdown,
  .pf-c-dropdown__menu-item,
  .pf-c-dropdown__toggle,
  .pf-c-form-control {
    font-size: $font-size-base;
    height: auto;
  }
  .pf-l-stack {
    font-size: $font-size-base;
  }
  .pf-c-form-control.pf-m-success, .pf-c-form-control[aria-invalid="true"] {
    --pf-global--FontSize--md: #{$font-size-base};
  }
  .pf-c-form-control {
    &:-webkit-autofill {
      -webkit-animation-fill-mode: both;
      &.pf-m-success {
        -webkit-animation-name: autofill-success;
      }
      &[aria-invalid="true"] {
        -webkit-animation-name: autofill-invalid;
      }
    }
  }
}

// Fix for the notification drawer appearing due to tabbing through components
// Remove this when the pf4 breaking changes dependency is contributed
@keyframes pf-c-drawer-hide-panel {
  to {
    visibility: hidden;
  }
}
.pf-c-drawer__panel[hidden] {
  animation-name: pf-c-drawer-hide-panel;
  animation-delay: var(--pf-c-drawer__panel--TransitionDuration);
  animation-fill-mode: forwards;
}

.pf-c-page__sidebar {
  --pf-c-page__sidebar-body--PaddingTop: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  top: var(--pf-c-page__header--MinHeight);
  width: 0 !important; // only set size when expanded (.pf-m-expanded is added)

  @media screen and (min-width: $grid-float-breakpoint) {
    --pf-c-page__sidebar--BoxShadow: none;
  }

  &.pf-m-expanded {
    width: var(
      --pf-c-page__sidebar--md--Width
    ) !important; // maintain desktop width so size doesn't animate before hiding when resizing to mobile
  }

  // Perspective switcher
  &.pf-m-dark .pf-c-dropdown {
    --pf-global--Color--100: var(--pf-global--Color--dark-100);
  }

  .pf-c-nav {
    --pf-c-nav__list-link--PaddingRight: var(--pf-global--spacer--sm);
    --pf-c-nav__list-link--PaddinLeft: var(--pf-global--spacer--md);
    --pf-c-nav__list-link--after--Left: var(--pf-global--spacer--md);
    @media screen and (min-width: $grid-float-breakpoint) {
      --pf-c-nav__list-link--PaddingRight: var(--pf-global--spacer--md);
      --pf-c-nav__list-link--PaddinLeft: var(--pf-global--spacer--lg);
      --pf-c-nav__list-link--after--Left: var(--pf-global--spacer--lg);
      --pf-c-nav__simple-list--nested__separator--MarginLeft: var(--pf-global--spacer--xl);
      --pf-c-nav__simple-list-link--nested--PaddingLeft: var(--pf-global--spacer--xl);
    }

    font-size: $co-side-nav-font-size;

    .pf-c-nav__simple-list .pf-c-nav__link {
      font-size: $font-size-base;
      // fix bug where nav items retain focus after navigation
      // see https://github.com/patternfly/patternfly-next/issues/2463
      &:focus {
        background-color: transparent;
        color: var(--pf-global--Color--light-300); // escape PF var chaos
        font-weight: var(--pf-c-nav__list-link--FontWeight);
      }
      &:focus:hover,
      &.pf-m-current:focus {
        background-color: var(--pf-c-nav__simple-list-link--focus--BackgroundColor);
        color: var(--pf-c-nav__simple-list-link--focus--Color);
        font-weight: var(--pf-c-nav__simple-list-link--m-current--FontWeight);
      }
    }

    // override list styles, necessary due to setting $pf-global--enable-reset to false
    ul {
      list-style: none;
    }
  }

  // fix bug where nav items retain focus after navigation
  // see https://github.com/patternfly/patternfly-next/issues/2463
  .pf-c-nav__item.pf-m-current .pf-c-nav__simple-list .pf-c-nav__link:focus {
    color: var(--pf-global--Color--light-100); // escape PF var chaos
  }
}

// pf table overrides

.pf-c-table tr > th {
  font-weight: var(--pf-global--FontWeight--bold);
}

.pf-c-table {
  table-layout: fixed;
}

.pf-c-table tr > * {
  --pf-c-table-cell--FontSize: $font-size-base;
  --pf-c-table-cell--PaddingLeft: 12px;
  --pf-c-table-cell--PaddingRight: 12px;
  --pf-c-table--m-compact-cell--first-last-child--PaddingLeft: 12px;
  --pf-c-table--m-compact-cell--first-last-child--PaddingRight: 12px;
}

.pf-c-table.pf-c-virtualized tr {
  display: table;
  table-layout: fixed;
  width: 100%;
  &:first-child::before {
    content: none;
    width: 0 !important;
  }
}

// override .co-m-table-grid [class*='col-'], .co-m-table-grid .row
.pf-c-table.pf-m-compact,
.pf-c-table.pf-c-virtualized {
  tr > td {
    vertical-align: top;
  }
}

.pf-c-table__check {
  width: 8.333% !important;

  @media screen and (max-width: 768px) {
    width: 16.66% !important;
  }
}

.pf-c-table__action {
  padding: 8px 0 !important;
  width: 44px !important;
}

// FIXME: Pass as `style` prop to `List` once this is resolved (https://github.com/bvaughn/react-virtualized/issues/876). This is for the kebab menus' overflow.
.pf-c-window-scroller.ReactVirtualized__VirtualGrid,
.pf-c-window-scroller .ReactVirtualized__VirtualGrid,
.pf-c-window-scroller .ReactVirtualized__VirtualGrid__innerScrollContainer {
  overflow: visible !important;
}

.table {
  margin-bottom: 0;
  &--layout-fixed {
    table-layout: fixed;
  }
  td {
    vertical-align: middle !important;
  }
  th {
    font-weight: var(--pf-global--FontWeight--bold);
    padding-top: 0 !important;
  }
  thead > tr > th {
    border-bottom: 0;
  }
  tr:last-child {
    border-bottom: 1px solid $table-border-color;
  }
}

.text-secondary {
  color: $color-text-secondary;
}

.toolbar-pf {
  background-color: transparent;
  border-bottom: none;
  box-shadow: none;
  min-width: 0; // enable text-overflow: ellipsis
  padding-top: 0;
}

@media (max-width: $screen-md-max) {
  .toolbar-pf-actions {
    display: block;
    margin-bottom: 0;
  }
}

.xterm .xterm-screen canvas {
  // workaround bug where 1px white stripe appears atop terminal in Firefox for MacOS
  // see https://github.com/xtermjs/xterm.js/issues/1974
  border-right: 1px solid transparent;
}

button.pf-c-dropdown__menu-item.pf-m-disabled {
  // enables tooltips for disabled menu items
  pointer-events: auto;
}
