.cobalt- {
  &CheckmarkField {
    $self: &;
    $radio-checkmark-size: 20px;
    $checkbox-checkmark-size: 18px;

    @apply c-text-base c-text-body-md c-mb-xs;

    position: relative;

    display: block;

    &__Input {
      position: absolute;

      width: 0;
      height: 0;
      margin: 0;
      padding: 0;

      opacity: 0;

      & + #{ $self }__Checkmark {
        @apply c-border-accent c-border-2 c-mr-xs c-transition-colors;
        display: inline-block;

        flex: 0 0 auto;

        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
        cursor: pointer;
      }

      &:not([disabled]) + #{ $self }__Checkmark {
        @apply c-state-interactive;
      }

      &[disabled] ~ .cobalt-CheckmarkField__Label {
        @apply c-text-subdued;
      }
    }

    &__Input[type="radio"] {
      & + #{ $self }__Checkmark {
        position: relative;
        top: 3px;

        display: flex;
        align-items: center;
        justify-content: center;

        width: $radio-checkmark-size;
        height: $radio-checkmark-size;

        @apply c-rounded-full;
      }

      & + #{ $self }__Checkmark::after {
        @apply c-border c-border-accent c-bg-accentAlt c-rounded-full;

        // 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 }__Checkmark::after {
        opacity: 1;

        transform: scale(1);
      }

      &[disabled] + #{ $self }__Checkmark {
        @apply c-border c-border-subdued;

        box-shadow: none;
      }

      &[disabled]:checked ~ #{ $self }__Checkmark::after {
        @apply c-border c-border-subdued c-bg-disabled;
      }
    }

    &__Input[type="checkbox"] {
      & + #{ $self }__Checkmark {
        position: relative;

        top: 4px;

        width: $checkbox-checkmark-size;
        height: $checkbox-checkmark-size;

        border-radius: 2px;

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

      & + #{ $self }__Checkmark:after {
        position: absolute;

        display: none;

        content: "";
      }

      &:checked + #{ $self }__Checkmark {
        @apply c-bg-accent;
        will-change: background-color;
      }

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

        display: block;

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

        transform: rotate(45deg);
      }

      &[disabled] + #{ $self }__Checkmark {
        @apply c-border c-border-subdued;

        box-shadow: none;
      }

      &[disabled]:checked + #{ $self }__Checkmark {
        @apply c-bg-disabled;
      }
    }

    &__LabelWrapper {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;

      cursor: pointer;
    }

    &__Label {
      display: inline-block;
    }

    &--error {
      #{ $self }__Input + #{ $self }__Checkmark {
        @apply c-border-2 c-border-error;
      }

      #{ $self }__Input[type="radio"]:checked + #{ $self }__Checkmark::after {
        @apply c-border c-border-error c-bg-error;
      }

      #{ $self }__Input[type="checkbox"]:checked + #{ $self }__Checkmark {
        @apply c-bg-error;
      }
    }
  }

  &ChoiceList {
    @include form-field-container;

    .cobalt-Hint {
      @apply c-mt-xs c-mr-none c-mb-none c-ml-md;
    }
  }
}