@use 'core/variables' as *;

$tab-accent-color: $brand-primary;

.tabs {
  &__content {
    display: none;
    border: 2px solid $tab-accent-color;
    padding: 15px;
    margin-bottom: 15px;

    &.current {
      display: inherit;
    }
  }

  &__top-bar {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      background: none;
      color: $gray-base;
      display: inline-block;
      padding: 10px 15px;
      cursor: pointer;

      &.current {
        background: $tab-accent-color;
        color: $white-base;
      }
    }
  }
}
