$tab_needs_attention_gradient: radial-gradient(ellipse at bottom,
                                               transparentize(white, .2),
                                               gtkalpha($accent_color, .4) 10%,
                                               gtkalpha($accent_color, 0) 30%);


@mixin undershoot-gradient($dir, $color) {
  background: linear-gradient(to #{$dir},
                              $color,
                              transparentize(black, 1) 20px);
}

@mixin need-attention-gradient($dir) {
  background: linear-gradient(to #{$dir},
                              gtkalpha($accent_color, .5),
                              gtkalpha($accent_color, .3) 1px,
                              gtkalpha($accent_color, 0) 20px);
}

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

  scrolledwindow.pinned {
    undershoot {
      border: 0 solid $border_color;
    }

    &:dir(rtl) undershoot.left {
      border-left-width: 1px;
    }

    &:dir(ltr) undershoot.right {
      border-right-width: 1px;
    }

    tabbox > background {
      &:dir(ltr) {
        box-shadow: inset -1px 0 $border_color;
      }

      &:dir(rtl) {
        box-shadow: inset 1px 0 $border_color;
      }
    }
  }

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

    &.left {
      @include undershoot-gradient("right", $shade_color);
    }

    &.right {
      @include undershoot-gradient("left", $shade_color);
    }
  }

  .needs-attention-left undershoot.left {
    @include need-attention-gradient("right");
  }

  .needs-attention-right undershoot.right {
    @include need-attention-gradient("left");
  }

  tabbox {
    > background {
      background-color: $shade_color;
    }

    > widget {
      @include focus-ring();
    }
  }

  tab {
    border-style: solid;
    border-color: $border_color;
    border-width: 0 1px 0 1px;
    transition: background 150ms ease-in-out;
    background-color: gtkalpha($shade_color, .6);
    background-clip: padding-box;

    &:checked {
      background-color: transparent;
    }

    &:hover {
      background-image: image(gtkalpha(currentColor, .03));
    }

    &.needs-attention {
      background-image: $tab_needs_attention_gradient;

      &:hover {
        background-image: image(gtkalpha(currentColor, .03)), $tab_needs_attention_gradient;
      }
    }
  }

  .start-action,
  .end-action {
    background-color: gtkalpha($shade_color, .6);
    background-clip: padding-box;
    border-color: $border_color;
    border-style: solid;
    transition: background 150ms ease-in-out;

    button {
      border: none;
      border-radius: 0;
    }
  }

  .start-action:dir(ltr),
  .end-action:dir(rtl) {
    border-right-width: 1px;
  }

  .start-action:dir(rtl),
  .end-action:dir(ltr) {
    border-left-width: 1px;
  }

  &:not(.inline) {
    .box {
      background-color: $headerbar_bg_color;
      color: $headerbar_fg_color;
      border-bottom: 1px solid $headerbar_border_color;
    }

    scrolledwindow.pinned {
      undershoot {
        border-color: $headerbar_border_color;
      }

      tabbox > background {
        &:dir(ltr) {
          box-shadow: inset -1px 0 $headerbar_border_color;
        }

        &:dir(rtl) {
          box-shadow: inset 1px 0 $headerbar_border_color;
        }
      }
    }

    undershoot {
      &.left {
        @include undershoot-gradient("right", $headerbar_shade_color);
      }

      &.right {
        @include undershoot-gradient("left", $headerbar_shade_color);
      }
    }

    .needs-attention-left undershoot.left {
      @include need-attention-gradient("right");
    }

    .needs-attention-right undershoot.right {
      @include need-attention-gradient("left");
    }

    tabbox > background {
      background-color: $headerbar_shade_color;
    }

    tab {
      border-color: $headerbar_border_color;
      background-color: gtkalpha($headerbar_shade_color, .6);

      &:checked {
        background-color: transparent;
      }
    }

    .start-action,
    .end-action {
      background-color: gtkalpha($headerbar_shade_color, .6);
      border-color: $headerbar_border_color;
    }

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

dnd tab {
  min-height: 26px;
  background-color: $headerbar_bg_color;
  color: $headerbar_fg_color;

  &.needs-attention {
    background-image: $tab_needs_attention_gradient;
  }

  box-shadow: 0 1px 5px 1px transparentize(black, .91),
              0 2px 14px 3px transparentize(black, .95),
              0 0 0 1px transparentize(black, if($contrast == 'high', .2, .95));

  outline: 1px solid $window_outline_color;
  outline-offset: -1px;

  margin: 25px;
}

tabbar,
dnd {
  tab {
    padding: 6px;

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

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