.tgl {
  --tgl-bg: transparent;
  --tgl-fg: var(--color-gray-900);
  --tgl-shadow: none;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  position: relative;
  border: none;
  border-radius: var(--radius-6);
  background: var(--tgl-bg);
  color: var(--tgl-fg);
  box-shadow: var(--tgl-shadow);
  font-family: var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

.tgl__label { color: inherit; }

.tgl--md { padding: var(--spacing-8) var(--spacing-16); }
.tgl--sm { padding: var(--spacing-4) var(--spacing-8); }

.tgl--hover            { --tgl-bg: var(--color-gray-0); }
.tgl--hover.tgl--on    { --tgl-fg: var(--color-accent-600); }

.tgl--active           { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--active.tgl--on   { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }

.tgl--disabled         { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }

.tgl__badge {
  position: absolute;
  left: calc(50% + 0.5px);
  top: var(--spacing-32);
  transform: translateX(-50%);
}

.tgl--live:not(:disabled):not([aria-pressed="true"]):hover { --tgl-bg: var(--color-gray-0); }
.tgl--live.tgl--on:not(:disabled):not([aria-pressed="true"]):hover { --tgl-fg: var(--color-accent-600); }
.tgl--live:disabled { --tgl-bg: transparent; --tgl-fg: var(--color-gray-200); --tgl-shadow: none; cursor: default; }

.tgl--live[aria-pressed="true"] { --tgl-bg: var(--color-gray-0); --tgl-shadow: var(--shadow-12); }
.tgl--live.tgl--on[aria-pressed="true"] { --tgl-bg: var(--color-accent-400); --tgl-fg: var(--color-gray-0); --tgl-shadow: var(--shadow-4); }
.tgl--live:focus-visible { outline: 2px solid var(--color-accent-400); outline-offset: 2px; }