$padding-horizontal: floor(($grid-gutter-width / 2));
$nav-transition-speed: 0.3s;

.tabs {
  position: relative;
  padding: 25px 0 20px;

  &::before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
      transparent 0%,
      $gray-darker 10%,
      $gray-darker 90%,
      transparent 100%
    );
    content: "";
  }

  li {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;

    > a {
      position: relative;
      display: block;
      margin: 5px 0;
      padding: 8px $padding-horizontal;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      border: 1px solid transparent;
      cursor: pointer;
      transition:
        box-shadow $nav-transition-speed,
        color $nav-transition-speed;

      i {
        color: lighten($text-color, 30%);
        transition: color $nav-transition-speed;
      }

      &::before {
        position: absolute;
        top: 0;
        width: 3px;
        height: 100%;
        background: $primary;
        opacity: 0;
        transition: all ease $transition-base-speed;
        content: "";
      }

      &.disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }

      &:hover {
        i {
          color: $text-color;
        }

        &::before {
          opacity: 1;
        }
      }
    }

    &.active {
      > a {
        color: $text-color;

        i {
          color: $text-color;
        }

        &::before {
          top: 10%;
          height: 80%;
          opacity: 1;
        }
      }
    }

    &.disabled {
      > a {
        color: $text-color;
        cursor: not-allowed;
        opacity: 0.5;

        > i,
        > svg {
          color: $text-color;
          opacity: 0.5;
        }

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

  div:last-child > & {
    &::before {
      right: 0;
    }

    li {
      > a {
        text-align: right;
        border-right: none;

        &::before {
          right: 0;
          border-top-left-radius: 2px;
          border-bottom-left-radius: 2px;
        }

        &:hover {
          &::before {
            box-shadow:
              -3px 0 10px rgba(darken($primary, 20%), 0.9),
              0 3px 10px rgba(darken($primary, 20%), 0.9),
              0 -3px 10px rgba(darken($primary, 20%), 0.9);
          }
        }
      }

      &.active {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;

        > a {
          border-right: none;
          border-top-left-radius: 4px;
          border-bottom-left-radius: 4px;

          &::before {
            box-shadow:
              -3px 0 10px rgba(darken($primary, 20%), 0.9),
              0 3px 10px rgba(darken($primary, 20%), 0.9),
              0 -3px 10px rgba(darken($primary, 20%), 0.9);
          }
        }
      }
    }
  }

  div:first-child > & {
    &::before {
      left: 0;
    }

    li {
      > a {
        text-align: left;
        border-left: none;

        &::before {
          left: 0;
          border-top-right-radius: 2px;
          border-bottom-right-radius: 2px;
        }

        &:hover {
          &::before {
            box-shadow:
              -3px 0 10px rgba(darken($primary, 20%), 0.9),
              0 3px 10px rgba(darken($primary, 20%), 0.9),
              0 -3px 10px rgba(darken($primary, 20%), 0.9);
          }
        }
      }

      &.active {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;

        > a {
          border-left: none;
          border-top-right-radius: 4px;
          border-bottom-right-radius: 4px;

          &::before {
            box-shadow:
              -3px 0 10px rgba(darken($primary, 20%), 0.9),
              0 3px 10px rgba(darken($primary, 20%), 0.9),
              0 -3px 10px rgba(darken($primary, 20%), 0.9);
          }
        }
      }
    }
  }
}
