@layer components {
  .action-icon {
    color: var(--color-white);
  }

  .action-icon:hover {
    color: var(--color-gray-200);
  }

  .action-icon:focus-visible {
    outline: none;
  }

  .action-icon__image {
    width: 1.5rem;
    height: 1.5rem;
  }

  .action-icon:focus-visible .action-icon__image {
    outline: var(--focus-ring-size) solid var(--color-white);
    outline-offset: var(--focus-ring-offset);
  }
}