$carousel-nav-height: 100px;

.tabbed-carousel__nav {
  position: relative;
  z-index: 3;
  height: $carousel-nav-height;
  border: 1px solid $color-grey-border-on--white;
  border-radius: $border-radius;

  @include shopify-breakpoint($mobile) {
    display: none;
  }

  &.grid-container--thirds {
    .tabbed-carousel__nav-item {
      width: 33.33%;
    }
  }
}

.tabbed-carousel__nav-item {
  @include font-brandon-medium;
  user-select: none;
  position: relative;
  display: inline-block;
  height: 98px; // Total height of 100px, with a top and bottom 1px border
  width: 25%;
  float: left;
  padding-top: $gutter / 2;
  background-color: $color-sky--light;
  text-align: center;
  transition: color 300ms ease, background-color 300ms ease;

  &:before,
  &:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    border-top: 49px solid transparent;
    border-left-width: 24px;
    border-left-style: solid;
    border-left: 24px solid $color-grey-border-on--white;
    border-bottom: 49px solid transparent;
    transition: border-color 300ms ease;
  }

  &:before {
    border-left-color: $color-grey-border-on--white;
  }

  &:after {
    left: -1px;
    border-left-color: $color-sky--light;
  }

  &:first-child {
    padding-left: 0;

    &:before,
    &:after {
      display: none;
    }
  }

  .icon {
    display: block;
    margin: 0 auto 10px;
    fill: $color-grey-text--light;
  }

  &:focus,
  &:hover,
  &.js-is-active {
    background: $color-white;

    .icon {
      .segment-online & {
        fill: $color-yellow;
      }

      .segment-pos & {
        fill: $color-blue;
      }

      .segment-mobile &,
      .segment-everywhere & {
        fill: $color-green;
      }
    }

    + .tabbed-carousel__nav-item:after {
      border-left-color: $color-white;
    }
  }

  &.js-is-active {
    color: $color-black;
  }

  &:focus {
    outline: none;
    border-bottom: solid 1px;
  }
}