@mixin custom-checkboxes {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;

  input {
    display: none;
  }

  label {
    font-size: inherit;
    margin: 0;
    display: block;
  }

  label .checkbox-mark {
    font-size: inherit;
    margin: 0 (8em / 16) 0 0;
    display: inline-block;
    vertical-align: bottom;
    width: (20em / 16);
    height: (20em / 16);
    border-width: (2em / 16);
    border-style: solid;
    border-radius: (5em / 16);
    position: relative;
  }

  label .checkbox-title {
    font-size: (14em / 16);
    line-height: 1;
  }

  input:checked ~ label .checkbox-mark:after {
    content: "";
    position: absolute;
    left: (5em / 16);
    top: (1em / 16);
    width: (6em / 16);
    height: (11em / 16);
    border-style: solid;
    border-width: 0 (2em / 16) (2em / 16) 0;
    transform: rotate(45deg);
  }

  &.radio label .checkbox-mark {
    border-radius: 50%;
  }

  &.radio input:checked ~ label .checkbox-mark:after {
    border-radius: 50%;
    border: none;
    width: (10em / 16);
    height: (10em / 16);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &.dash input:checked ~ label .checkbox-mark:after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: (10em / 16);
    height: 0;
    border-top-style: solid;
    border-bottom-style: solid;
    border-width: (1em / 16);
  }
}

@mixin custom-checkbox-colors(
  $border-color: $charcoal,
  $background-color: transparent
) {
  label .checkbox-mark {
    border-color: $border-color;
    background-color: $background-color;
  }
}

@mixin custom-checkbox-colors-checked(
  $color: $charcoal,
  $border-color: $charcoal,
  $background-color: transparent
) {
  input:checked ~ label .checkbox-mark {
    border-color: $border-color;
    background-color: $background-color;
  }

  input:checked ~ label .checkbox-mark:after {
    border-color: $color;
  }

  &.radio input:checked ~ label .checkbox-mark:after {
    background-color: $color;
  }

  &.dash input:checked ~ label .checkbox-mark:after {
    border-color: $color;
  }
}

@mixin custom-checkbox-card {
  position: relative;

  .checkbox {
    width: 100%;

    label {
      border-radius: (4em / 16);
      padding: (15em / 16) (12em / 16) (15em / 16) (12em / 16);

      .checkbox-mark {
        margin-right: (8em / 16);
        display: inline-block;
        vertical-align: bottom;
      }

      .checkbox-title {
        display: inline-block;
        vertical-align: middle;
        color: inherit;
      }
    }
  }
}

@mixin custom-checkbox-card-color($color, $background) {
  label {
    background-color: $background;

    .checkbox-title {
      color: $color;
    }
  }
}

@mixin custom-checkbox-card-color-checked($color, $background) {
  input:checked ~ label {
    background-color: $background;

    .checkbox-title {
      color: $color;
    }

    .icon-right > .material-icons {
      color: $color;
    }
  }
}

.checkbox {
  @include custom-checkboxes;
  @include custom-checkbox-colors;

  &.mint {
    @include custom-checkbox-colors($mint, white);
    @include custom-checkbox-colors-checked(white, $mint, $mint);
  }

  &.mint-invert {
    @include custom-checkbox-colors($mint, white);
    @include custom-checkbox-colors-checked($mint, $mint, white);
  }

  &.honey {
    @include custom-checkbox-colors($honey, white);
    @include custom-checkbox-colors-checked($honey, white);
  }
}

.checkbox-card {
  @include custom-checkbox-card;

  &.white-on-mint {
    @include custom-checkbox-card-color($charcoal, transparent);
    @include custom-checkbox-card-color-checked(white, $mint);

    .checkbox {
      @include custom-checkbox-colors($mint, white);
      @include custom-checkbox-colors-checked($mint, $mint, white);
    }

    .checkbox.radio {
      @include custom-checkbox-colors-checked(white, white, $mint);
    }
  }

  &.white-on-mint-on-hover {
    @include custom-checkbox-card-color($charcoal, transparent);

    .checkbox {
      @include custom-checkbox-colors($mint, white);
      @include custom-checkbox-colors-checked(white, $mint, $mint);
    }

    .checkbox.radio {
      @include custom-checkbox-colors-checked($mint, $mint, white);
    }

    &.hovering,
    &:hover {
      @include custom-checkbox-card-color(white, $mint);

      .checkbox {
        @include custom-checkbox-colors(white, $mint);
        @include custom-checkbox-colors-checked(white, white, $mint);
      }

      .checkbox.radio {
        @include custom-checkbox-colors-checked(white, white, $mint);
      }

      .icon-right > .material-icons {
        color: white;
      }
    }

    &.disabled {
      pointer-events: none;

      .checkbox {
        @include custom-checkbox-colors($light-grey, white);
        @include custom-checkbox-colors-checked(white, $light-grey, $light-grey);
      }

      .checkbox-title {
        color: $light-grey;
      }

      .checkbox.radio {
        @include custom-checkbox-colors-checked($light-grey, $light-grey, white);
      }

      &.hovering,
      &:hover {
        @include custom-checkbox-card-color(white, $light-grey);

        .checkbox {
          @include custom-checkbox-colors(white, $light-grey);
          @include custom-checkbox-colors-checked(white, white, $light-grey);
        }

        .checkbox.radio {
          @include custom-checkbox-colors-checked(white, white, $light-grey);
        }

        .icon-right > .material-icons {
          color: white;
        }
      }
    }

  }

  &.honey-hollow {
    @include custom-checkbox-card-color(white, transparent);
    @include custom-checkbox-card-color-checked(white, $honey);

    .checkbox {
      @include custom-checkbox-colors(white, transparent);
      @include custom-checkbox-colors-checked($honey, white, white);

      label {
        border: 1px solid $honey;
        color: white;
      }
    }

    &.custom-spacing {
      display: inline-block;
      margin-right: 16px;
      margin-bottom: 12px;
    }
  }

  .icon-right {
    float: right;
  }
}