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

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

.form-control[disabled], fieldset[disabled] .form-control {
  cursor: auto;
}

tags-input:focus,
tags-input .host:focus {
  outline: none;
}

tags-input .host {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
}
tags-input .host:active {
  outline: none;
}

tags-input .tags {
  cursor: text;
  // Style to look like .form-control
  min-height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: 0 $padding-base-horizontal;
  line-height: $co-m-label-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
  border: 1px solid $input-border;
  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
  @include box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
  @include transition(border-color ease-in-out .15s, box-shadow ease-in-out .15s);
}
.modal-body tags-input .tags {
  background-color: rgba(255, 255, 255, 0.5); // enable scroll-shadows to be seen
  margin-bottom: ($grid-gutter-width / 2);
  min-height: 120px;
  .tag-item {
    background-color: rgba(235,235,235,.5); // enable scroll-shadows to be seen
  }
}
tags-input .tags.focused,
tags-input .tags:focus {
  outline: none;
  border-color: #66AFE9;
}
tags-input .tags .tag-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

tags-input .tags .tag-item {
  @extend .co-m-label;
  word-break: break-all; // required for Firefox, Edge
}

tags-input .tags .tag-item.selected {
  border: solid 1px;
}

tags-input .tags .tag-item .remove-button {
  margin: 0 0 0 2px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  vertical-align: middle;
  font-size: 16px;
  color: #585858;
}
tags-input .tags .tag-item .remove-button:active {
  color: #fff;
}
tags-input .remove-button:active,
tags-input .remove-button:hover {
  text-decoration: none;
}
tags-input .tags .input {
  background: transparent;
  border: 1px solid transparent;
  line-height: $co-m-label-line-height;
  margin: 2px 0;
  outline: none;
  padding: 0;
  // Since iOS phone text input size is larger, remove border and margin and increase line-height
  @supports (-webkit-overflow-scrolling: touch) { // Target mobile Safari
    @media (max-width: $grid-float-breakpoint-max) { // Target phones
      border: 0;
      line-height: 24px;
      margin-bottom: 0;
      margin-top: 0;
    }
  }
}
tags-input .tags .input.invalid-tag {
  color: $color-pf-red-200;
}
tags-input .tags .input::-ms-clear {
  display: none;
}
tags-input.ng-invalid .tags {
  border-color: $color-pf-red-200;
}

tags-input .autocomplete {
  margin-top: 5px;
  position: absolute;
  padding: 5px 0;
  z-index: 999;
  width: 100%;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
tags-input .autocomplete .suggestion-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
tags-input .autocomplete .suggestion-item {
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: black;
  background-color: white;
}
tags-input .autocomplete .suggestion-item.selected {
  color: white;
  background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item.selected em {
  color: white;
  background-color: #0097cf;
}
tags-input .autocomplete .suggestion-item em {
  font: normal bold 16px "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: black;
  background-color: white;
}

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

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

.breadcrumb {
  margin-bottom: 0;
  padding-bottom: 12px;
  padding-top: 25px;
}

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

// FIXME: Pass as `style` prop to `List` once this is resolved (https://github.com/bvaughn/react-virtualized/issues/876). This is for the cog menus' overflow.
.ReactVirtualized__Grid.ReactVirtualized__List {
  overflow: visible !important;
}
.ReactVirtualized__Grid__innerScrollContainer {
  overflow: visible !important;
}

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

.table {
  margin-bottom: 0;
  &--layout-fixed {
    table-layout: fixed;
  }
  td {
    vertical-align: middle !important;
  }
  th {
    padding-top: 0 !important;
    text-transform: uppercase;
  }
  thead > tr > th {
    border-bottom: 0;
  }
  tr:last-child {
    border-bottom: 1px solid $table-border-color;
  }
}

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

.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-title {
  font-size: $font-size-base;
}

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

// PatternFly 4 overrides

.pf-c-about-modal-box {
  &__brand {
    min-width: 220px;
  }

  &__brand-image {
    height: auto !important;
  }
}

// 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-dropdown__menu {
  list-style: none;
}

// TEMP fix until https://github.com/patternfly/patternfly-next/issues/1543 is fixed upstream
.pf-c-dropdown__menu-item {
  &:focus,
  &:hover {
    color: var(--pf-global--Color--dark-100);
  }
}

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

  &__header {
    background: #151515;
    display: grid !important;
    grid-template-columns: 1fr auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  &__header-brand {
    background: none !important;
    padding-right: 32px;
  }

  &__header-brand-link {
    flex: 0 1 auto !important;
    max-width: 100% !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);
  }
}

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

  .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: 32px;
    --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;
  }

  .pf-c-nav__item .pf-c-nav__simple-list .pf-c-nav__link.pf-m-separator::after {
    --pf-c-nav__simple-list-link--m-separator--after--Left: var(--pf-c-nav__list-link--PaddingLeft);
    right: var(--pf-c-nav__list-link--PaddingRight);

    @media screen and (min-width: $grid-float-breakpoint) {
      --pf-c-nav__simple-list-link--m-separator--after--Left: var(--pf-c-nav__list-link--md--PaddingLeft);
      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-c-nav__simple-list .pf-c-nav__link.pf-m-separator:after {
          --pf-c-nav__simple-list-link--m-separator--after--Background: #292929;
        }
      }

      &.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-c-nav__simple-list .pf-c-nav__link {
    font-size: $font-size-base;
    line-height: 25px;

    // use `::before` so as not to conflict with `.pf-m-separator::after`
    &.pf-m-current::before {
      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-m-separator {
      margin-bottom: 17px;

      &::after {
        --pf-c-nav__simple-list-link--m-separator--after--Background: #{$color-pf-black};
        --pf-c-nav__simple-list-link--m-separator--after--Bottom: -9px;
      }
    }
  }

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

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