/* Shimming ng-hide */
.ng-hide {
  display: none !important;
}

/* hide login widget */
.hide {
  display: none !important;
}

$popover-arrow-outer-width: 11px;

/* btn */

/* this shims the btn default style (old bs3 we used all over) to be white */
.btn-default {
  @include button-variant(white, $gray-400, white);
}


/* Shims uib-collapse because old version uses class "in" instead of show */
[uib-collapse].collapse {
  display: none;

  &.in {
    display: block;
  }
}

/* I target JUST uib- widgets that can't override their "fade.in" class. */
.fade[uib-modal-window],
.fade[uib-tooltip-classes] {
  opacity: 0;
  transition: opacity 0.15s linear;

  &.in {
    opacity: 1;
  }
}

tr.collapse.in {
  display: table-row;
}

tbody.collapse.in {
  display: table-row-group;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition-property: height, visibility;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

/* Popovers  - I have customized the  $tooltipProvider.options( { placementClassPrefix: 'bs-popover-' } ); to prefix with the same classes as bs4 */

.popover {
  /* Needed because I used to override all popovers, but I just want this for b3 legacy for now */
  &.max-width-none {
    max-width: none;
  }

  /* Needed to prevent flash */
  &.uib-position-measure {
    top: -9999px !important;
    left: -9999px !important;
    visibility: hidden !important;
  }

  /* Arrows need shimming since bs4 doesn't have -right, -left */

  &.uib-popover-top {
    @extend .bs-popover-top;

    margin-top: -10px;

    .arrow {
      left: 50%;
    }
  }

  &.uib-popover-top-left {
    @extend .bs-popover-top;

    .arrow {
      bottom: -9px !important;
    }
  }

  &.uib-popover-top-right {
    @extend .bs-popover-top;

    .arrow {
      bottom: -9px !important;
      left: auto;
    }
  }

  &.uib-popover-right {
    @extend .bs-popover-right;

    .arrow {
      margin-top: -5px;
      top: 50%;
    }
  }

  &.uib-popover-right-top {
    @extend .bs-popover-right;

    .arrow {
      margin-top: auto !important;
      left: calc((0.5rem + 1px) * -1) !important;
    }
  }

  &.uib-popover-right-bottom {
    @extend .bs-popover-right;

    .arrow {
      left: calc((0.5rem + 1px) * -1) !important;
      top: auto !important;
    }
  }

  &.uib-popover-bottom {
    @extend .bs-popover-bottom;

    .arrow {
      margin-left: -10px;
      left: 50%;
    }
  }

  &.uib-popover-bottom-left {
    @extend .bs-popover-bottom;

    .arrow {
      margin-left: 4px !important;
      margin-top: -9px !important;
    }
  }

  &.uib-popover-bottom-right {
    @extend .bs-popover-bottom;

    .arrow {
      margin-top: -9px;
      left: auto;
    }
  }

  &.uib-popover-left {
    @extend .bs-popover-left;

    margin-left: -10px;

    .arrow {
      margin-top: -5px;
      top: 50%;
    }
  }

  &.uib-popover-left-top {
    @extend .bs-popover-left;

    .arrow {
      margin-top: 0;
      right: calc((0.5rem + 1px) * -1) !important;
    }
  }

  &.uib-popover-left-bottom {
    @extend .bs-popover-left;

    .arrow {
      top: auto;
      right: calc((0.5rem + 1px) * -1) !important;
    }
  }
}

@import "~angular-ui-bootstrap/src/tooltip/tooltip.css";

/* this matches the old popover-content from uib to bs4 */
.popover-content {
  @extend .popover-body;
}

/* end popover */
/* Pagination */
[uib-pagination] {
  margin-bottom: 0;
  white-space: nowrap;
}

.pagination-page {
  &.active {
    .btn {
      color: $gray-800 !important;
      font-weight: 700;
      pointer-events: none;
    }
  }
}

/* don't like how _reboot does this */
figure {
  // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
  // We reset that to create a better flow in-page.
  margin: 0;
}

.nwf-globalnav-secondary-menu > li.show {
  border-bottom-color: transparent;
  background-color: white;
}

.dropdown-menu {
  box-shadow: 0 0.375rem 0.75rem rgba(0, 0, 0, 0.175);
}

.dropdown.show {
  > .dropdown-menu {
    display: block;
  }
}

.dropdown-item {
  &:hover {
    text-decoration: underline;
  }

  &:active {
    background-color: $dropdown-link-hover-bg;
    color: $dropdown-link-color;
  }

  cursor: pointer;
}

.dropdown-menu-right {
  left: auto;

  // Reset the default from `.dropdown-menu`
  right: 0;
}

/* datepicker */
small,
.small {
  font-weight: inherit;
  font-size: floor(100% * $font-size-sm / $font-size-base);
}

.popover {
  /* this font size is needed to override the fact that it is set to small by default  in bs4! */
  font-size: $font-size-base;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);

  &.is-arrowless {
    margin-top: 2px !important;

    .arrow {
      display: none !important;
    }
  }
}

.pull-right {
  @extend .float-right;
}

/* I want to make panel and bs4 card component both look like bs3 panel*/
.panel {
  @extend .card;
}

.panel-heading {
  @extend .card-header;
  line-height: inherit;
}

.panel-title {
  @extend .card-title;
}

.card-block {
  background-color: $white;
  color: $text-color;
  padding: 15px;
}

.panel-body {
  @extend .card-block;
}

.panel-footer {
  @extend .card-footer;
}

.card-primary {
  color: $white;
  background-color: #67a1d3;
  border-color: #67a1d3;
}

.panel-primary {
  @extend .card-primary;
}

.card-success {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.panel-success {
  @extend .card-success;
}

.card-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}

.panel-info {
  @extend .card-info;
}

.card-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}

.panel-warning {
  @extend .card-warning;
}

.card-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.panel-danger {
  @extend .card-danger;
}

/* form */

/* I needed to shim this since I was seeing double caret */
.custom-select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

.nwf-globalnav-primary,
.nwf-leftnav-toggle-item {
  div[class^="icon-nav"] {
    color: #fff;
  }
}