/**
 * AppBuckets UI
 *
 * _Checkbox @ src/styles/elements/_checkbox.scss
 *
 * Defined at 25 set 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 *
 *
 */
@use 'sass:math';

/******
    Hide the Checkbox
******/
input[type='checkbox'],
input[type='radio'] {
  @include visually-hidden;
}


/******
    Set the Minimum Field Height
******/
.checkbox.field,
.checkbox.field > .wrapper {
  min-height: $checkbox-size;
}


/******
    Set Field Style for RadioGroup
******/
.radio-group {
  &.field > .wrapper > .content {
    margin: $columns-gutter * -1;
    flex-wrap: wrap;

    > .field {
      padding: $columns-gutter;
    }
  }

  &.stacked.field > .wrapper > .content {
    flex-direction: column;
  }
}


/******
    Set the Padding to the content
    to let the checkbox be visible
******/
.checkbox .content,
.radio .content,
.switch .content {
  $__checkbox-field-padding: math.div(($checkbox-size - 1em), 1.5);

  @if strip-unit($__checkbox-field-padding) > 0 {
    padding-top: $__checkbox-field-padding;
    padding-bottom: $__checkbox-field-padding;
  }
}


/******
    Style the Label
******/
.checkbox .content > label,
.radio .content > label,
.switch .content > label {
  // Heads Up! Cursor depends on disabled state
  cursor: default;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  font-weight: $checkbox-label-font-weight;
  vertical-align: baseline;
}


/******
    Draw the Box of the Checkbox
******/
.checkbox .content > label,
.radio .content > label {

  // ----
  //  Set Label Content Padding
  // ----
  > span {
    padding-left: $checkbox-label-padding;
  }


  // ----
  //  Draw the Box
  // ----
  > .checkbox-toggle {
    position: relative;

    height: $checkbox-size;
    width: $checkbox-size;

    border-radius: $checkbox-border-radius;
    background-color: $checkbox-background-color;
    box-shadow: inset 0 0 0 $checkbox-border-width $checkbox-border-color;
    opacity: 1;

    will-change: background-color, box-shadow, opacity;
    transition: background-color $transition-speed-fast $transition-ease,
    box-shadow $transition-speed-fast $transition-ease,
    opacity $transition-speed-fast $transition-ease;

    // ----
    //  Checkmark symbol
    // ----
    > svg.checkbox-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      margin: 0;

      color: inherit;
      opacity: 0;

      will-change: opacity, color;
      transition: opacity $transition-speed-fast $transition-ease,
      color $transition-speed-fast $transition-ease;
    }
  }

}


/******
    Draw the Radio
******/
.radio .content > label {
  // ----
  //  Adjust the Box
  // ----
  > .checkbox-toggle {
    border-radius: 50%;

    // ----
    //  Adjust the symbol
    // ----
    > svg.checkbox-icon {
      transform: translate(-50%, -50%) scale(.75);
      transform-origin: center center;
    }
  }
}


/******
    Draw the Switch
******/
.switch .content > label {

  // ----
  //  Set Label Content Padding
  // ----
  > span {
    padding-left: $checkbox-label-padding;
  }


  // ----
  //  Draw the Rail
  // ----
  > .checkbox-toggle {
    position: relative;

    height: $switch-bullet-size + ($switch-rail-expand-size * 2);
    width: $switch-travel-distance;

    border-radius: $border-radius-rounded;
    background-color: $checkbox-background-color;
    box-shadow: inset 0 0 0 $checkbox-border-width $checkbox-border-color;
    opacity: 1;

    will-change: background-color, box-shadow, opacity;
    transition: background-color $transition-speed-fast $transition-ease,
    box-shadow $transition-speed-fast $transition-ease,
    opacity $transition-speed-fast $transition-ease;

    // ----
    //  Draw the Bullet
    // ----
    &:after {
      position: absolute;
      content: '';
      top: 50%;
      left: $switch-rail-expand-size;
      transform: translateY(-50%);

      height: $switch-bullet-size;
      width: $switch-bullet-size;

      border-radius: $border-radius-rounded;
      background-color: $switch-bullet-background-color;
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);

      will-change: left, box-shadow;
      transition: left $transition-speed-fast $transition-ease,
      box-shadow $transition-speed-fast $transition-ease;
    }
  }

}


/******
    Checked State
******/
.checkbox.field .indeterminate.checkbox + label > .checkbox-toggle {
  background-color: $checkbox-checked-background-color;
  opacity: $checkbox-indeterminate-background-opacity;

  > svg.checkbox-icon {
    color: $checkbox-checked-checkmark-color;
    opacity: 1;
  }
}

.checkbox.field .checked.checkbox + label > .checkbox-toggle,
.radio.field .checked.radio + label > .checkbox-toggle,
.switch.field .checked.switch + label > .checkbox-toggle {
  background-color: $checkbox-checked-background-color;

  > svg.checkbox-icon {
    color: $checkbox-checked-checkmark-color;
    opacity: 1;
  }

  &:after {
    left: $switch-computed-travel-distance;
  }
}


@each $label, $color in $ui-color-map {
  .checkbox.field.is-#{$label} .checked.checkbox + label > .checkbox-toggle,
  .radio.field.is-#{$label} .checked.radio + label > .checkbox-toggle,
  .switch.field.is-#{$label} .checked.switch + label > .checkbox-toggle {
    background-color: $color;
  }
}


/******
    Apply Transition when not disabled
    and some additional style on disabled
    checkbox
******/
.checkbox.field:not(.disabled) .checkbox,
.radio.field:not(.disabled) .radio {
  + label {
    cursor: pointer;
  }

  &:not(.checked) + label {
    @include hover {
      &:hover svg.checkbox-icon {
        opacity: .5;
      }
    }
  }

  &.checked + label {
    @include hover {
      &:hover .checkbox-toggle {
        opacity: .75;
      }
    }
  }
}

.switch.field:not(.disabled) .switch + label {
  cursor: pointer;
}


/******
    Apply Disabled State
******/
.disabled.checkbox.field .content,
.disabled.radio.field .content,
.disabled.switch.field .content {
  opacity: $disabled-element-opacity;
}


/******
    Fix Text Align
******/
.has-text-center > .checkbox.field,
.has-text-center > .radio.field,
.has-text-center > .switch.field {
  text-align: center;

  > .wrapper > .content {
    justify-content: center;
  }
}