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

.blank-slate-pf {
  background-color: transparent;
  border: none;
  .blank-slate-pf-secondary-action {
    a.btn {
      // Patternfly assumes this is a plain link and adds extra padding, which makes the buttons too large.
      padding: 2px 6px;
    }
    a + a.btn:before {
      // Hide the separator between links when they're buttons.
      display: none;
    }
  }
}

.breadcrumb {
  margin-bottom: 0;
  padding-bottom: 12px;
  padding-top: 25px;
  > li + li:before {
    @include font-awesome-free-solid;
    content: fa-content($fa-var-angle-right);
    font-size: 12px;
  }
}

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

.btn-link--inherit-color {
  color: inherit;
}

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;
}

.modal-title {
  font-size: $font-size-base;
}

// 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

.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);
}

// Temp fix to adjust dropdown item spacing until issue can be addressed upstream in PatternFly
.pf-c-app-launcher {
  &__group {
    padding-top: 0 !important;
  }
  &__group-title {
    padding-top: 8px !important;
  }
}
// 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-button--align-right {
  margin-left: auto !important;
}

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

// 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-page__main-section {
    --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);
  }
}

// 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-page__sidebar-body {
  --pf-c-page__sidebar-body--PaddingTop: 0;
  --pf-c-page__sidebar-body--PaddingBottom: 0;
}

.pf-c-page__sidebar {
  --pf-c-page__sidebar--BackgroundColor: #{$color-pf-black-900};
  --pf-c-page__sidebar-body--PaddingTop: 0;
  --pf-c-page__sidebar-body--PaddingBottom: 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
  }

  .pf-c-nav {
    // List link
    --pf-c-nav__list-link--active--after--BackgroundColor: var(--pf-c-nav__list-link--hover--after--BackgroundColor);
    --pf-c-nav__list-link--active--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__list-link--active--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__list-link--after--Height: 100%;
    --pf-c-nav__list-link--after--Left: 0;
    --pf-c-nav__list-link--after--md--Left: var(--pf-c-nav__list-link--after--Left);
    --pf-c-nav__list-link--after--Width: 3px;
    --pf-c-nav__list-link--Color: #{$color-pf-black-300};
    --pf-c-nav__list-link--focus--after--BackgroundColor: var(--pf-c-nav__list-link--hover--after--BackgroundColor);
    --pf-c-nav__list-link--focus--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__list-link--focus--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__list-link--hover--after--BackgroundColor: transparent;
    --pf-c-nav__list-link--hover--BackgroundColor: #{$color-pf-black-700};
    --pf-c-nav__list-link--hover--Color: #{$color-pf-white};
    --pf-c-nav__list-link--m-current--after--BackgroundColor: #{$color-pf-blue-300};
    --pf-c-nav__list-link--m-current--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__list-link--md--PaddingLeft: 24px;
    --pf-c-nav__list-link--PaddingBottom: var(--pf-c-nav__list-link--PaddingTop);
    --pf-c-nav__list-link--PaddingLeft: 16px;
    --pf-c-nav__list-link--PaddingTop: 17px;
    // Simple List
    --pf-c-nav__simple-list-link--active--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__simple-list-link--active--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__simple-list-link--Color: var(--pf-c-nav__list-link--Color);
    --pf-c-nav__simple-list-link--focus--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__simple-list-link--focus--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__simple-list-link--focus--FontWeight: var(--pf-global--FontWeight--normal);
    --pf-c-nav__simple-list-link--hover--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__simple-list-link--hover--Color: var(--pf-c-nav__list-link--hover--Color);
    --pf-c-nav__simple-list-link--m-current--BackgroundColor: var(--pf-c-nav__list-link--hover--BackgroundColor);
    --pf-c-nav__simple-list-link--m-current--Color: var(--pf-c-nav__simple-list-link--active--Color);
    --pf-c-nav__simple-list-link--PaddingBottom: 2px;
    --pf-c-nav__simple-list-link--PaddingRight: 5px;
    --pf-c-nav__simple-list-link--PaddingTop: 2px;
    // Subnav
    --pf-c-nav__subnav--MarginTop: 0;
    --pf-c-nav__subnav--MaxHeight: 100%;
    // Toggle
    --pf-c-nav__list-toggle--PaddingRight: 0;
    // Nav Section
    font-size: $co-side-nav-font-size;
  }

  .pf-c-nav__item .pf-c-nav__simple-list .pf-c-nav__separator {
    --pf-c-nav__separator--MarginLeft: var(--pf-c-nav__list-link--PaddingLeft);
    margin-right: var(--pf-c-nav__list-link--PaddingRight);

    @media screen and (min-width: $grid-float-breakpoint) {
      --pf-c-nav__separator--MarginLeft: var(--pf-c-nav__list-link--md--PaddingLeft);
      margin-right: var(--pf-c-nav__list-link--md--PaddingRight);
    }
  }

  .pf-c-nav__list {
    list-style: none; // turn off list-styles to fix bug in Edge
    > .pf-c-nav__item {
      border-bottom: 1px solid #{$color-pf-black};
      margin-top: 0;

      &:not(.pf-m-current) > .pf-c-nav__link {
        &:active,
        &:focus,
        &:hover {
          background-color: var(--pf-c-nav__list-link--hover--BackgroundColor);
        }
      }

      &.pf-m-current {
        background-color: #{$color-pf-black-800};

        &.pf-m-expanded > .pf-c-nav__link::after {
          display: none;
        }
      }

      &.pf-m-expanded,
      .pf-c-nav__link:hover {
        .pf-c-nav__toggle {
          display: block;
        }
      }
    }

    .pf-c-nav__link {
      align-items: center;
      padding-left: var(--pf-c-nav__list-link--PaddingLeft);

      @media screen and (min-width: $grid-float-breakpoint) {
        padding-left: var(--pf-c-nav__list-link--md--PaddingLeft);
      }

      &.pf-m-current {
        background-color: var(--pf-c-nav__list-link--hover--BackgroundColor);
      }
    }
  }

  .pf-c-nav__separator {
    --pf-c-nav__separator--BackgroundColor: #{$color-pf-black};
    list-style: none;
  }

  .pf-c-nav__simple-list .pf-c-nav__link {
    font-size: $font-size-base;
    line-height: 25px;

    &.pf-m-current::after {
      background-color: var(--pf-c-nav__list-link--m-current--after--BackgroundColor);
      bottom: 0;
      content: "";
      display: block;
      height: var(--pf-c-nav__list-link--after--Height);
      left: var(--pf-c-nav__list-link--after--Left);
      position: absolute;
      width: var(--pf-c-nav__list-link--after--Width);
    }
  }

  .pf-c-nav__subnav {
    margin-bottom: 16px;
  }

  .pf-c-nav__toggle {
    color: var(--pf-c-nav__list-link--Color);
    display: none;
  }

  .pf-m-current .pf-c-nav__separator {
    --pf-c-nav__separator--BackgroundColor: #292929;
  }
}

