/**
 * Do not edit directly, this file was auto-generated.
 */
@layer jokul.components {
  .jkl-feedback {
    max-width: 34.375rem;
  }
  .jkl-feedback__submit-wrapper {
    width: 100%;
    transition-property: height;
    transition-timing-function: ease;
    transition-duration: 250ms;
  }
  .jkl-feedback__submit-wrapper--hidden {
    display: none;
  }
  .jkl-feedback__step-counter {
    color: var(--jkl-color-text-subdued);
    margin-bottom: var(--jkl-unit-20);
    font-size: var(--jkl-font-size-2);
    line-height: var(--jkl-line-height-relaxed);
    font-weight: 400;
    --jkl-icon-weight: 300;
    --jkl-icon-size: 1.2em;
  }
  .jkl-feedback__fade-in {
    animation: jkl-show-uxpbug4 0.25s ease-out;
  }
  .jkl-feedback__buttons {
    display: flex;
  }
  @keyframes jkl-show-uxpbug4 {
    from {
      transform: translate3d(0, 0.5rem, 0);
      opacity: 0;
    }
  }
  .jkl-feedback-smileys {
    margin-top: var(--jkl-unit-10);
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 22.5rem;
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
  .jkl-feedback-smiley-option {
    display: inline-block;
    position: relative;
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
    color: var(--jkl-color-text-subdued);
    transform: translate3d(0, 0, 0);
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: transform, color;
  }
  @media screen and (forced-colors: active) {
    .jkl-feedback-smiley-option {
      stroke: ButtonFace;
      fill: ButtonText;
    }
    .jkl-feedback-smiley-option svg, .jkl-feedback-smiley-option path {
      stroke: ButtonFace;
      fill: ButtonText;
    }
  }
  .jkl-feedback-smiley-option::before, .jkl-feedback-smiley-option::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    transition-timing-function: ease;
    transition-duration: 150ms;
    transition-property: opacity;
  }
  .jkl-feedback-smiley-option::before {
    inset: 0;
    box-shadow: 0 0.125rem 1.875rem rgba(0, 0, 0, 0.1);
  }
  .jkl-feedback-smiley-option:hover {
    color: var(--jkl-color-text-default);
  }
  input:checked + .jkl-feedback-smiley-option {
    color: var(--jkl-color-text-default);
    transform: translate3d(0, -20%, 0);
  }
  input:checked + .jkl-feedback-smiley-option::before {
    opacity: 1;
  }
  input:focus-visible + .jkl-feedback-smiley-option {
    border-radius: var(--jkl-border-radius-full);
    outline: 3px solid var(--jkl-color-border-action);
    outline-offset: 3px;
  }
}