.sui-a-form-check {
  position: relative;
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  margin-bottom: $sui-space-sm;
  font-size: $sui-font-size-md;
  font-weight: normal;

  &::before {
    content: '';
    position: absolute;
    top: rem(-5);
    left: rem(-5);
    right: rem(-5);
    bottom: rem(-5);
  }

  &.as--inline {
    display: inline-flex;
    margin-right: $sui-space-lg;
    vertical-align: top;
  }

  &.as--indicator-center {
    align-items: center;
  }

  input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  // -------------------------
  // Indicator
  // -------------------------
  input[type="radio"] ~ &__indicator::before {
    border-radius: $sui-border-radius-rounded;
  }

  &__indicator {
    z-index: 2;
    cursor: pointer;
    position: relative;
    flex: none;
    font-size: 1.25rem;
    width: rem(20);
    min-height: $sui-line-height * rem(15);
    line-height: 1rem;
    color: $sui-color-brand-denim-100;

    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: block;
      width: rem(20);
      height: rem(20);
      border-radius: $sui-border-radius-md;
      background: $sui-color-brand-denim-200;
      border: $sui-size-border solid $sui-color-border;
      transition: .2s;
    }

    &::after {
      content: '';
      position: absolute;
      border: rem(2) solid;
      border-top: none;
      border-left: none;
      margin-left: rem(-4);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) rotate(45deg);
      transform-origin: bottom right;
      opacity: 0;
      transition: .2s;
      width: rem(6);
      height: rem(10);
    }
  }

  // -------------------------
  // Label
  // -------------------------
  &__label {
    z-index: 1;
    position: relative;
    min-width: 0;
    padding-left: rem(16);
    transition: .2s;
  }

  // -------------------------
  // Checked
  // -------------------------
  input:checked ~ &__indicator {
    &::before {
      background: $sui-color-primary;
      border-color: $sui-color-primary;
    }

    &::after {
      opacity: 1;
    }
  }

  // -------------------------
  //    Checkbox indeterminate
  // -------------------------
  input[type="checkbox"]:indeterminate ~ &__indicator {
    &::before {
      background: $sui-color-primary;
      border-color: $sui-color-primary;
    }

    &::after {
      opacity: 1;
      border-right: none;
      transform: none;
      width: rem(8);
      height: 0;
    }
  }

  // -------------------------
  // Hover
  // -------------------------
  input:not(:disabled):hover ~ &__indicator::before {
    border-color: $sui-color-primary;
  }

  // -------------------------
  //    Focus
  // -------------------------
  input:not(:disabled):focus ~ &__indicator::before,
  input:not(:disabled):focus:hover ~ &__indicator::before {
    @include suiFocusEffect();
  }

  &.as--toggle input:not(:disabled):focus ~ &__indicator::before {
    box-shadow: none;
  }

  &.as--toggle input:not(:disabled):focus ~ &__indicator {
    @include suiFocusEffect();
  }

  // -------------------------
  // Disabled
  // -------------------------
  input:disabled ~ &__indicator {
    opacity: .4;
    cursor: not-allowed;
  }

  input:disabled ~ &__label {
    opacity: .7;
  }

  // -------------------------
  // Toggle
  // -------------------------
  &.as--toggle &__indicator {
    position: relative;
    height: rem(20);
    width: rem(60);
    border-radius: $sui-border-radius-rounded;
    border: $sui-size-border solid $sui-color-border;
    background-color: $sui-color-brand-denim-200;

    // "x" icon
    &::before {
      content: '\0000D7';
      position: absolute;
      left: rem(38);
      top: rem(1);
      color: $sui-color-brand-denim-500;
      width: 0;
      height: 0;
      border: none;
      transition: none;
      background: none;
      border-radius: 0;
    }

    // Thumb
    &::after {
      content: '';
      position: absolute;
      left: rem(2);
      top: rem(2);
      border: $sui-size-border solid darken($sui-color-border, 5%);
      height: rem(17);
      width: rem(27);
      background-color: $sui-color-brand-denim-100;
      border-radius: rem(20);
      margin-left: 0;
      transform: none;
      opacity: 1;
    }
  }

  &.as--toggle input:checked ~ &__indicator {
    background-color: $sui-color-primary;
    border-color: transparent;

    // Check icon
    &::before {
      content: '';
      top: rem(4);
      left: rem(14);
      width: rem(6);
      height: rem(10);
      background-color: $sui-color-primary;
      border-radius: unset;
      border: solid #fff;
      border-width: 0 rem(2) rem(2) 0;
      transform: rotate(45deg);
    }

    // Thumb
    &::after {
      border: none;
      background-color: $sui-color-brand-denim-100;
      transform: translateX(100%);
    }
  }

  // -------------------------
  //    Button (and button light) style
  // -------------------------
  &.as--button,
  &.as--button-light,
  &.as--button-denim-300 {
    display: inline-flex;
    align-items: center;
    margin-right: $sui-space-sm;
  }

  &.as--button &__indicator,
  &.as--button-light &__indicator,
  &.as--button-denim-300 &__indicator {
    margin-right: rem(-20);
    margin-left: $sui-space-sm;
  }

  &.as--button &__label,
  &.as--button-light &__label,
  &.as--button-denim-300 &__label {
    @include suiButtonBase();

    display: inline-block;
    text-align: left;
    margin-left: -$sui-space-sm;
    padding-left: $sui-space-sm + $sui-space-md + 1rem;
  }

  &.as--button &__label {
    @include suiButtonColor(
      $color: $sui-color-text,
      $background: white,
      $background-hover: white,
      $border-color: $sui-color-border,
      $border-color-hover: $sui-color-primary
    );
  }

  &.as--button-light &__label,
  &.as--button-denim-300 &__label {
    @include suiButtonColor(
      $color: $sui-color-text,
      $background: white,
      $background-hover: white,
      $border-color: $sui-color-border,
      $border-color-hover: $sui-color-primary
    );
  }

  &.as--button input:checked ~ &__label {
    @include suiButtonColor($background: $sui-color-primary);
  }

  &.as--button input:checked:not(:disabled) ~ &__indicator {
    color: $sui-color-primary;

    &::before {
      background: $sui-color-brand-denim-100;
    }
  }

  &.as--button input:not(:disabled):focus ~ &__indicator::before,
  &.as--button input:not(:disabled):focus:hover ~ &__indicator::before {
    box-shadow: none;
  }

  // Button checked
  &.as--button input:checked:not(:disabled):hover:focus ~ &__indicator,
  &.as--button input:checked:not(:disabled):focus ~ &__indicator {
    &::before {
      border-color: transparent;
    }
  }

  // Button light checked
  &.as--button-light input:checked:not(:disabled) ~ &__indicator {
    color: $sui-color-brand-denim-100;

    &::before {
      background: $sui-color-primary;
    }
  }

  // Button denim 300 checked
  &.as--button-denim-300 input:checked ~ &__label {
    @include suiButtonColor(
      $color: #263d5c,
      $background: $sui-color-brand-denim-300,
      $border-color: $sui-color-brand-denim-300
    );
  }

  &.as--button-denim-300 input:checked:not(:disabled) ~ &__indicator {
    color: #263d5c;

    &::before {
      background: white;
    }
  }

  &.as--button input:not(:disabled):hover:focus ~ &__label,
  &.as--button input:not(:disabled):focus ~ &__label,
  &.as--button-light input:not(:disabled):hover:focus ~ &__label,
  &.as--button-light input:not(:disabled):focus ~ &__label,
  &.as--button-denim-300 input:not(:disabled):hover:focus ~ &__label,
  &.as--button-denim-300 input:not(:disabled):focus ~ &__label {
    @include suiFocusEffect();
  }

  &.as--button input:checked:disabled ~ &__label,
  &.as--button input:disabled ~ &__label,
  &.as--button-light input:checked:disabled ~ &__label,
  &.as--button-light input:disabled ~ &__label,
  &.as--button-denim-300 input:checked:disabled ~ &__label,
  &.as--button-denim-300 input:disabled ~ &__label {
    @include suiButtonDisabled();
  }

  // -------------------------
  //    Validations states
  // -------------------------
  // Danger
  .sui-m-form-group.as--danger &__label,
  &.as--danger &__label {
    color: $sui-color-danger-text;
  }

  .sui-m-form-group.as--danger &.as--button input:checked:not(:disabled) ~ &__indicator,
  &.as--button.as--danger input:checked:not(:disabled) ~ &__indicator {
    color: $sui-color-danger;
  }

  // Warning
  .sui-m-form-group.as--warning &__label,
  &.as--warning &__label {
    color: $sui-color-warning-text;
  }

  .sui-m-form-group.as--warning &.as--button input:checked:not(:disabled) ~ &__indicator,
  &.as--button.as--warning input:checked:not(:disabled) ~ &__indicator {
    color: $sui-color-warning;
  }

  // Success
  .sui-m-form-group.as--success &__label,
  &.as--success &__label {
    color: $sui-color-success-text;
  }

  .sui-m-form-group.as--success &.as--button input:checked:not(:disabled) ~ &__indicator,
  &.as--button.as--success input:checked:not(:disabled) ~ &__indicator {
    color: $sui-color-success;
  }
}