@layer components {
  /*
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
   🅲🅻🅾🆂🅴 🅱🆄🆃🆃🅾🅽
  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
  - https://www.benjystanton.co.uk/blog/accessible-close-buttons/
  */

  .l-close {
    --size: 36px;
    --icon-color: var(--l-color-text-primary);
    --icon-size: 24px;

    display: grid;
    place-items: center;
    width: var(--size);
    height: var(--size);
    aspect-ratio: 1;
    cursor: pointer;

    &:focus-visible {
      outline: 2px solid var(--l-focus-ring);
      outline-offset: 2px;
    }

    /*
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
     🆄🅸: close icon
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    */

    &::after {
      content: '';
      display: block;
      height: var(--icon-size);
      width: var(--icon-size);
      background-color: var(--icon-color);
      /* https://pictogrammers.com/library/mdi/icon/close */
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')
        center no-repeat;
    }
  }
}

@layer components {
  .l-close:not([data-appearance]),
  .l-close[data-appearance='ring'] {
    --ring-color: var(--l-color-border-interactive);
    --ring-tickness: 0.25rem;

    /* Private custom properties */
    --_ring-tickness: 0;
    --_ring-color: var(--ring-color);

    border-radius: var(--l-radius-full);
    box-shadow: 0 0 0 var(--_ring-tickness) var(--_ring-color);

    &:hover {
      --_ring-tickness: var(--ring-tickness);

      @media (prefers-reduced-motion: no-preference) {
        transition-duration: 250ms;
      }
    }

    &:active {
      --_ring-color: --darken(var(--ring-color), 5%);
      --_ring-tickness: calc(var(--ring-tickness) * 0.6);
    }
  }
}