@layer components.root {
  :where(.icon-button) {
    --_text-color: inherit;

    align-items: center;
    aspect-ratio: 1;
    background-color: transparent;
    border: 0;
    border-radius: var(--radius-round);
    display: inline-flex;
    inline-size: var(--size-6);
    justify-content: center;
    padding: 0;
    transform-style: preserve-3d;

    &:where([disabled]) {
      color: light-dark(rgb(0, 0, 0/0.3), rgb(255, 255, 255/0.26));
      cursor: not-allowed;
      opacity: 0.64;
    }

    svg {
      max-inline-size: var(--size-5);
      pointer-events: none;
    }

    /* Ripple effect, utils.css */
    &::before {
      --highlight-size: 130%;
    }

    /* Size */
    &.small {
      inline-size: var(--size-4);
      svg {
        max-inline-size: var(--size-4);
      }
    }
  }
}