tabbar {
  .box {
    background-color: var(--headerbar-bg-color);
    color: var(--headerbar-fg-color);
    box-shadow: inset 0 -1px var(--headerbar-shade-color);
    padding: 1px;
    padding-top: 0;

    @media (prefers-contrast: more) {
      box-shadow: inset 0 -1px $headerbar_border_color;
    }

    &:backdrop {
      background-color: var(--headerbar-backdrop-color);
      transition: background-color $backdrop_transition;

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

  tabbox {
    padding-bottom: 6px;
    padding-top: 6px;
    min-height: 34px;

    > tabboxchild {
      @include focus-ring($focus-state: ':focus-within:focus-visible');
      border-radius: $button_radius;
    }

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

      &.hidden {
        opacity: 0;
      }
    }

    > revealer > indicator {
      min-width: 2px;
      border-radius: 2px;
      margin: 3px 6px;
      background: color-mix(in srgb, var(--accent-color) 50%, transparent);

      @media (prefers-contrast: more) {
        background: var(--accent-color);
      }
    }
  }

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

    @media (prefers-contrast: more) {
      &:hover,
      &:active,
      &:selected {
        box-shadow: inset 0 0 0 1px $border_color;
      }
    }

    &:selected {
      background-color: $selected_color;

      &:hover { background-color: $selected_hover_color; }
      &:active { background-color: $selected_active_color; }
    }

    &:hover { background-color: $hover_color; }
    &:active { background-color: $active_color; }
  }

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

      @media (prefers-contrast: more) {
        box-shadow: none;
      }
    }
  }

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

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

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

  &.inline {
    @extend %tabbar-inline;
  }
}

%tabbar-inline .box {
  background-color: transparent;
  color: inherit;
  box-shadow: none;
  padding-bottom: 0;

  &:backdrop {
    background-color: transparent;
    transition: none;

    > scrolledwindow,
    > .start-action,
    > .end-action {
      filter: none;
      transition: none;
    }
  }
}

%tabbar-shrunk {
  tabbox,
  .start-action,
  .end-action {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

dnd tab {
  background-color: var(--headerbar-bg-color);
  background-image: image($selected_active_color);
  color: var(--headerbar-fg-color);

  box-shadow: 0 0 0 1px RGB(0 0 0 / 3%),
              0 1px 3px 1px RGB(0 0 0 / 7%),
              0 2px 6px 2px RGB(0 0 0 / 3%);

  @media (prefers-contrast: more) {
    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: color-mix(in srgb, var(--accent-color) 50%, transparent);
      transform: translateY(4px);

      @media (prefers-contrast: more) {
        background: var(--accent-color);
      }
    }
  }
}

tabgrid > tabgridchild {
  @include focus-ring(".card", $offset: 0, $outer: true);
}

tabthumbnail {
  border-radius: $card_radius + 4px;

  > box {
    margin: 6px;
  }

  &:drop(active) {
    box-shadow: inset 0 0 0 2px color-mix(in srgb, $drop_target_color 40%, transparent);
    background-color: color-mix(in srgb, $drop_target_color 10%, transparent);
  }

  transition: box-shadow 200ms $ease-out-quad, background-color $ease-out-quad;

  .needs-attention {
    &:dir(ltr) { transform: translate(8px, -8px); }
    &:dir(rtl) { transform: translate(-8px, -8px); }

    > widget {
      background: var(--accent-color);
      min-width: 12px;
      min-height: 12px;
      border-radius: 8px;
      margin: 3px;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--accent-color) 40%, transparent);
    }
  }

  .card {
    picture {
      outline: 1px solid $window_outline_color;
      outline-offset: -1px;
      border-radius: $card_radius;

      @media (prefers-contrast: more) {
        outline-color: $window_outline_color_hc;
      }
    }

    background: none;
    color: inherit;

    @media (prefers-contrast: more) {
      box-shadow: 0 0 0 1px RGB(0 0 6 / 50%),
                  0 1px 3px 1px RGB(0 0 6 / 7%),
                  0 2px 6px 2px RGB(0 0 6 / 3%);
    }
  }

  &.pinned .card {
    background-color: var(--thumbnail-bg-color);
    color: var(--thumbnail-fg-color);

    @media (prefers-contrast: more) {
      outline: 1px solid $window_outline_color_hc;
      outline-offset: -1px;
    }
  }

  .icon-title-box {
    border-spacing: 6px;
  }

  .tab-unpin-icon {
    margin: 6px;
    min-width: 24px;
    min-height: 24px;
  }

  button {
    &.image-button {
      padding: 0;
    }

    border-radius: 99px;

    &, &:hover, &:active {
      background: none;
      box-shadow: none;
    }

    > image {
      margin: 6px;
      background-color: color-mix(in srgb, var(--thumbnail-bg-color) 75%, transparent);
      min-width: 24px;
      min-height: 24px;
      border-radius: 9999px;
      transition: $button_transition;

      @media (prefers-contrast: more) {
        box-shadow: 0 0 0 1px currentColor;
      }
    }

    &:hover > image {
      background-color: color-mix(in srgb, var(--thumbnail-bg-color) calc(0.9 * 75%), currentColor calc(0.1 * 75%));
    }

    &:active > image {
      background-color: color-mix(in srgb, var(--thumbnail-bg-color) calc(0.8 * 75%), currentColor calc(0.2 * 75%));
    }
  }
}

taboverview > .overview {
  color: var(--overview-fg-color);
  background-color: var(--overview-bg-color);

  .new-tab-button {
    margin: 18px;
  }
}

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