.tabs {
  z-index: 15px;
  position: relative;
  background: $white;
  width: $max-width;
  border-radius: 4px;
  box-shadow: 0 0 30px rgba($black, 0.1);
  box-sizing: border-box;
  margin: 100px auto;
  overflow: hidden;

  // Tabs Header
  &-header {
    position: relative;
    background: $accent;
    overflow: hidden;

    // Border
    .border {
      position: absolute;
      bottom: 0;
      left: 0;
      background: $secondary;
      width: auto;
      height: 2px;
      transition: 0.3s ease;
    }

    // List
    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: calc(100% - 68px);
    }

    // List Item
    li {
      transition: 0.3s ease;
    }

    // Anchor
    a {
      z-index: 1;
      display: block;
      box-sizing: border-box;
      padding: 15px 20px;
      color: $white;
      font-weight: $semibold;
      text-decoration: none;
      text-transform: uppercase;
    }
  }

  // Tabs Nav
  &-nav {
    position: absolute;
    top: 0;
    right: 0;
    background: $accent;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    color: $white;
    user-select: none;

    // Fade
    &:before {
      content: '';
      z-index: 1;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      box-shadow: 0 0 20px 10px $accent;
    }

    // Arrows
    i {
      cursor: pointer;
    }
  }

  // Tabs Content
  &-content {
    position: relative;
    padding: 15px 20px;
    transition: 0.3s ease;
    overflow: hidden;

    // Blurred Text Effect
    &:after {
      content: '';
      position: absolute;
      bottom: -1px;
      left: 0;
      display: block;
      width: 100%;
      height: 1px;
      box-shadow: 0 0 20px 10px $white;
    }

    // Tab
    .tab {
      display: none;

      // Active
      &.active {
        display: block;
      }
    }
  }
}