@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='circle'] {
    --size: 44px;
    --background-color: light-dark(var(--l-color-gray-100), var(--l-color-gray-700));
    --background-color-hover: light-dark(var(--l-color-gray-200), var(--l-color-gray-600));

    border-radius: var(--l-radius-full);
    background-color: var(--background-color);

    transition-property: background-color;
    transition-duration: 150ms;

    &:hover {
      background-color: var(--background-color-hover);
    }

    &:active {
      background-color: color-mix(in oklab, var(--background-color-hover) 80%, black);
    }
  }
}