$custom-control-indicator-active-bg: lighten($component-active-bg, 25%);

.nice-radio,
.nice-checkbox {
  display: block;
  position: relative;
  min-height: (1em * $line-height-base);
  padding-left: $custom-control-gutter;

  > input {
    position: absolute;
    z-index: -1; // Put the input behind the label so it doesn't overlay text
    opacity: 0;

    &:checked ~ label::before {
      color: $custom-control-indicator-checked-color;
      @include gradient-bg($custom-control-indicator-checked-bg);
      @include box-shadow($custom-control-indicator-checked-box-shadow);
    }

    &:focus ~ label::before {
      box-shadow: $custom-control-indicator-focus-box-shadow;
    }

    &:active ~ label::before {
      color: $custom-control-indicator-active-color;
      background-color: $custom-control-indicator-active-bg;
      @include box-shadow($custom-control-indicator-active-box-shadow);
    }

    &:disabled {
      ~ label {
        color: $custom-control-label-disabled-color;

        &::before {
          background-color: $custom-control-indicator-disabled-bg;
        }
      }
    }
  }

  > label {
    line-height: 1;
    margin-bottom: 0;
    position: relative;

    // Background-color and (when enabled) gradient
    &::before {
      position: absolute;
      top: ((1 - $custom-control-indicator-size) / 2);
      left: -$custom-control-gutter;
      display: block;
      width: $custom-control-indicator-size;
      height: $custom-control-indicator-size;
      pointer-events: none;
      content: "";
      user-select: none;
      background-color: $custom-control-indicator-bg;
      @include box-shadow($custom-control-indicator-box-shadow);
    }

    // Foreground (icon)
    &::after {
      position: absolute;
      top: ((1 - $custom-control-indicator-size) / 2);
      left: -$custom-control-gutter;
      display: block;
      width: $custom-control-indicator-size;
      height: $custom-control-indicator-size;
      content: "";
      background-repeat: no-repeat;
      background-position: center center;
      background-size: $custom-control-indicator-bg-size;
    }
  }
}

.nice-radio {
  > label::before {
    border-radius: $custom-radio-indicator-border-radius;
  }

  > input:checked ~ label {
    &::before {
      @include gradient-bg($custom-control-indicator-checked-bg);
    }

    &::after {
      background-image: $custom-radio-indicator-icon-checked;
    }
  }

  > input:disabled {
    &:checked ~ label::before {
      background-color: $custom-control-indicator-checked-disabled-bg;
    }
  }
}

.nice-checkbox {
  label::before {
    @include border-radius($custom-checkbox-indicator-border-radius);
  }

  > input:checked ~ label {
    &::before {
      @include gradient-bg($custom-control-indicator-checked-bg);
    }

    &::after {
      background-image: $custom-checkbox-indicator-icon-checked;
    }
  }

  > input:indeterminate ~ label {
    &::before {
      @include gradient-bg($custom-checkbox-indicator-indeterminate-bg);
      @include box-shadow($custom-checkbox-indicator-indeterminate-box-shadow);
    }

    &::after {
      background-image: $custom-checkbox-indicator-icon-indeterminate;
    }
  }

  > input:disabled {
    &:checked ~ label::before {
      background-color: $custom-control-indicator-checked-disabled-bg;
    }

    &:indeterminate ~ label::before {
      background-color: $custom-control-indicator-checked-disabled-bg;
    }
  }
}