@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.

@import '../maps/color-maps.scss';
@import '../utilities/global-variables.scss';

$checkbox-box-border-color-standard: 0 0 0 2px rgba(map-get($denali-brand-colors,"300"), 0.5) !default;
$checkbox-box-border-color-hover: 0 0 0 2px map-get($denali-brand-colors,"300") !default;
$checkbox-box-border-color-active: 0 0 0 2px map-get($denali-brand-colors,"300") !default;
$checkbox-box-border-color-disabled: 0 0 0 2px map-get($denali-grey-colors,"500") !default;
$checkbox-box-partial-color: rgba(map-get($denali-brand-colors,"300"), 0.5) !default;
$checkbox-box-bg-color-active: map-get($denali-brand-colors,"300") !default;
$checkbox-box-label-text-color: map-get($denali-grey-colors,"800") !default;
$checkbox-box-label-disabled-text-color: map-get($denali-grey-colors,"500") !default;
$checkbox-checkmark-color: map-get($denali-grey-colors,"100") !default;
$checkbox-corner-radius: 1px !default;

@mixin checkbox-default {
  .checkbox {
    backface-visibility: hidden;
    box-sizing: border-box;
    display: inline-block;
    outline: 0;
    position: relative;
    height: 20px;
    padding-left: 2px;
    margin-right: 16px;

    input[type="checkbox"] {
      box-sizing: border-box;
      display: inline-block;
      height: 20px;
      opacity: 0;             /* Hide it */
      position: absolute;     /* Take it out of the documenet flow */
    }

    > label {
      box-sizing: border-box;
      cursor: pointer;
      padding: 0;
      position: relative;
      color: $checkbox-box-label-text-color;
      font-size: 14px;
      font-family: inherit;
      font-weight: normal !important;
    }

    label:before {
      border-radius: $checkbox-corner-radius;
      box-shadow: $checkbox-box-border-color-standard;
      box-sizing: border-box;
      content: "";
      display: inline-block;
      height: 16px;
      margin-right: 10px;
      transition: all 0.2s;
      vertical-align: text-top;
      width: 16px;
    }

    input[type="checkbox"]:hover + label:before {
      box-shadow: $checkbox-box-border-color-hover;
    }

    input[type="checkbox"]:focus + label:before {
      box-shadow: $checkbox-box-border-color-hover;
    }

    input[type="checkbox"][data-partial=true] + label:before,
    input[type="checkbox"]:checked + label:before {
      box-shadow: $checkbox-box-border-color-active;
      background: $checkbox-box-bg-color-active;
    }

    input[type="checkbox"]:disabled + label {
      color: $checkbox-box-label-disabled-text-color;
      cursor: not-allowed;
    }

    input[type="checkbox"]:disabled + label:before {
      box-shadow: $checkbox-box-border-color-disabled;
    }

    input[type="checkbox"]:checked:not([data-partial]) + label:after {
      border: solid $checkbox-checkmark-color;
      border-width: 0 2px 2px 0;  /* creates the inverted "L" shape */
      box-sizing: border-box;
      content: " ";
      display: block;
      height: 12px;
      left: 5px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg);
      width: 6px; /* the short bar of the mark is half as long as the long bar */
    }

    input[type="checkbox"][data-partial] + label:after {
      box-shadow: inset 0 0 0 2px $checkbox-box-partial-color;
      box-sizing: border-box;
      content: " ";
      height: 2px;
      left: 2px;
      position: absolute;
      top: 7px;
      transition: all 0.2s;
      width: 12px;
      border-radius: 9999px;
    }
  }
}

@mixin checkbox-theme {
    .checkbox {

      label {
        color: $checkbox-box-label-text-color;
      }

      label:before {
        border-radius: $checkbox-corner-radius;
        box-shadow: $checkbox-box-border-color-standard;
      }

      input[type="checkbox"]:hover+label:before {
        box-shadow: $checkbox-box-border-color-hover;
      }

      input[type="checkbox"]:focus+label:before {
        box-shadow: $checkbox-box-border-color-standard;
      }

      input[type="checkbox"][data-partial=true]+label:before,
      input[type="checkbox"]:checked+label:before {
        box-shadow: $checkbox-box-border-color-active;
        background: $checkbox-box-bg-color-active;
      }

      input[type="checkbox"]:disabled+label {
        color: $checkbox-box-label-disabled-text-color;
      }

      input[type="checkbox"]:disabled+label:before {
        box-shadow: $checkbox-box-border-color-disabled;
      }

      input[type="checkbox"]:checked:not([data-partial])+label:after {
        border: solid $checkbox-checkmark-color;
        border-width: 0 2px 2px 0;
      }

      input[type="checkbox"][data-partial]+label:after {
        border: solid $checkbox-box-partial-color;
        border-width: 2px 0 0 0;
      }
    }
}