.tabs-component {
  margin: 1rem 0;

  .tabs-component-tabs {
    height: 2.25rem;
    border: 0;
    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    margin-bottom: -1px;
    padding: 0 .375rem;

    .tabs-component-tab {
      color: #999999;
      font-size: .875rem;
      font-weight: 600;
      margin: .125rem .25rem .125rem 0;
      list-style: none;
      overflow: hidden;
      background-color: #FFFFFF;
      border: solid 1px #DDDDDD;
      transform: translateY(2px);
      transition: transform .3s ease;
      border-radius: .375rem .375rem 0 0;

      .tabs-component-tab-a {
        align-items: center;
        color: inherit;
        padding: .625rem 1rem .75rem;
        text-decoration: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;

        &:focus {
          outline: 0;
          color: #4099DE;
        }
      }

      &.is-active {
        color: #000000;
        border-bottom: solid 1px #FFFFFF;
        z-index: 2;
        transform: translateY(0);
        margin-top: 0;
        margin-bottom: -.125rem;

        .tabs-component-tab-a {
          padding-bottom: 0;
          padding-top: .75rem;

          &:focus {
            color: #000000;
          }
        }
      }

      &.is-disabled {
        * {
          color: #CDCDCD;
          cursor: not-allowed !important;
        }
      }

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        color: #666666;
      }
    }
  }

  .tabs-component-panels {
    background-color: #FFFFFF;
    border: solid 1px #DDDDDD;
    border-radius: .375rem;
    box-shadow: 0 0 .625rem rgba(0, 0, 0, .05);
    padding: .375rem 0 0 0;
  }
}