@use '../abstract' as *;
.toggle-button {
  --p-icon-toggle-bg-color: var(--color-neutral-0);
  --p-icon-toggle-border-color: var(--color-neutral-15);

  --p-icon-text-color: var(--p-icon-text-color-default);
  --p-icon-text-color-default: var(--color-neutral-60);
  --p-icon-text-color-didabled: var(--color-neutral-20);

  --p-button-color: var(--p-button-color-default);
  --p-button-color-default: var(--transparent);
  --p-button-color-selected: var(--color-neutral-10);

  background-color: hsl(var(--p-icon-toggle-bg-color));
  &-list {
    display:flex; gap:pxToRem(8); padding:pxToRem(2);
    border:solid pxToRem(1) hsl(var(--p-icon-toggle-border-color)); border-radius:var(--border-radius-xsmall);
  }
  &-item {}
  &-element {
    display:grid; place-content:center;
    inline-size:pxToRem(36); block-size:pxToRem(36);
    background-color:hsl(var(--p-button-color)); color:hsl(var(--p-icon-text-color)); border-radius:var(--border-radius-xsmall);
    &.is-selected { --p-button-color: var(--p-button-color-selected); }
    &#{$disabled} {
      --p-icon-text-color: var(--p-icon-text-color-didabled);
      cursor: initial;
    }
  }

  #{$theme-dark} & {
    --p-icon-toggle-bg-color: var(--color-neutral-90);
    --p-icon-toggle-border-color: var(--color-neutral-80);

    --p-icon-text-color-default: var(--color-neutral-20);
    --p-icon-text-color-didabled: var(--color-neutral-70);

    --p-button-color-selected: var(--color-neutral-80);
  }
}