.selection-control--checkbox {
  svg {
    margin-top: -($baseline * 0.1);
    opacity: 0;
  }

  polyline {
    fill: transparent;
    stroke: $color-brand--white;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2px;
    transition: stroke-dashoffset $transition-duration--slow ease;
  }

  input:checked + .selection-control__control {
    @include form-field--checked-field-color;
    svg {
      opacity: 1;
    }

    polyline {
      stroke-dashoffset: 0;
    }
  }

  input:checked:focus + .selection-control__control,
  input:checked:hover + .selection-control__control {
    @include form-field--checked-active-color;
  }

  a {
    text-decoration: $forms-link-text-decoration;
    -webkit-text-decoration: $forms-link-text-decoration;
  }
}

// indeterminate
.selection-control--indeterminate {
  input + .selection-control__control svg {
    opacity: 0;
    transform: rotate(-180deg);
    transition: transform $transition-duration ease-out;
  }

  .selection-control__control {
    @include form-field--checked-field-color;
  }
  // add animation when checked
  &--animate input + .selection-control__control svg {
    opacity: 1;
    transform: rotate(0);
    transition: transform $transition-duration ease-out;
  }

  input:focus + .selection-control__control,
  input:hover + .selection-control__control {
    @include form-field--checked-active-color;
  }

  .selection-control__control--indeterminate {
    background: $color--white;
    border-radius: 1.5px;
    height: 3px;
    left: 4px;
    pointer-events: none;
    top: $baseline * 1.1;
    width: 16px;

    @include viewport--l {
      bottom: $baseline * 1.3;
    }
  }
}

// read only
.selection-control--checkbox.selection-control--disabled {
  .selection-control__control {
    @include form-field--disabled-idle;
  }

  input:checked + .selection-control__control {
    @include form-field--disabled-checked;
  }

  &.selection-control--indeterminate {
    .selection-control__control {
      @include form-field--disabled-indeterminate;
    }
  }
}