@import "settings";
@import "foundation-sites/scss/forms/forms";

/// Flag whether or not you want to include bonsai select components
/// @type Bool
$bonsai-include-option-sets: $bonsai-include-components !default;

/// Line height for checkboxes and radio buttons
/// @type Number
$bonsai-option-set-line-height: 1.6 !default;

/// Base styling for checkboxes and radio buttons
///
/// @param {String} $type - Type of option set styling to create, radio or checkboxes
@mixin option-set($type) {
  .switch label::before {
    visibility: hidden;
  }

  input[type="#{$type}"] {
    @extend .show-for-sr;

    $size-of-selection-box: 0.875rem + rem-calc(2px);
    $size-of-selection-box-with-padding: rem-calc($bonsai-spacing-base * 6);

    & + label {
      @extend .normal-weight;

      margin-left: 0;
      margin-bottom: $bonsai-spacing-base * 2;
      padding-left: $size-of-selection-box-with-padding;
      display: block;

      @if $type == "checkbox" or $type == "radio" {
        line-height: $bonsai-option-set-line-height;
      }
    }

    & + label::before {
      @extend .txtc;
      @extend .txtm;
      @extend .inline-block;

      position: relative;
      left: -1 * $size-of-selection-box-with-padding;
      content: "";
      width: $size-of-selection-box;
      height: $size-of-selection-box;
      padding-top: 1px;
      background-color: $bonsai-white;
      border: $bonsai-standard-border;
      margin-right: -1 * $size-of-selection-box;

      @if $type == "checkbox" {
        border-radius: 2px;
      }

      @else if $type == "radio" {
        border-radius: 50%;
      }
    }

    &:hover + label::before {
      border-color: $bonsai-hover;
      background-color: $bonsai-hover-background;
    }

    &:focus + label::before {
      border: 1px solid $bonsai-focus;
      box-shadow: 0 0 4px 1px $bonsai-focus;
    }

    &:checked + label::before {
      @include fa-icon;
      @include small;

      border: 1px solid $bonsai-active;

      @if $type == "checkbox" {
        background-color: $bonsai-active;
        content: $fa-var-check;
        color: $bonsai-white;
      }

      @else if $type == "radio" {
        content: $fa-var-circle;
        color: $bonsai-active;
      }
    }

    &:checked:not([readonly]):not(:disabled):hover + label::before {
      border-color: $bonsai-hover;

      @if $type == "checkbox" {
        background-color: $bonsai-hover;
      }

      @else if $type == "radio" {
        color: $bonsai-hover;
      }
    }

    &:disabled + label,
    &[readonly] + label {
      cursor: not-allowed;
      color: $bonsai-dark-gray;

      &::before {
        border-color: $bonsai-light-gray;
        background-color: $bonsai-very-light-gray;
        color: $bonsai-very-dark-gray;
      }
    }

    &.input-error:not(:checked) {
      &:focus:not(:hover) + label::before {
        box-shadow: 0 0 4px 1px $bonsai-alert;
      }

      & + label {
        color: $bonsai-alert;

        &:not(:hover)::before {
          border-color: $bonsai-alert;
        }
      }
    }
  }
}

/// Creates the checkbox styling from the base option set
@mixin checkboxes {
  @include option-set("checkbox");
}

/// Creates the radio styling from the base option set
@mixin radio-buttons {
  @include option-set("radio");
}

/// Gateway mixin for bonsai checkboxes and radio buttons
@mixin bonsai-option-sets {
  @if $bonsai-include-option-sets {
    @include checkboxes;
    @include radio-buttons;
  }
}