
// @require core/widget/widget.scss
// @require widgets/icon/icon.scss

/* CHECKBOX */

input[type="checkbox"] {

  display: none !important;

  /* LABEL */

  + label {

    min-height: 1em * $icon-scale-factor;
    min-width: 1em * $icon-scale-factor;
    flex-grow: 1;
    cursor: pointer;

    /* BEFORE / AFTER */

    &:before,
    &:after {
      @extend %icon-base;
      position: absolute;
      top: 0;
      transition: opacity $checkbox-icon-animation-duration;
    }

    /* BEFORE */

    &:before {
      content: $checkbox-icon-off;
      color: $checkbox-icon-off-color;
      opacity: 1;
    }

    /* AFTER */

    &:after {
      content: $checkbox-icon-on;
      color: $checkbox-icon-on-color;
      opacity: 0;
      z-index: 1;
    }

    /* CUSTOM BEFORE / AFTER */

    &[data-icon-off]:before {
      content: attr(data-icon-off);
    }

    &[data-icon-on]:after {
      content: attr(data-icon-on);
    }

  }

  /* CHECKED LABEL */

  &:checked + label {

    /* BEFORE */

    &:before {
      opacity: 0;
    }

    /* AFTER */

    &:after {
      opacity: 1;
    }

  }

}

/* WRAPPER */

.checkbox {
  @extend %widget;
  cursor: pointer;
  position: relative;
}
