@import "./form";

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

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

  #{ $self }__input {
    & + #{ $self }__inner #{ $self }__visual-input {
      border-radius: 2px;

      transition: background-color 120ms ease-in-out;
    }

    &:checked + #{ $self }__inner #{ $self }__visual-input {
      @apply c-bg-onPrimaryContainer;
      will-change: background-color;
    }

    & + #{ $self }__inner #{ $self }__visual-input::after {
      position: absolute;

      display: none;

      content: "";
    }

    &:checked + #{ $self }__inner #{ $self }__visual-input::after {
      top: -1px;
      left: 4px;

      display: block;

      width: 5px;
      height: 10px;
      border: solid;
      border-color: white;
      border-width: 0 2px 2px 0;

      transform: rotate(45deg);
    }
  }
}