/* ===================================================
/* FORM (CHECKBOXES)
/* ===================================================

// ====================================
// MIXINS
// ====================================
=create-checkbox($size: $checkbox-size)
  display: flex
  align-items: center
  cursor: pointer
  // Elements
  &-toggle
    display: none
    opacity: 0
    // Pseudo
    &:checked + .checkbox-icon
      border-color: map-get($color-map, primary)
      transform: scale(1.1)
      transition: all 0.2s ease-in
      // Pseudo
      &::after
        background: map-get($color-map, primary)
        transition: all 0.2s ease-in
    &:disabled + .checkbox-icon
      cursor: not-allowed
      user-select: none
      opacity: $opacity-muted
    &:disabled ~ span
      cursor: not-allowed
      user-select: none
      opacity: $opacity-muted
  &-icon
    position: relative
    display: inline-flex
    align-items: center
    width: $size
    height: $size
    margin-right: 1.5rem
    padding: 0.5rem
    border: 2px solid $checkbox-border-color
    // Pseudo
    &::after
      content: ''
      position: absolute
      top: calc(50% - #{$size} / 4)
      left: calc(50% - #{$size} / 4)
      width: $size / 2
      height: $size / 2
  // Modifiers
  &.make-inline
    display: inline-flex
    // Elements
    & > span
      margin-right: 1.5rem

// ====================================
// CHECKBOX
// ====================================
.checkbox
  +create-checkbox