@mixin base() { ... }@mixin base() { 
  --right-margin: #{spacing.get('s1')};
  --background-color: #{settings.$view-toggle-container-background-color};
  --item-background-color: #{settings.$view-toggle-item-default-background-color};

  gap: settings.$view-toggle-container-gap;
  border: solid settings.$view-toggle-container-border-width
    settings.$view-toggle-container-border-color;
  border-radius: settings.$view-toggle-container-border-radius;
  background-color: settings.$view-toggle-container-background-color;
  padding: settings.$view-toggle-container-padding;
  display: inline-flex;
  box-sizing: content-box;
  width: max-content;
 }

@mixin item-base() { ... }@mixin item-base() { 
  @include typography.style-as('button-medium');

  --item-text-color: #{settings.$view-toggle-text-color};
  --item-focus-ring-border-color: transparent;

  display: flex;
  position: relative;
  gap: settings.$view-toggle-item-gap;
  align-items: center;

  &:hover {
    --item-background-color: #{settings.$view-toggle-item-hover-background-color};
  }

  &:active {
    --item-background-color: #{settings.$view-toggle-item-pressed-background-color};
  }

  @media (forced-colors: active) {
    &[aria-current='true'] {
      color: LinkText !important;
    }
  }

  &:focus {
    --item-focus-ring-border-color: #{settings.$view-toggle-item-focus-ring-border-color};

    z-index: 1;
  }

  &:focus-visible {
    outline: none;
  }

  :first-of-type {
    margin-left: spacing.get('s1');
  }

  :last-of-type {
    margin-right: spacing.get('s1');
  }

  ::after {
    content: '';
    position: absolute;
    top: settings.$view-toggle-item-focus-ring-border-distance;
    right: settings.$view-toggle-item-focus-ring-border-distance;
    bottom: settings.$view-toggle-item-focus-ring-border-distance;
    left: settings.$view-toggle-item-focus-ring-border-distance;
    border-radius: settings.$view-toggle-container-border-radius;
    border: solid settings.$view-toggle-item-focus-ring-border-width
      var(--item-focus-ring-border-color);
    display: flex;
    color: inherit;
    z-index: -1;
  }

  border: settings.$view-toggle-item-selected-border-width solid
    settings.$view-toggle-item-default-background-color;
  background-color: var(--item-background-color);
  padding: spacing.get('s1');
  padding-right: spacing.get('s1');
  border-radius: settings.$view-toggle-item-border-radius;
  flex-wrap: nowrap;
  flex-shrink: 0;
  cursor: pointer;
 }

@mixin label() { ... }@mixin label() { 
  display: inline-flex;
  vertical-align: middle;
  text-align: left;
 }

@mixin icon() { ... }@mixin icon() { 
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  width: settings.$view-toggle-item-icon-size;
  height: settings.$view-toggle-item-icon-size;

  > svg {
    fill: currentColor;
  }

  > :only-child {
    display: block;
    width: inherit;
    height: inherit;
  }
 }

@mixin hide-label() { ... }@mixin hide-label() { 
  --right-margin: 0;

  padding: unit.rem(4px);
  border-radius: settings.$view-toggle-item-border-radius;

  &::after {
    border-radius: inherit;
  }
 }

@mixin icon-no-labels() { ... }@mixin icon-no-labels() { 
  margin: 0;

  > svg {
    margin: 0;
  }
 }

@mixin visually-hidden() { ... }@mixin visually-hidden() { 
  @include a11y.visually-hidden;
 }

@mixin selected() { ... }@mixin selected() { 
  --item-background-color: #{settings.$view-toggle-item-on-background-color};

  cursor: default;
  border: settings.$view-toggle-item-selected-border-width solid
    settings.$view-toggle-item-selected-border-color;

  &:hover {
    --item-background-color: #{settings.$view-toggle-item-on-background-color};
  }

  &:active {
    --item-background-color: #{settings.$view-toggle-item-on-background-color};
  }
 }

$view-toggle-typography: 'button-medium' !default;

$view-toggle-container-border-color: color.get(
  'action',
  'view-toggle',
  'container',
  'border'
) !default;

$view-toggle-container-gap: unit.rem(2px) !default;

$view-toggle-item-gap: spacing.get('s2') !default;

$view-toggle-container-border-width: unit.rem(1px) !default;

$view-toggle-container-border-radius: border.get('br03') !default;

$view-toggle-container-padding: unit.rem(3px) !default;

$view-toggle-container-background-color: color.get(
  'action',
  'view-toggle',
  'off',
  'default-bg'
) !default;

$view-toggle-item-icon-size: $view-toggle-line-height;

$view-toggle-item-border-radius: border.get('br03') !default;

$view-toggle-item-default-background-color: color.get(
  'action',
  'view-toggle',
  'off',
  'default-bg'
) !default;

$view-toggle-item-hover-background-color: color.get(
  'action',
  'view-toggle',
  'off',
  'hover-bg'
) !default;

$view-toggle-item-pressed-background-color: color.get(
  'action',
  'view-toggle',
  'off',
  'pressed-bg'
) !default;

$view-toggle-item-on-background-color: color.get(
  'action',
  'view-toggle',
  'on',
  'default-bg'
) !default;

$view-toggle-item-selected-border-color: color.get(
  'action',
  'view-toggle',
  'container',
  'border'
) !default;

$view-toggle-item-selected-border-width: unit.rem(1px) !default;

$view-toggle-item-focus-ring-border-color: color.get('text', 'primary') !default;

$view-toggle-item-focus-ring-border-width: unit.rem(2px) !default;

$view-toggle-item-focus-ring-border-distance: unit.rem(-5px) !default;

$view-toggle-text-color: color.get('text', 'primary') !default;

$view-toggle-text-selected-color: color.get('text', 'inverse') !default;