.test-header.tester {
  grid-area: test-header;
  display: grid;
  grid-template-areas:   "test-title session-info test-actions"
                          "test-progress test-progress test-progress"
                          "nav-tabs nav-tabs nav-tabs";
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto;
  color: $white;
  background-color: $navigation-tester-bg;
  padding: 0 0 0 $spacing-sm;

  @include media-breakpoint-up(sm) {
    padding: $spacing-xs $spacing-md 0 $spacing-md;
    grid-template-areas:  "test-title test-progress session-info test-actions"
                          "nav-tabs nav-tabs nav-tabs nav-tabs";
    grid-template-columns: auto 1fr auto auto;
    grid-template-rows: auto;
  }
  @include media-breakpoint-up(md) {
    padding: $spacing-xs $spacing-md 0 $body-padding-desktop;
  }
}

.test-header.tester.ready {
  background-color: $petrol-dark;;
}

.test-header.tester.recording {
  background-color: $petrol;
}

.test-header.tester.danger {
  background-color: $danger;
}

.test-header.tester.minimized {
  grid-template-areas:  "nav-tabs session-info test-actions";
  grid-template-columns: 1fr auto auto;
  align-items: center;
  padding-top: 0;
  padding-bottom: 0;
  .test-title, .test-progress-wrapper {
    display: none;
  }
  .session-info {
    padding-top: 0;
  }
  .nav-tabs {
    padding-top: $spacing-xxs;
    padding-bottom: $spacing-xs;
  }
  @include media-breakpoint-up(sm) {
    padding-top: $spacing-xxs;
    padding-bottom: $spacing-xxs;
  }
}

.test-header .nav-tabs {
  grid-area: nav-tabs;
  margin-bottom: 0;
  padding-bottom: $spacing-xs;
  border-bottom: none;
}

.test-header.tester .nav-tabs::after {
  background: linear-gradient(90deg, rgba(29,29,29,0) 0%, rgba(29,29,29,1) 90%);
}

.test-header.ready .nav-tabs::after {
  background: linear-gradient(90deg, rgba(38,51,64,0) 0%, rgba(38,51,64,1) 90%);
}

.test-header.tester.recording .nav-tabs::after {
  background: linear-gradient(90deg, rgba(35,106,132,0) 0%, rgba(35,106,132,1) 90%);
}

.test-header.tester.danger .nav-tabs::after {
  background: linear-gradient(90deg, rgba(236,4,4,0) 0%, rgba(236,4,4,1) 90%);
}

.test-header .navlink {
  height: $spacing-md;
  color: $white;
  font-size: $font-size-base;
  font-weight: $font-weight-base;
  border-bottom: none;

  &.active, &:hover, &:focus {
    border-bottom-width: 2px;
  }
}

.test-header.tester.recording .navlink.active {
  border-color: $white;
  &:hover, &:focus {
    border-color: $link-hover-color;
  }
}

.test-header .test-title {
  grid-area: test-title;
  padding-top: $spacing-xs;
  padding-right: $spacing-md;
  margin-bottom: 0;
  font-size: $font-size-h5;
  line-height: 1;
  @include media-breakpoint-up(sm) {
    padding-top: 0;
    font-size: $font-size-h4;
  }
}

.test-header .test-progress-wrapper {
  grid-area: test-progress;
  display: inline-flex;
  flex-direction: column;
  flex-grow: 1;
  padding-right: $spacing-md;
}

.test-header .meta-info {
  color: $gray-light;
  font-size: $font-size-label;
  margin-bottom: 2px;
}

.test-header .test-progress {
  appearance: none;
  width: 100%;
  height: 2px;
  margin-bottom: $spacing-xs;
}

.test-progress::-webkit-progress-bar {
  background-color: $gray-darkest;
}
.test-progress::-webkit-progress-value {
  background-color: $link-hover-color;
}

.session-info {
  position: relative;
  grid-area: session-info;
  display: inline-flex;
  flex-direction: column;
  padding-top: $spacing-xs;
  padding-right: $spacing-md;
  line-height: 1;
  @include media-breakpoint-up(sm) {
    padding-top: 0;
  }
}

.session-label {
  display: none;
  font-size: $font-size-xs;
  @include media-breakpoint-up(sm) {
    display: block;
  }
}

.session-timer {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: $font-size-base;
  @include media-breakpoint-up(sm) {
    align-items: baseline;
    font-size: $font-size-h3;
    font-weight: $font-weight-light;
  }
}

.session-timer::before {
  content: "";
  display: inline-block;
  height: $icon;
  width: $icon;
  margin-right: $spacing-xs;
  mask-image: url("@images/test.svg");
  mask-repeat: no-repeat;
  background-color: $white;
  @include media-breakpoint-up(sm) {
    margin-top: $spacing-xxs;
  }
}

.session-timer::after {
  position: absolute;
  content: "";
  display: inline-block;
  top: 0;
  left: 0;
  height: $icon;
  width: $icon;
  margin-right: $spacing-xs;
  mask-image: url("@images/circle-sm-filled.svg");
  mask-repeat: no-repeat;
  background-color: $danger;
  @include media-breakpoint-up(sm) {
    margin-top: $spacing-xxs;
  }
}

.test-header.danger .session-timer::after {
  background-color: $white;
}

.session-addon {
  display: none;
  @include media-breakpoint-up(sm) {
    display: inline;
    margin-left: $spacing-xxs;
    font-size: $font-size-label;
  }
}

.test-actions {
  grid-area: test-actions;
  display: flex;
}

.test-actions .btn {
  justify-content: center;
  width: $btn-height;
  height: $btn-height;
  padding: 0;
  color: $white;
  border-radius: 0;
  border-left: $border-width solid $black;

  @include media-breakpoint-up(sm) {
    margin-right: $spacing-xs;
    padding: $spacing-xs;
    border-radius: $border-radius;
    border-color: $white;
  }  

  &:hover {
    border: none;
  }
}

.test-actions .btn-recording {
  color: $danger;
}

.test-actions .btn:last-child {
  margin-right: 0;
}