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

$toggle-corner-radius: $border-radius-sm !default;
$toggle-bg-color: rgba(map-get($denali-brand-colors,"300"), .08) !default;
$toggle-text-color: map-get($denali-brand-colors,"300") !default;
$toggle-text-hover-color: map-get($denali-brand-colors,"500") !default;
$toggle-text-size: 1.4rem !default;
$toggle-padding: 0px 14px !default;
$toggle-height: 36px !default;
$toggle-active-text-color: map-get($denali-grey-colors,"800") !default;
$toggle-active-bg-color: map-get($denali-grey-colors,"100") !default;
$toggle-active-corner-radius: $border-radius-sm !default;
$toggle-active-border-width: 2px !default;
$toggle-active-border-color: map-get($denali-brand-colors,"300") !default;
$toggle-disabled-text-color: rgba(map-get($denali-grey-colors,"800"), 0.2) !default;
$toggle-small-padding: 0px 10px !default;
$toggle-small-height: 28px !default;
$toggle-inverse-text-color: map-get($denali-brand-colors,"200") !default;
$toggle-inverse-bg-color: rgba(map-get($denali-grey-colors,"100"), 0.1) !default;
$toggle-inverse-active-text-color: map-get($denali-grey-colors,"100") !default;
$toggle-inverse-active-bg-color: transparent !default;

@mixin toggle-default {
  .toggle {
    display: flex;
    position: relative;
    white-space: nowrap;
    overflow: auto;
    padding: $toggle-active-border-width;

    input {
      position: absolute !important;
      clip: rect(0, 0, 0, 0);
      overflow: hidden;

      &:checked + label {
        box-shadow: none;
        z-index: 1;
        background-color: $toggle-active-bg-color;
        color: $toggle-active-text-color;
        border-radius: $toggle-active-corner-radius;
        box-shadow: 0 0 0 $toggle-active-border-width $toggle-active-border-color;
      }

      &:disabled + label {
        color: $toggle-disabled-text-color;
        cursor:not-allowed;
      }

      &.is-disabled + label {
          color: $toggle-disabled-text-color;
          cursor:not-allowed;
      }
    }



    > ul {
      display: flex;
    }

    label,
    li {
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 300ms ease-in-out;
      background: $toggle-bg-color;
      color: $toggle-text-color;
      font-size: $toggle-text-size;
      height: $toggle-height;
      padding: $toggle-padding;

      a {
        color: inherit;
      }

      &.is-active {
        box-shadow: none;
        z-index: 1;
        background-color: $toggle-active-bg-color;
        color: $toggle-active-text-color;
        border-radius: $toggle-active-corner-radius !important;
        box-shadow: 0 0 0 $toggle-active-border-width $toggle-active-border-color;

        a {
          color: inherit;
        }
      }

      &:hover {
        cursor: pointer;
        color: $toggle-text-hover-color;
      }

      &.is-disabled,
      &:disabled {
        cursor: not-allowed;
        color: $toggle-disabled-text-color;

        > * {
          cursor: not-allowed;
        }
      }

      &:first-of-type {
        border-top-left-radius: $toggle-corner-radius;
        border-bottom-left-radius: $toggle-corner-radius;
      }

      &:last-of-type {
        border-top-right-radius: $toggle-corner-radius;
        border-bottom-right-radius: $toggle-corner-radius;
      }
    }

    &.has-icons {
      label,
      li {
        padding: 0px 8px !important;
      }

      &.is-small {
        label,
        li {
          padding: 0px 6px !important;
        }
      }
    }

    // Sizes
    &.is-small {
      label,
      li {
        height: $toggle-small-height;
        padding: $toggle-small-padding;
      }
    }

    // Inverse
    &.is-inverse {
      label,
      li {
        color: $toggle-inverse-text-color;
        background: $toggle-inverse-bg-color;
        &.is-active {
          color: $toggle-inverse-active-text-color;
          background: $toggle-inverse-active-bg-color;
        }
      }
    }
  }
}

@mixin toggle-theme {
  .toggle {
    padding: $toggle-active-border-width;
    input {
      &:checked+label {
        background-color: $toggle-active-bg-color;
        color: $toggle-active-text-color;
        border-radius: $toggle-active-corner-radius;
        box-shadow: 0 0 0 $toggle-active-border-width $toggle-active-border-color;
      }

      &:disabled + label {
        color: $toggle-disabled-text-color;
      }

      &.is-disabled + label {
          color: $toggle-disabled-text-color;
      }
    }

    label,
    li {
      background: $toggle-bg-color;
      color: $toggle-text-color;
      font-size: $toggle-text-size;
      height: $toggle-height;
      padding: $toggle-padding;
      &.is-active {
        background-color: $toggle-active-bg-color;
        color: $toggle-active-text-color;
        border-radius: $toggle-active-corner-radius !important;
        box-shadow: 0 0 0 $toggle-active-border-width $toggle-active-border-color;
      }
      &.is-disabled {
        color: $toggle-disabled-text-color;
      }
      &:hover {
        color: $toggle-text-hover-color;
      }
      &:first-of-type {
        border-top-left-radius: $toggle-corner-radius;
        border-bottom-left-radius: $toggle-corner-radius;
      }
      &:last-of-type {
        border-top-right-radius: $toggle-corner-radius;
        border-bottom-right-radius: $toggle-corner-radius;
      }
    }

    // Sizes
    &.is-small {
      label,
      li {
        height: $toggle-small-height;
        padding: $toggle-small-padding;
      }
    }

    // Inverse
    &.is-inverse {
      label,
      li {
        color: $toggle-inverse-text-color;
        background: $toggle-inverse-bg-color;
        &.is-active {
          color: $toggle-inverse-active-text-color;
          background: $toggle-inverse-active-bg-color;
        }
      }
    }
  }
}