/*! _checkboxes.scss | Friendkit | © Css Ninja. 2020-2021 */

/* ==========================================================================
Checkboxes styles
========================================================================== */

/*
    1. Round Checkboxes
    2. Basic checkbox
*/

/* ==========================================================================
1. Round Checkboxes
========================================================================== */

.round-checkbox {
  position: relative;

  > div {
    display: flex;
    align-items: center;
  }

  label {
    background-color: $white;
    border: 1px solid #ccc;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
    transition: all 0.3s;

    &:after {
      border: 2px solid $white;
      border-top: none;
      border-right: none;
      content: '';
      height: 6px;
      left: 7px;
      opacity: 0;
      position: absolute;
      top: 8px;
      transform: rotate(-45deg);
      width: 12px;
    }
  }

  input[type='checkbox'] {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
  }

  input[type='checkbox']:checked + label {
    background-color: $accent;
    border-color: $accent;
  }

  input[type='checkbox']:checked + label:after {
    opacity: 1;
  }

  &.is-primary {
    input[type='checkbox']:checked + label {
      background-color: $primary;
      border-color: $primary;
    }
  }

  &.is-green {
    input[type='checkbox']:checked + label {
      background-color: $green;
      border-color: $green;
    }
  }

  &.is-blue {
    input[type='checkbox']:checked + label {
      background-color: $blue;
      border-color: $blue;
    }
  }

  &.is-orange {
    input[type='checkbox']:checked + label {
      background-color: $orange;
      border-color: $orange;
    }
  }

  &.is-red {
    input[type='checkbox']:checked + label {
      background-color: $red;
      border-color: $red;
    }
  }

  &.is-small {
    height: 22px;
    width: 22px;

    label {
      height: 22px;
      width: 22px;

      &:after {
        left: 4px;
        top: 4.5px;
        width: 13px;
        height: 8px;
        transform: rotate(-45deg) scale(0.65);
      }
    }

    span {
      position: relative;
      top: -2px;
      padding: 0 10px;
      cursor: default;
    }
  }
}

/* ==========================================================================
2. Basic checkbox
========================================================================== */

.basic-checkbox {
  &.is-accent {
    .styled-checkbox {
      // Box hover
      &:hover + label:before {
        background: $accent;
      }

      // Box checked
      &:checked + label:before {
        background: $accent;
        border-color: $accent;
      }

      // Disabled state label.
      &:disabled + label {
        color: $accent;
      }
    }
  }

  &.is-red {
    .styled-checkbox {
      // Box hover
      &:hover + label:before {
        background: $red;
      }

      // Box checked
      &:checked + label:before {
        background: $red;
        border-color: $red;
      }

      // Disabled state label.
      &:disabled + label {
        color: $red;
      }
    }
  }

  &.is-blue {
    .styled-checkbox {
      // Box hover
      &:hover + label:before {
        background: $blue;
      }

      // Box checked
      &:checked + label:before {
        background: $blue;
        border-color: $blue;
      }

      // Disabled state label.
      &:disabled + label {
        color: $blue;
      }
    }
  }

  &.is-green {
    .styled-checkbox {
      // Box hover
      &:hover + label:before {
        background: $green;
      }

      // Box checked
      &:checked + label:before {
        background: $green;
        border-color: $green;
      }

      // Disabled state label.
      &:disabled + label {
        color: $green;
      }
    }
  }

  &.is-orange {
    .styled-checkbox {
      // Box hover
      &:hover + label:before {
        background: $orange;
      }

      // Box checked
      &:checked + label:before {
        background: $orange;
        border-color: $orange;
      }

      // Disabled state label.
      &:disabled + label {
        color: $orange;
      }
    }
  }

  .styled-checkbox {
    position: absolute; // take it out of document flow
    opacity: 0; // hide it

    & + label {
      position: relative;
      cursor: pointer;
      padding: 0;
    }

    // Box.
    & + label:before {
      content: '';
      margin-right: 10px;
      display: inline-block;
      vertical-align: text-top;
      width: 20px;
      height: 20px;
      border-radius: 3px;
      border: 1px solid $placeholder;
      background: white;
    }

    // Box hover
    &:hover + label:before {
      background: $primary;
    }

    // Box focus
    &:focus + label:before {
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
    }

    // Box checked
    &:checked + label:before {
      background: $primary;
      border-color: $primary;
    }

    // Disabled state label.
    &:disabled + label {
      color: $primary;
      cursor: auto;
    }

    // Disabled box.
    &:disabled + label:before {
      box-shadow: none;
      background: #ddd;
    }

    // Checkmark. Could be replaced with an image
    &:checked + label:after {
      content: '';
      position: absolute;
      left: 5px;
      top: 9px;
      background: white;
      width: 2px;
      height: 2px;
      box-shadow:
        2px 0 0 white,
        4px 0 0 white,
        4px -2px 0 white,
        4px -4px 0 white,
        4px -6px 0 white,
        4px -8px 0 white;
      transform: rotate(45deg);
    }
  }
}
