/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-icon-button {
    background-color: transparent;
    cursor: pointer;
    color: inherit;
    position: relative;
    transition-property: box-shadow;
    padding: 0;
    transition-timing-function: cubic-bezier(0.6, 0.2, 0.35, 1);
    transition-duration: 100ms;
  }
  .jkl-icon-button {
    outline: 0;
    border-style: none;
    outline-style: none;
  }
  .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
    outline: 0;
    outline-style: none;
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-button {
      outline: revert;
      border-style: revert;
      outline-style: revert;
    }
    .jkl-icon-button:active, .jkl-icon-button:hover, .jkl-icon-button:focus {
      outline: revert;
      outline-style: revert;
    }
  }
  .jkl-icon-button .jkl-icon {
    display: flex;
    align-items: center;
  }
  .jkl-icon-button .jkl-icon--animated {
    display: revert;
  }
  .jkl-icon-button:focus-visible {
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
  .jkl-icon-button:hover {
    color: var(--jkl-color-text-interactive-hover);
  }
  @media screen and (forced-colors: active) {
    .jkl-icon-button {
      border: none;
      background: none;
    }
  }
}