@reference 'tailwindcss';

:host {
  --emr-segmented-button-height: calc(var(--spacing) * 8);
  --emr-segmented-bg: var(--color-surface-container);
  --emr-segmented-button-hover-bg: var(--color-surface-container-highest);
  --emr-segmented-button-color: var(--color-neutral-700);
  --emr-segmented-button-hover-color: var(--color-on-surface);
  --emr-segmented-button-selected-color: var(--color-primary-650);
  --emr-segmented-button-selected-bg: white;
  --emr-segmented-button-selected-shadow: theme(--shadow-sm);
  --emr-segmented-padding: calc(var(--spacing) * 1);
  --emr-segmented-border-radius: calc(infinity * 1px);
  --emr-segmented-button-border-radius: calc(infinity * 1px);
  --emr-segmented-button-padding: 0 calc(var(--spacing) * 3);
  --emr-segmented-button-min-width: calc(var(--spacing) * 12);
  --emr-segmented-button-font-size: var(--text-tiny);
  --emr-segmented-gap: calc(var(--spacing) * 1);
  --emr-segmented-button-gap: calc(var(--spacing) * 1);
  --emr-segmented-button-icon-offset-margin: -6px;

  &[emr-segmented-size="sm"] {
    --emr-segmented-button-height: calc(calc(var(--spacing) * 10) - calc(var(--spacing) * 2));
    --emr-segmented-button-font-size: var(--text-xs);
    --emr-segmented-button-padding: 0 calc(var(--spacing) * 2);
    --emr-segmented-button-gap: calc(var(--spacing) * 0.5);
  }

  &[emr-segmented-size="lg"] {
    --emr-segmented-button-height: calc(calc(var(--spacing) * 14) - calc(var(--spacing) * 2));
    --emr-segmented-button-font-size: theme(--text-sm);
    --emr-segmented-button-padding: 0 calc(var(--spacing) * 4);
    --emr-segmented-button-gap: calc(var(--spacing) * 1.5);
  }

  display: flex;
  align-items: center;
  user-select: none;
  width: max-content;
  background: var(--emr-segmented-bg);
  padding: var(--emr-segmented-padding);
  border-radius: var(--emr-segmented-border-radius);
  gap: var(--emr-segmented-gap);
}

:host-context(html.dark) {
  --emr-segmented-button-color: var(--color-neutral-300);
  --emr-segmented-button-selected-bg: var(--color-neutral-300);
}
