.tabs {
  border-bottom: var(--border-size-1) solid var(--surface-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-1);
  margin-block: var(--size-3);
}

.tab {
  align-items: center;
  border-radius: var(--radius-2) var(--radius-2) 0 0;
  color: var(--text-2);
  display: inline-flex;
  gap: var(--size-2);
  margin-block-end: calc(-1 * var(--border-size-1));
  padding-block: var(--size-2);
  padding-inline: var(--size-3);
  text-decoration: none;

  &.active {
    background: var(--surface-1);
    border: var(--border-size-1) solid var(--surface-3);
    border-bottom-color: var(--surface-1);
    color: var(--text-1);
    font-weight: var(--font-weight-6);
  }
}