///
/// Tab Container
///
.o-tab {
  display: flex;
  flex-flow: row wrap;

  &.-center {
    justify-content: center;
  }

  &.-end {
    justify-content: flex-end;
  }

  &.-vertical {
    flex-direction: column;
  }

  &.-justify {
    .o-tab-item {
      flex-basis: 0;
      flex-grow: 1;
      text-align: center;
    }
  }

  ///
  /// Underline
  ///
  &.-underline {
    border-bottom: 1px solid $color-grey-200;

    .o-tab-item:not(.-disabled) {
      color: $color-grey-500;

      &.-active {
        color: $color-blue-500;
        font-weight: $font-medium;
        box-shadow: inset 0 -2px $color-blue-500;
        border-radius: $border-radius-base $border-radius-base 0 0;

        &:focus {
          box-shadow:
            $form-ctrl-focus-shadow,
            inset 0 -2px $color-blue-500;
        }
      }

      &:focus {
        text-decoration: none;
        box-shadow: $form-ctrl-focus-shadow;
      }
    }

    &.-vertical {
      border-bottom: none;
      border-right: 1px solid $color-grey-200;


      .o-tab-item:not(.-disabled) {
        &.-active {
          box-shadow: inset -2px 0 $color-blue-500;
          border-radius: $border-radius-base 0 0 $border-radius-base;

          &:focus {
            box-shadow:
              $form-ctrl-focus-shadow,
              inset -2px 0 $color-blue-500;
          }
        }
      }
    }
  }

  ///
  /// Border
  ///
  &.-border {
    border-bottom: 1px solid $color-grey-300;

    .o-tab-item:not(.-disabled) {
      margin-bottom: -1px;
      border-radius: $border-radius-base $border-radius-base 0 0;

      &.-active {
        color: $color-grey-700;
        border: 1px solid $color-grey-300;
        border-bottom: 1px solid #fff;
      }

      &:focus {
        text-decoration: none;
        box-shadow: $form-ctrl-focus-shadow;
      }
    }

    &.-vertical {
      border-bottom: none;
      border-right: 1px solid $color-grey-200;


      .o-tab-item:not(.-disabled) {
        margin-bottom: 0;
        margin-right: -1px;
        border-radius: $border-radius-base 0 0 $border-radius-base;

        &.-active {
          color: $color-grey-700;
          border: 1px solid $color-grey-300;
          border-right: 1px solid #fff;
        }
      }
    }
  }

  ///
  /// Pill
  ///
  &.-pill {
    .o-tab-item {
      padding: $space-3 14px;
      border-radius: $border-radius-base;

      & + .o-tab-item {
        margin-left: $space-1;
      }

      &:not(.-disabled) {
        color: $color-grey-500;

        &:focus,
        &:hover {
          color: $color-grey-700;
        }

        &:focus {
          text-decoration: none;
          box-shadow: $form-ctrl-focus-shadow;
        }
      }

      &.-active {
        background-color: $color-grey-100;
        font-weight: $font-medium;
        color: $color-grey-700;
      }
    }

    &.-vertical {
      .o-tab-item + .o-tab-item {
        margin-left: 0;
        margin-top: $space-1;
      }
    }

    &.-blue {
      .o-tab-item:not(.-disabled) {
        &:hover {
          background-color: $color-grey-0;
        }

        &.-active {
          background-color: $color-blue-0;
          color: $color-blue-600;
        }
      }
    }
  }
}

///
/// Tab Item
///
.o-tab-item {
  display: block;
  padding: 9px 14px;
  color: $color-blue-500;
  text-decoration: none;
  border-radius: $border-radius-base;

  &:hover,
  &.-active {
    color: $color-blue-800;
    outline: none;
  }

  &.-disabled {
    cursor: default;
    color: $color-grey-300;
    text-decoration: none;
    pointer-events: none;
  }
}

///
/// Tab Panel
///
.o-tab-panel {
  &.-padded {
    padding: $space-6;
  }

  &:not(.-active) {
    display: none;
  }
}