/* Kilo Tabs overrides – sized to match @vscode/webview-ui-toolkit panels */

[data-component="tabs"] {
  font-size: var(--kilo-font-size-13);
  line-height: normal;

  [data-slot="tabs-list"] {
    padding: 8px;
  }

  [data-slot="tabs-trigger-wrapper"] {
    padding: 8px;
    border-radius: 2px;

    &:has([data-selected]) {
      background-color: var(--input-base);
    }
  }

  [data-slot="tabs-trigger"] {
    font-size: var(--kilo-font-size-12);
    line-height: normal;
    padding: 0px;
  }

  /* Pill variant: closest to legacy tab style */
  &[data-variant="pill"] [data-slot="tabs-list"] {
    background: var(--input-base);
    border-radius: 2px;
    padding: 4px;
  }

  &[data-variant="pill"] [data-slot="tabs-trigger"] {
    padding: 4px 0;
    border-radius: 0;
    font-size: var(--kilo-font-size-13);
  }

  /* Default/alt variant adjustments */
  [data-slot="tabs-trigger"] {
    height: 48px;
    padding: 4px 0;
    font-size: var(--kilo-font-size-13);
    line-height: normal;
    cursor: pointer;
  }

  &[data-variant="settings"] {
    container-type: inline-size;

    [data-slot="tabs-list"] {
      width: 180px;
      min-width: 180px;
    }

    @container (max-width: 500px) {
      [data-slot="tabs-list"] {
        width: auto;
        min-width: auto;
      }
      [data-slot="tabs-trigger"] .label {
        display: none;
      }
    }

    [data-slot="tabs-content"] {
      background-color: var(--background-base);
      padding: 8px 16px;

      > h3 {
        font-size: var(--kilo-font-size-16);
        font-weight: 400;
        margin: 16px 0;
        color: var(--vscode-foreground, var(--text-strong));
      }

      [data-component="card"] {
        padding: 0;
        border: none;
      }
    }
  }
}