// 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: 16px;
  --pf-c-table-cell--PaddingRight: 16px;
  --pf-c-table--m-compact-cell--first-last-child--PaddingLeft: 16px;
  --pf-c-table--m-compact-cell--first-last-child--PaddingRight: 16px;
}

// react-virtualized disables pointer-events when scrolling, but this prevents
// users from being able to click actions in the last row of a long list
.dropdown-kebab-pf.pf-c-table__action .pf-c-dropdown__menu {
  pointer-events: auto;
}

// operator name alignment adjusted
.pf-c-table.pf-c-virtualized .co-clusterserviceversion-logo__icon {
  align-items: flex-start;
}
.pf-c-table.pf-c-virtualized .co-clusterserviceversion-logo__name {
  justify-content: flex-start;
}

.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.pf-c-virtualized tr.vertical-align-middle > td {
  vertical-align: middle;
}

.pf-c-table.pf-c-virtualized tr.vertical-align-middle {
  .co-clusterserviceversion-logo__icon,
  .co-clusterserviceversion-logo {
    align-items: center;
  }
}

.pf-c-table.pf-m-compact .pf-c-table__action {
  --pf-c-table__action--PaddingLeft: 16px;
  --pf-c-table__action--PaddingRight: 16px;
  --pf-c-table__action--PaddingTop: 8px;
  --pf-c-table__action--PaddingBottom: 8px;
}

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

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

.pf-c-table__action {
  width: 5% !important;
  padding-left: 0px !important;

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

.pf-c-table__action.dropdown-kebab-pf .pf-c-dropdown__menu.pf-m-align-right {
  right: -16px; // align with table edge, offset pf-c-table--m-compact-cell--first-last-child--PaddingRight
}

// 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;
}
