/**
 * Loaded after Claro's and Gin's tabs CSS (see gavias_tico.libraries.yml
 * "global-styling" library).
 *
 * 1. Claro's .tabs__link:focus box-shadow ring uses its own --color-focus
 *    variable, which Gin's tabs.css never overrides — only Gin's own
 *    components (which read --gin-color-focus) get the Gin focus color.
 *    Re-pointing --color-focus/--color-text at Gin's equivalents here makes
 *    Claro's focus ring/text color match Gin's blue/text instead of Claro's
 *    own green/gray.
 */
:root {
  --color-focus: var(--gin-color-focus, rgba(0, 125, 250, .6));
  --color-text: var(--gin-color-text, #222330);
}

/**
 * 2. The real pill-shaped desktop primary-tab look (rounded, compact) is
 *    Gin's own .is-horizontal .tabs--primary .tabs__link rule (in
 *    components/tabs.css) — but Claro's higher/equal-specificity :focus
 *    rules (border, min-height, margin, padding) still win on focus,
 *    making the focused tab swell relative to its resting size. Give the
 *    focus state the exact same box model (padding, margin-inline-end,
 *    min-height, border-radius) as the Gin resting state. box-shadow is
 *    left alone — Claro's/Gin's own native focus-ring box-shadow rules
 *    apply as-is.
 */
.tabs__trigger:focus {
  border: var(--tabs--focus-height, 0.1875rem) solid transparent;
}

.tabs__link:focus {
  margin: 0 !important;
  padding-block: calc(var(--gin-spacing-xs, 0.5rem) - 2px) !important;
  padding-inline: var(--gin-spacing-s, 0.75rem) !important;
  border: none !important;
}

@media (min-width: 48em) {
  .is-horizontal .tabs--primary .tabs__link:focus {
    font-size: var(--gin-font-size);
    padding-block: calc(var(--gin-spacing-xs, 0.5rem) - 2px) !important;
    padding-inline: var(--gin-spacing-s, 0.75rem) !important;
    margin-inline-end: .25em !important;
    min-height: 2rem !important;
    border-radius: 2rem !important;
    border: none !important;
  }
}