// Tabs navigation

.tabs {
  .flex-row();
  gap: 0;
  border-bottom: 2px solid @color-border;
  margin-bottom: @spacing-medium;

  .item {
    padding: @spacing-base @spacing-large;
    font-family: @font-family-base;
    font-size: @font-size-large;
    font-weight: 700;
    color: @color-secondary;
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background: transparent;
    transition: all 0.2s;

    &:hover {
      color: @color-primary;
      background: lighten(@color-secondary, 70%);
    }

    &.active {
      color: @color-primary;
      border-bottom-color: @color-primary;
    }
  }
}

.tab {
  display: none;

  &.active {
    display: block;
  }
}