@import 'page_bundles/mixins_and_variables_and_functions';
@import '../components/generic_vulnerability_report';

$security-filter-height: 90px;
$selection-summary-height: 66px;
$selection-summary-with-error-height: 118px;

@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();
}

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

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

.vulnerability-list {
  @media (min-width: $breakpoint-sm) {
    .checkbox {
      padding-left: $gl-spacing-scale-4;
      padding-right: 0;
      width: 1px;

      + td,
      + th {
        padding-left: $gl-spacing-scale-4;
      }
    }

    .detected {
      width: 9%;
    }

    .status {
      width: 8%;
    }

    .severity {
      width: 10%;
    }

    .description {
      max-width: 0;
    }

    .identifier {
      width: 16%;
    }

    .scanner {
      width: 10%;
    }

    .activity {
      width: 5%;
    }
  }

  // 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
  .selection-summary,
  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);
  }

  tr:hover .vulnerability-title {
    text-decoration: underline;
  }

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