@layer components {
  .tabs {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .tab {
      --border: 1px solid color-mix(in oklch, var(--color-surface), var(--color-text) 20%);
      background-color: color-mix(in oklch, var(--color-surface), var(--color-text) 5%);
      flex: 1;
      text-align: center;
      border-block-end: var(--border);

      a {
        text-decoration: none;
        display: block;
        padding: var(--block-space-half);
        color: var(--color-text-medium);

        &[aria-current="page"] {
          color: var(--color-text);
        }
      }

      &:has([aria-current="page"]) {
        background-color: var(--color-surface);
        border-block-start: var(--border);
        border-inline: var(--border);
        border-block-end: none;
      }
    }
  }
}