@use 'sass:map';
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';

.tab-list-wrapper {
  position: relative;
  z-index: 1;

  &--sticky {
    position: sticky;
    top: 0;
  }
}

.panel-wrapper {
  $panel-wrapper: &;
  $colors: 'blueberry', 'neutral', 'white';

  position: relative;
  width: 100%;
  border-radius: 0;
  height: 50px;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    height: 50px;

    /* Disse to linjene passer på at den hvite gradienten ikke går over border til den ytre diven */
    width: auto;
    margin: 0 2px;
  }

  @each $color in $colors {
    &--#{$color} {
      background: linear-gradient(var(--color-base-background-#{$color}), #0000);
      pointer-events: none;
    }
  }
}