tabbar {
  .box {
    min-height: 38px;
  }

  tabbox {
    > tabboxchild {
      @include focus-ring();
      border-radius: $button_radius;
      margin-bottom: 5px;
      margin-top: 5px;
    }

    > separator {
      margin-top: 9px;
      margin-bottom: 9px;
      transition: opacity 150ms ease-in-out;

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      margin: 9px 6px;
      background: if($contrast == 'high', $accent_color, gtkalpha($accent_color, 0.5));
    }
  }

  tab {
    transition: background 150ms ease-in-out;

    @if $contrast == 'high' {
      &:hover,
      &:active,
      &:selected {
        box-shadow: inset 0 0 0 1px $border_color;
      }
    }

    &:selected {
      background-color: $view_selected_color;

      &:hover { background-color: $view_selected_hover_color; }
      &:active { background-color: $view_selected_active_color; }
    }

    &:hover { background-color: $view_hover_color; }
    &:active { background-color: $view_active_color; }
  }

  tabbox.single-tab tab {
    &, &:hover, &:active {
      background: none;

      @if $contrast == 'high' {
        box-shadow: none;
      }
    }
  }

  .start-action,
  .end-action {
    padding: 5px;
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    padding-right: 0;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    padding-left: 0;
  }

  &:not(.inline) {
    .box {
      background-color: $headerbar_bg_color;
      color: $headerbar_fg_color;
      padding-bottom: 1px;
      box-shadow: inset 0 -1px if($contrast == 'high', $headerbar_border_color, $headerbar_shade_color);
    }

    &:backdrop .box {
      background-color: $headerbar_backdrop_color;
      transition: background-color $backdrop_transition;

      > scrolledwindow,
      > .start-action,
      > .end-action {
        filter: opacity(0.5);
        transition: filter $backdrop_transition;
      }
    }
  }
}

dnd tab {
  background-color: $headerbar_bg_color;
  background-image: image($view_selected_active_color);
  color: $headerbar_fg_color;

  box-shadow: 0 0 0 1px transparentize(black, 0.97),
              0 1px 3px 1px transparentize(black, .93),
              0 2px 6px 2px transparentize(black, .97);

  @if $contrast == 'high' {
    outline: 1px solid $border_color;
    outline-offset: -1px;
  }

  margin: 25px;
}

tabbar,
dnd {
  tab {
    min-height: 26px;
    padding: 4px;
    border-radius: $button_radius;

    button.image-button {
      padding: 0;
      margin: 0;
      min-width: 24px;
      min-height: 24px;
      border-radius: 99px;
    }

    indicator {
      min-height: 2px;
      border-radius: 2px;
      background: if($contrast == 'high', $accent_color, gtkalpha($accent_color, 0.5));
      transform: translateY(4px);
    }
  }
}

tabview:drop(active),
tabbox:drop(active) {
  box-shadow: none;
}
