@import url("/css/tones.css");

/* abafr-switch 0.1.0 — standalone candidate Gem */
abafr-switch {
  --abafr-switch-inactive-strong: #7a818d;
  --abafr-switch-inactive-soft: #eef0f3;
  --abafr-switch-active-strong: #5b6472;
  --abafr-switch-active-soft: #e1e4e8;
  --abafr-switch-strong: var(--abafr-switch-inactive-strong);
  --abafr-switch-soft: var(--abafr-switch-inactive-soft);
  --abafr-switch-border: var(--abafr-switch-strong);
  --abafr-switch-off-background: #f6f7f8;
  --abafr-switch-off-thumb: var(--abafr-switch-strong);
  --abafr-switch-label-color: inherit;
  --abafr-switch-focus: var(--abafr-switch-strong);
  --abafr-switch-width: 1.5rem;
  --abafr-switch-height: 1.25rem;
  --abafr-switch-thumb: .9rem;
  --abafr-switch-thumb-zone: var(--abafr-switch-width);
  --abafr-switch-duration: 240ms;
  --abafr-switch-ease: linear;
  display: inline-block;
  color: var(--abafr-switch-label-color);
  font-family: var(--abafr-switch-font-family, "Plus Jakarta Sans", ui-serif);
  font-size: var(--abafr-switch-font-size, .875rem);
  line-height: 1;
}

abafr-switch.tone {
  --abafr-switch-active-strong: var(--tone-color, var(--color-default));
  --abafr-switch-active-soft: var(--tone-soft, var(--color-default-soft));
}

