@import "./form";

.cobalt-radio-with-details {
  $self: &;

  @include with-details-base($self);

  #{ $self }__input {
    & + #{ $self }__inner #{ $self }__visual-input {
      @apply c-rounded-full;
    }

    & + #{ $self }__inner #{ $self }__visual-input::after {
      @apply c-border c-border-onPrimaryContainer c-bg-primaryContainer c-rounded-full;
      left: 2px;
      top: 2px;

      // Exception for radio inputs
      border-width: 5px;

      content: "";
      opacity: 0;

      transition: transform 120ms ease-in-out;
      transform: scale(0.4);
      will-change: transform;
    }

    &:checked + #{ $self }__inner #{ $self }__visual-input::after {
      @apply c-border-onPrimaryContainer;

      opacity: 1;

      transform: scale(1);
    }
  }
}