@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';

$switch-circle-border-color-standard: rgba(map-get($denali-brand-colors,"300"), 0.5) !default;
$switch-circle-border-color-hover: map-get($denali-brand-colors,"300") !default;
$switch-circle-border-color-active: map-get($denali-status-colors,"success") !default;
$switch-circle-border-color-disabled: map-get($denali-grey-colors,"500") !default;
$switch-circle-bg-color-standard: map-get($denali-grey-colors,"100") !default;
$switch-circle-bg-color-active: map-get($denali-status-colors,"success") !default;
$switch-circle-bg-color-disabled: map-get($denali-grey-colors,"100") !default;
$switch-circle-bg-color-active-disabled: map-get($denali-grey-colors,"500") !default;
$switch-slider-standard-color: map-get($denali-grey-colors,"500") !default;
$switch-slider-active-color: rgba(map-get($denali-status-colors,"success"), 0.45) !default;
$switch-slider-disabled-color: map-get($denali-grey-colors,"400") !default;
$switch-label-text-color: inherit !default;
$switch-label-disabled-text-color: map-get($denali-grey-colors,"500") !default;

@mixin switch-default {
  label.switch {
    box-sizing: border-box;
    display: inline-flex;
    height: 20px;
    position: relative;
    margin-top: 0px !important;
    align-items: center;
    margin-right: 16px;
  }

  label.switch > input[type="checkbox"] {
    display: none;
  }

  /* Horizontal line */
  label.switch > .slider {
    background-color: $switch-slider-standard-color;
    border-radius: 34px;
    bottom: 0;
    box-sizing: border-box;
    cursor: pointer;
    height: 4px;
    left: 0;
    position: relative;
    right: 0;
    transition: all 0.4s;
    width: 34px;
  }

  /* Make it easier to click the empty space to the side of the Toggle circle */
  label.switch > .slider:before {
    background-color: transparent;
    box-sizing: border-box;
    content: " ";
    height: 18px;
    left: 0;
    position: absolute;
    top: -8px;
    width: 34px;
  }

  /* Toggle circle */
  label.switch > .slider:after {
    background-color: $switch-circle-bg-color-standard;
    bottom: -8px;
    border: 2px solid;
    border-color: $switch-circle-border-color-standard;
    border-radius: 50%;
    box-sizing: border-box;
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    transition: all 0.4s;
    width: 20px;
  }

  label.switch > input[type="checkbox"]:hover ~ .slider:after {
    border-color: $switch-circle-border-color-hover;
  }

  label.switch > input[type="checkbox"]:checked ~ .slider {
    background-color: $switch-slider-active-color;
  }

  label.switch > input[type="checkbox"]:checked ~ .slider:after {
    background: $switch-circle-bg-color-active;
    border-color: $switch-circle-border-color-active;
    transform: translateX(16px);
  }

  label.switch.disabled > input[type="checkbox"] ~ .slider,
  label.switch > input[type="checkbox"]:disabled ~ .slider,
  label.switch > input[type="checkbox"]:checked:disabled ~ .slider {
    background-color: $switch-slider-disabled-color;
    cursor: not-allowed;
  }

  label.switch.disabled > input[type="checkbox"] ~ .slider:after,
  label.switch > input[type="checkbox"]:disabled ~ .slider:after,
  label.switch > input[type="checkbox"]:checked:disabled ~ .slider:after {
    border-color: $switch-circle-border-color-disabled;
    cursor: not-allowed;
  }

  label.switch.disabled > input[type="checkbox"]:checked ~ .slider:after,
  label.switch > input[type="checkbox"]:checked:disabled ~ .slider:after {
    background: $switch-circle-bg-color-disabled;
  }

  label.switch > .label {
    color: $switch-label-text-color;
    font-size: 14px;
    font-family: helvetica, sans-serif;
    font-weight: normal;
    margin-left: 10px;
    position: relative;
    white-space: nowrap;
  }

  label.switch.disabled > .label,
  label.switch > input[type="checkbox"]:disabled ~ .label,
  label.switch > input[type="checkbox"]:checked:disabled ~ .label {
    color: $switch-label-disabled-text-color;
  }

  label.switch > input[type="checkbox"]:checked ~ .off {
    display: none;
  }

  label.switch > input[type="checkbox"]:not(:checked) ~ .off {
    display: inline;
  }

  label.switch > input[type="checkbox"]:checked ~ .on {
    display: inline;
  }

  label.switch > input[type="checkbox"]:not(:checked) ~ .on {
    display: none;
  }
}

@mixin switch-theme {
  label.switch>.slider {
    background-color: $switch-slider-standard-color;
  }

  label.switch>.slider:after {
    background-color: $switch-circle-bg-color-standard;
    border-color: $switch-circle-border-color-standard;
  }

  label.switch>input[type="checkbox"]:hover~.slider:after {
    border-color: $switch-circle-border-color-hover;
  }

  label.switch>input[type="checkbox"]:checked~.slider {
    background-color: $switch-slider-active-color;
  }

  label.switch>input[type="checkbox"]:checked~.slider:after {
    background: $switch-circle-bg-color-active;
    border-color: $switch-circle-border-color-active;
  }

  label.switch.disabled>input[type="checkbox"]~.slider,
  label.switch>input[type="checkbox"]:disabled~.slider,
  label.switch>input[type="checkbox"]:checked:disabled~.slider {
    background-color: $switch-slider-disabled-color;
  }

  label.switch.disabled>input[type="checkbox"]~.slider:after,
  label.switch>input[type="checkbox"]:disabled~.slider:after,
  label.switch>input[type="checkbox"]:checked:disabled~.slider:after {
    border-color: $switch-circle-border-color-disabled;
  }

  label.switch.disabled>input[type="checkbox"]:checked~.slider:after,
  label.switch>input[type="checkbox"]:checked:disabled~.slider:after {
    background: $switch-circle-bg-color-disabled;
  }

  label.switch>.label {
    color: $switch-label-text-color;
  }

  label.switch.disabled>.label,
  label.switch>input[type="checkbox"]:disabled~.label,
  label.switch>input[type="checkbox"]:checked:disabled~.label {
    color: $switch-label-disabled-text-color;
  }

}