$security-filter-height: 90px;
$selection-summary-height: 68px;

@mixin sticky-top-positioning($extra: 0) {
  top: $header-height + $extra;

  .with-performance-bar & {
    top: $header-height + $performance-bar-height + $extra;
  }
}

.vulnerabilities-row {
  &.dismissed .table-mobile-content:not(.action-buttons) {
    opacity: 0.5;
  }

  @include media-breakpoint-up(md) {
    .action-buttons {
      opacity: 0;
    }

    &:hover,
    &:focus,
    &:focus-within {
      background: $blue-50;
      border-bottom: 1px solid $blue-200;
      border-top: 1px solid $blue-200;
      margin-top: -1px;

      .action-buttons {
        opacity: 1;
      }
    }
  }
}

.security-dashboard-filters {
  @include sticky-top-positioning();
}

// Due to position: sticky not being supported on Chrome (https://caniuse.com/#feat=css-sticky),
// the property is assigned to the th element as a workaround
.vulnerability-list {
  .card,
  thead th {
    position: -webkit-sticky;
    position: sticky;
    z-index: 1;
    @include sticky-top-positioning($security-filter-height);
  }

  thead th {
    box-shadow: 0 1px $gray-100;
  }

  thead.below-selection-summary th {
    @include sticky-top-positioning($security-filter-height + $selection-summary-height);
  }
}

.security-dashboard-accordion > ul {
  @include gl-display-flex;
  @include gl-flex-fill-1;
}

.security-charts > section {
  flex: 1 1 40%;
  margin: 1rem;
}
