.cobalt-rating,
.cobalt-rating-input {
  display: flex;

  align-items: center;

  pointer-events: none;

  gap: 4px;
}

.cobalt-rating__label {
  @apply c-text-subdued;
  line-height: 14px;
  font-size: 14px;
}

.cobalt-rating-input {
  &--disabled {
    opacity: 0.5;
  }

  &:not(.cobalt-rating-input--disabled) .cobalt-rating-icons {
    pointer-events: initial;
  }
}

.cobalt-rating-icons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  pointer-events: none;

  * {
    -webkit-tap-highlight-color: transparent;
  }

  &--icon-size-48 .cobalt-Icon {
    @apply c-h-xl c-w-xl;
  }

  &__icon-wrapper {
    position: relative;

    display: inline-block;

    line-height: 0;

    cursor: pointer;
  }

  &__icon-wrapper input {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;

    opacity: 0;
  }

  &__icon-wrapper * {
    pointer-events: none;
  }

  &__icon-half-container {
    position: absolute;

    top: 0;
    left: 0;

    width: calc(50%);

    overflow: hidden;
  }

  &__icon-half-container .cobalt-Icon {
    max-width: none;
  }

  &:not(:hover):not(:focus-visible) input:focus {
    // focus feedback with keyboard navigation only
    & + .cobalt-Icon {
      @apply c-border c-border-accent;
      border-radius: theme("spacing.2xs");
    }
  }

  /* stylelint-disable order/order */
  @media (hover: hover) {
    // desktop animation only
    &__icon-wrapper--selected {
      input:checked:focus + .cobalt-Icon {
        transform: scale(1) !important;
      }
    }

    &__icon-wrapper:hover {
      .cobalt-Icon {
        transform: scale(1.2);
      }
    }

    &:not(:hover)
      &__icon-wrapper:not(:hover):not(:focus-visible)
      input:focus:checked {
      // focus feedback with keyboard navigation only
      & + .cobalt-Icon {
        animation: rating-pop--keyboard 0.3s ease 1;
      }
    }
  }

  @media (hover: none) {
    // mobile selection feedback
    &__icon-wrapper input:checked {
      & + .cobalt-Icon {
        animation: rating-pop--mobile 0.3s ease 1;
      }
    }
  }
}

@keyframes rating-pop--keyboard {
  0% {
    transform: scale(1.2);
  }
}

@keyframes rating-pop--mobile {
  0% {
    transform: scale(1.5);
  }
}