@layer components {
  @scope (.scope.button) to (.scope) {
    :scope {
      --_background-color: var(--color-accent);
      --_border-color: transparent;
      --_text-color: var(--color-white);
      --_icon-size: calc(24 * var(--px-to-rem));
      align-items: center;
      background: var(--_background-color);
      border: 1px solid var(--_border-color);
      border-radius: 9999px;
      color: var(--_text-color);
      display: block;
      font-size: var(--font-size-200);
      font-weight: var(--font-weight-medium);
      line-height: 1;
      padding: calc(16 * var(--px-to-rem)) calc(40 * var(--px-to-rem));
      text-align: center;
      transition-duration: var(--duration-default);
      transition-property: background, border-color, color, scale;
      transition-timing-function: var(--ease-custom);
      width: max-content;
    }

    :scope:where([data-inverted='true']) {
      --_background-color: var(--color-white);
      --_text-color: var(--color-accent);
    }

    :scope:where([data-outlined='true']) {
      --_background-color: transparent;
      --_border-color: currentColor;
      --_text-color: var(--color-accent);
    }

    :scope:where([data-inverted='true'][data-outlined='true']) {
      --_background-color: transparent;
      --_border-color: var(--color-white);
      --_text-color: var(--color-white);
    }

    :scope:where([data-icon='true']) {
      display: grid;
      gap: calc(16 * var(--px-to-rem));
      grid-template-columns: auto var(--_icon-size);
      justify-content: center;
    }

    :scope:where([data-icon='true'])::after {
      aspect-ratio: 1 / 1;
      background: currentColor;
      content: '';
      mask-image: url('data:image/svg+xml;utf-8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17.0788 12.5H5V11.5H17.0788L11.2865 5.70775L12 5L19 12L12 19L11.2865 18.2923L17.0788 12.5Z" /></svg>');
      mask-position: center center;
      mask-repeat: no-repeat;
      mask-size: cover;
    }

    :scope:active {
      scale: 0.95;
    }

    @media (hover: hover) and (pointer: fine) {
      &:not([data-inverted='true'], [data-outlined='true']):hover {
        --_background-color: transparent;
        --_border-color: currentColor;
        --_text-color: var(--color-accent);
      }

      &:where([data-inverted='true']):hover {
        --_background-color: transparent;
        --_border-color: var(--color-white);
        --_text-color: var(--color-white);
      }

      &:where([data-outlined='true']):hover {
        --_background-color: var(--color-accent);
        --_border-color: var(--color-accent);
        --_text-color: var(--color-white);
      }

      &:where([data-inverted='true'][data-outlined='true']):hover {
        --_background-color: var(--color-white);
        --_border-color: var(--color-white);
        --_text-color: var(--color-accent);
      }
    }

    @media (width <= 767px) {
      :scope {
        width: 100%;
      }
    }
  }
}