abafr-switch.primary,
abafr-switch.institutional,
abafr-switch.magenta,
abafr-switch[tone="primary"],
abafr-switch[tone="institutional"],
abafr-switch[tone="magenta"] {
  --abafr-switch-active-strong: var(--color-primary, #8C1AB3);
  --abafr-switch-active-soft: var(--color-primary-soft, #F5DDFF);
}

abafr-switch.default,
abafr-switch[tone="default"] {
  --abafr-switch-active-strong: var(--color-default, #1A1A1A);
  --abafr-switch-active-soft: var(--color-default-soft, #F1F1EF);
}

abafr-switch.neutral,
abafr-switch.gray,
abafr-switch[tone="neutral"],
abafr-switch[tone="gray"] {
  --abafr-switch-active-strong: var(--color-gray, #4D4C47);
  --abafr-switch-active-soft: var(--color-gray-soft, #EBECED);
}

abafr-switch.earth,
abafr-switch.brown,
abafr-switch[tone="earth"],
abafr-switch[tone="brown"] {
  --abafr-switch-active-strong: var(--color-brown, #6B3825);
  --abafr-switch-active-soft: var(--color-brown-soft, #E9E5E3);
}

abafr-switch.highlight,
abafr-switch.yellow,
abafr-switch[tone="highlight"],
abafr-switch[tone="yellow"] {
  --abafr-switch-active-strong: var(--color-yellow, #8A5D00);
  --abafr-switch-active-soft: var(--color-yellow-soft, #FBF3DB);
}

abafr-switch.secondary,
abafr-switch.purple,
abafr-switch.unavailable,
abafr-switch.no-blocks,
abafr-switch[tone="secondary"],
abafr-switch[tone="purple"] {
  --abafr-switch-active-strong: var(--color-purple, #6B478A);
  --abafr-switch-active-soft: var(--color-purple-soft, #E8DEEE);
}

abafr-switch.accent,
abafr-switch.pink,
abafr-switch[tone="accent"],
abafr-switch[tone="pink"] {
  --abafr-switch-active-strong: var(--color-pink, #8E3061);
  --abafr-switch-active-soft: var(--color-pink-soft, #F5E0E9);
}

abafr-switch.success,
abafr-switch.ok,
abafr-switch.green,
abafr-switch[tone="success"],
abafr-switch[tone="ok"],
abafr-switch[tone="green"] {
  --abafr-switch-active-strong: var(--color-ok, #2F5E44);
  --abafr-switch-active-soft: var(--color-ok-soft, #DDEDEA);
}

abafr-switch.warning,
abafr-switch.orange,
abafr-switch[tone="warning"],
abafr-switch[tone="orange"] {
  --abafr-switch-active-strong: var(--color-warning, #A55600);
  --abafr-switch-active-soft: var(--color-warning-soft, #FFF1D3);
}

abafr-switch.danger,
abafr-switch.error,
abafr-switch.red,
abafr-switch[tone="danger"],
abafr-switch[tone="error"],
abafr-switch[tone="red"] {
  --abafr-switch-active-strong: var(--color-error, #A8302B);
  --abafr-switch-active-soft: var(--color-error-soft, #FFE2DD);
}

abafr-switch.info,
abafr-switch.processing,
abafr-switch.blue,
abafr-switch[tone="info"],
abafr-switch[tone="processing"],
abafr-switch[tone="blue"] {
  --abafr-switch-active-strong: var(--color-info, #1F5D80);
  --abafr-switch-active-soft: var(--color-info-soft, #D3E5EF);
}

abafr-switch.t1,
abafr-switch[tone="t1"] {
  --abafr-switch-active-strong: var(--color-t1, #006D75);
  --abafr-switch-active-soft: var(--color-t1-soft, #D8EFF0);
}

abafr-switch.t2,
abafr-switch[tone="t2"] {
  --abafr-switch-active-strong: var(--color-t2, #4C55A5);
  --abafr-switch-active-soft: var(--color-t2-soft, #E2E5F7);
}

abafr-switch.t3,
abafr-switch[tone="t3"] {
  --abafr-switch-active-strong: var(--color-t3, #87446F);
  --abafr-switch-active-soft: var(--color-t3-soft, #F1DFE9);
}

abafr-switch.am,
abafr-switch[tone="am"] {
  --abafr-switch-active-strong: var(--color-am, #1F5D80);
  --abafr-switch-active-soft: var(--color-am-soft, #B9DEEC);
}

abafr-switch.pm,
abafr-switch[tone="pm"] {
  --abafr-switch-active-strong: var(--color-pm, #6E4D2C);
  --abafr-switch-active-soft: var(--color-pm-soft, #DCCBB9);
}

abafr-switch.extra,
abafr-switch[tone="extra"] {
  --abafr-switch-active-strong: var(--color-extra, #4D4187);
  --abafr-switch-active-soft: var(--color-extra-soft, #D7D2EC);
}

abafr-switch.empty,
abafr-switch[tone="empty"] {
  --abafr-switch-active-strong: var(--color-empty, #596778);
  --abafr-switch-active-soft: var(--color-empty-soft, #EEF1F7);
}

abafr-switch.camino,
abafr-switch[tone="camino"] {
  --abafr-switch-active-strong: #5d6371;
  --abafr-switch-active-soft: #e7e9f1;
  --abafr-switch-off-background: #f7f8fc;
  --abafr-switch-off-thumb: #fff;
}

abafr-switch:has(input[type="checkbox"]:checked) {
  --abafr-switch-strong: var(--abafr-switch-active-strong);
  --abafr-switch-soft: var(--abafr-switch-active-soft);
}

abafr-switch[variant~="compact"] {
  --abafr-switch-width: 2.25rem;
  --abafr-switch-height: 1.18rem;
  --abafr-switch-thumb: .82rem;
  --abafr-switch-font-size: .75rem;
}

abafr-switch[variant~="light"] input[type="checkbox"]:not(:checked) {
  border-color: var(--abafr-switch-off-background);
}

abafr-switch > .abafr-switch-control {
  box-sizing: border-box;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) var(--abafr-switch-width);
  align-items: center;
  min-block-size: 1.5rem;
  gap: .35rem;
  color: inherit;
  cursor: pointer;
}

abafr-switch > .abafr-switch-control:has(input:disabled) {
  cursor: not-allowed;
  opacity: .55;
}

abafr-switch .abafr-switch-display-label {
  line-height: 1.2;
  overflow-wrap: anywhere;
}

abafr-switch[label-placement="inside-moving"] > .abafr-switch-control,
abafr-switch[label-placement="inside-centered"] > .abafr-switch-control {
  gap: 0;
  position: relative;
}

abafr-switch[label-placement="inside-moving"] > .abafr-switch-control {
  grid-template-columns: var(--abafr-switch-thumb-zone) max-content;
}

abafr-switch[label-placement="inside-centered"] > .abafr-switch-control {
  grid-template-columns: var(--abafr-switch-thumb-zone) max-content var(--abafr-switch-thumb-zone);
}

  abafr-switch[label-placement="inside-moving"] .abafr-switch-display-label,
  abafr-switch[label-placement="inside-centered"] .abafr-switch-display-label {
    grid-column: 2;
    grid-row: 1;
    z-index: 1;
    color: var(--abafr-switch-strong);
    pointer-events: none;
    white-space: nowrap;
    text-transform: uppercase;
    line-height: 1;
    font-size: .85em;
  }

abafr-switch[label-placement="inside-moving"] .abafr-switch-display-label {
  position: relative;
  inset-inline-start: 0;
  transition:
    color var(--abafr-switch-duration) var(--abafr-switch-ease),
    inset-inline-start var(--abafr-switch-duration) var(--abafr-switch-ease),
    padding-inline-start var(--abafr-switch-duration) linear,
    padding-inline-end var(--abafr-switch-duration) linear;
  padding: 0 .75em 0 0;
}

abafr-switch[label-placement="inside-moving"] > .abafr-switch-control:has(input:checked) .abafr-switch-display-label {
  inset-inline-start: calc(0px - var(--abafr-switch-thumb-zone));
  padding: 0 0 0 .75em;
}

abafr-switch[label-placement="inside-moving"] input[type="checkbox"],
abafr-switch[label-placement="inside-centered"] input[type="checkbox"] {
  grid-column: 1 / -1;
  grid-row: 1;
  inline-size: 100%;
}

abafr-switch .abafr-switch-accessible-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

abafr-switch input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  inline-size: var(--abafr-switch-width);
  block-size: var(--abafr-switch-height);
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  margin: 0;
  border: 1.5px solid var(--abafr-switch-border);
  border-radius: 999px;
  background: var(--abafr-switch-off-background);
  cursor: inherit;
  vertical-align: middle;
  transition:
    background-color var(--abafr-switch-duration) var(--abafr-switch-ease),
    border-color var(--abafr-switch-duration) var(--abafr-switch-ease),
    box-shadow var(--abafr-switch-duration) var(--abafr-switch-ease);
}

abafr-switch input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: .15rem;
  inline-size: var(--abafr-switch-thumb);
  block-size: var(--abafr-switch-thumb);
  border-radius: 999px;
  background: var(--abafr-switch-off-thumb);
  box-shadow: 0 1px 2px light-dark(rgb(0 0 0 / .22), transparent);
  transform: translateY(-50%);
  transition:
    inset-inline-start var(--abafr-switch-duration) var(--abafr-switch-ease),
    background-color var(--abafr-switch-duration) var(--abafr-switch-ease);
}

abafr-switch input[type="checkbox"]:checked {
  border-color: var(--abafr-switch-border);
  background: var(--abafr-switch-soft);
}

abafr-switch input[type="checkbox"]:checked::before {
  inset-inline-start: calc(100% - var(--abafr-switch-thumb) - .15rem);
  background: var(--abafr-switch-strong);
  transform: translateY(-50%);
}

abafr-switch input[type="checkbox"]:focus-visible:not([data-pointer-focus]) {
  outline: 2px solid var(--abafr-switch-focus);
  outline-offset: 2px;
}

@supports (background: color-mix(in srgb, white, black)) {
  abafr-switch {
    --abafr-switch-off-background: color-mix(in srgb, var(--abafr-switch-inactive-soft) 65%, white);
  }
}

@media (prefers-reduced-motion: reduce) {
  abafr-switch input[type="checkbox"],
  abafr-switch input[type="checkbox"]::before,
  abafr-switch[label-placement="inside-moving"] .abafr-switch-display-label {
    transition: none;
  }
}

@media (forced-colors: active) {
  abafr-switch {
    --abafr-switch-label-color: CanvasText;
  }

  abafr-switch[label-placement="inside-moving"] .abafr-switch-display-label,
  abafr-switch[label-placement="inside-centered"] .abafr-switch-display-label {
    color: CanvasText;
  }

  abafr-switch input[type="checkbox"] {
    forced-color-adjust: none;
    border-color: CanvasText;
    background: Canvas;
  }

  abafr-switch[variant~="light"] input[type="checkbox"]:not(:checked) {
    border-color: CanvasText;
  }

  abafr-switch input[type="checkbox"]::before {
    background: CanvasText;
    box-shadow: none;
  }

  abafr-switch input[type="checkbox"]:checked {
    border-color: Highlight;
    background: Highlight;
  }

  abafr-switch input[type="checkbox"]:checked::before {
    background: HighlightText;
  }

  abafr-switch input[type="checkbox"]:focus-visible:not([data-pointer-focus]) {
    outline-color: Highlight;
  }

  abafr-switch input[type="checkbox"]:disabled {
    border-color: GrayText;
  }
}

:root[data-tema="scuro"] abafr-switch {
  --abafr-switch-inactive-strong: #fff;
  --abafr-switch-inactive-soft: transparent;
  --abafr-switch-off-background: transparent;
  --abafr-switch-off-thumb: #fff;
  --abafr-switch-label-color: #fff;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema]) abafr-switch {
    --abafr-switch-inactive-strong: #fff;
    --abafr-switch-inactive-soft: transparent;
    --abafr-switch-off-background: transparent;
    --abafr-switch-off-thumb: #fff;
    --abafr-switch-label-color: #fff;
  }
}