// 888             888
// 888             888
// 888             888
// 888888  8888b.  88888b.  .d8888b
// 888        "88b 888 "88b 88K
// 888    .d888888 888  888 "Y8888b.
// Y88b.  888  888 888 d88P      X88
//  "Y888 "Y888888 88888P"   88888P'

.check-tab {
  background-color: color(white, 100, 80);
  border: 1px solid color(white, 100, 80);
  border-bottom-color: color(grey, 90);
  border-top-left-radius: $space-xs;
  border-top-right-radius: $space-xs;
  padding: $space-s $space-m;

  &.active,
  &:active,
  &:focus,
  &:hover {
    background-color: $color-theme-base-background;
  }

  &.active {
    border: 1px solid color(grey, 90);
    border-bottom-color: $color-theme-base-background;
  }

  .control input {
    width: 0;
  }
}

.check-tabs {
  @include breakpoint(m) {
    grid-gap: $space-s;
    position: relative;
    z-index: 2;
  }
}

.check-tabs-contents {
  background-color: $color-theme-base-background;
  border: 1px solid color(grey, 90);
  border-top-width: 0;
  padding: $space-m;

  @include breakpoint(m) {
    border-top-width: 1px;
    position: relative;
    top: -1px;
    z-index: 1;
  }

  @include breakpoint(l) {
    padding: $space-m $space-l;
  }

  .panel.state-info {
    font-weight: $font-weight-normal;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.check-tabs-select {
  background-color: $color-theme-base-background;
  border: 1px solid color(grey, 90);
  border-bottom-width: 0;
  padding: $space-m $space-m 0;

  select {
    font-weight: $font-weight-bold;
  }
}