//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

//-----------------------------
// Toggle
//-----------------------------

@import '../../globals/scss/vars';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/typography';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import '../form/form';

/// Toggle styles
/// @access private
/// @group toggle
@mixin toggle {
  @if feature-flag-enabled('enable-v11-release') {
    .#{$prefix}--toggle__label-text {
      @include type-style('label-01');

      display: block;
      margin-bottom: $spacing-05;
      color: $text-secondary;
    }

    .#{$prefix}--toggle__button {
      @include hidden;

      &:focus {
        outline: none;
      }
    }

    .#{$prefix}--toggle__appearance {
      display: grid;
      align-items: center;
      column-gap: $spacing-03;
      cursor: pointer;
      grid-template-columns: max-content max-content;
    }

    .#{$prefix}--toggle__switch {
      position: relative;
      width: rem(48px);
      height: rem(24px);
      background-color: $toggle-off;
      border-radius: rem(12px);
      transition: background-color $duration--fast-01 motion(exit, productive);

      &::before {
        position: absolute;
        top: rem(3px);
        left: rem(3px);
        width: rem(18px);
        height: rem(18px);
        background-color: $icon-on-color;
        border-radius: 50%;
        content: '';
        transition: transform $duration--fast-01 motion(exit, productive);

        @media screen and (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }
    }

    .#{$prefix}--toggle__button:focus
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__switch,
    .#{$prefix}--toggle__button:active
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__switch {
      box-shadow: 0 0 0 1px $focus-inset, 0 0 0 3px $focus;
    }

    .#{$prefix}--toggle__switch--checked {
      background-color: $support-success;

      &::before {
        transform: translateX(rem(24px));
      }
    }

    .#{$prefix}--toggle__text {
      @include type-style('body-long-01');

      color: $text-primary;
    }

    .#{$prefix}--toggle__appearance--sm .#{$prefix}--toggle__switch {
      width: rem(32px);
      height: rem(16px);

      &::before {
        width: rem(10px);
        height: rem(10px);
      }
    }

    .#{$prefix}--toggle__appearance--sm
      .#{$prefix}--toggle__switch--checked::before {
      transform: translateX(rem(16px));
    }

    .#{$prefix}--toggle__check {
      position: absolute;
      top: rem(6px);
      right: rem(5px);
      fill: $support-success;
      visibility: hidden;
    }

    .#{$prefix}--toggle__switch--checked .#{$prefix}--toggle__check {
      visibility: visible;
    }

    .#{$prefix}--toggle--disabled .#{$prefix}--toggle__appearance {
      cursor: not-allowed;
    }

    .#{$prefix}--toggle--disabled .#{$prefix}--toggle__label-text,
    .#{$prefix}--toggle--disabled .#{$prefix}--toggle__text {
      color: $text-disabled;
    }

    .#{$prefix}--toggle--disabled .#{$prefix}--toggle__switch {
      background-color: $button-disabled;

      &::before {
        background-color: $icon-on-color-disabled;
      }
    }

    .#{$prefix}--toggle--disabled .#{$prefix}--toggle__check {
      fill: $button-disabled;
    }

    // HCM

    .#{$prefix}--toggle__switch,
    .#{$prefix}--toggle__switch::before {
      @include high-contrast-mode('outline');
    }

    // stylelint-disable-next-line no-duplicate-selectors
    .#{$prefix}--toggle__button:focus
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__switch,
    .#{$prefix}--toggle__button:active
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__switch {
      @include high-contrast-mode('focus');
    }
  } @else {
    .#{$prefix}--toggle {
      @include hidden;

      &:focus {
        outline: none;
      }
    }

    .#{$prefix}--toggle__label {
      @include type-style('label-01');

      position: relative;
      display: flex;
      align-items: center;
      margin: $carbon--spacing-03 0;
      cursor: pointer;
    }

    // V11: It looks like this block no longer applies to any element.
    // May need to check with Vue/Angular implementations,
    // but I do not see any `toggle__appearance` in the rendered HTML.
    // There seem to be quite a few references throughout this file.
    .#{$prefix}--toggle__appearance {
      position: relative;
      width: carbon--rem(48px);
      height: carbon--rem(24px);

      // Toggle background oval
      &::before {
        position: absolute;
        top: 0;
        display: block;
        width: carbon--rem(48px);
        height: carbon--rem(24px);
        box-sizing: border-box;
        background-color: $ui-04;
        border-radius: carbon--rem(15px);
        // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
        box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
        content: '';
        cursor: pointer;
        transition: box-shadow $duration--fast-01 motion(exit, productive),
          background-color $duration--fast-01 motion(exit, productive);
        will-change: box-shadow;

        @media screen and (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      // Toggle circle
      &::after {
        position: absolute;
        top: carbon--rem(3px);
        left: carbon--rem(3px);
        display: block;
        width: carbon--rem(18px);
        height: carbon--rem(18px);
        box-sizing: border-box;
        background-color: $icon-03;
        border-radius: 50%;
        content: '';
        cursor: pointer;
        transition: transform $duration--fast-01 motion(exit, productive);
      }
    }

    .#{$prefix}--toggle__check {
      position: absolute;
      z-index: 1;
      top: carbon--rem(6px);
      left: carbon--rem(6px);
      width: carbon--rem(6px);
      height: carbon--rem(5px);
      fill: $icon-03;
      transform: scale(0.2);
      transition: $duration--fast-01 motion(exit, productive);
    }

    .#{$prefix}--toggle__text--left,
    .#{$prefix}--toggle__text--right {
      @include type-style('body-short-01');

      position: relative;
      margin-left: $carbon--spacing-03;
    }

    .#{$prefix}--toggle__text--left {
      position: absolute;
      left: carbon--rem(48px);
    }

    .#{$prefix}--toggle:checked
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--left,
    .#{$prefix}--toggle:not(:checked)
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--right {
      visibility: hidden;
    }

    .#{$prefix}--toggle:checked
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--right,
    .#{$prefix}--toggle:not(:checked)
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--left {
      display: inline;
    }

    .#{$prefix}--toggle:checked
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance {
      &::before {
        background-color: $support-02;
      }

      &::after {
        background-color: $icon-03;
        transform: translateX(carbon--rem(24px));
      }
    }

    //----------------------------------------------
    // Focus
    // ---------------------------------------------
    .#{$prefix}--toggle
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance::before {
      // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
      box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
    }

    .#{$prefix}--toggle:focus + .#{$prefix}--toggle__label,
    .#{$prefix}--toggle:active
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance::before {
      box-shadow: 0 0 0 1px $ui-03, 0 0 0 3px $focus;
    }

    //----------------------------------------------
    // Disabled
    // ---------------------------------------------
    .#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label {
      cursor: not-allowed;
    }

    .#{$prefix}--toggle:disabled
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance {
      &::before {
        background-color: $disabled-01;
      }

      &::after {
        background-color: $disabled-02;
      }

      &::before,
      &::after {
        cursor: not-allowed;
        transition: $duration--fast-01 motion(exit, productive);

        @media screen and (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }
    }

    .#{$prefix}--toggle:disabled
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--left,
    .#{$prefix}--toggle:disabled
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--right {
      color: $disabled;
    }

    .#{$prefix}--toggle:disabled:active
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance:before {
      box-shadow: none;
    }

    .#{$prefix}--toggle:disabled
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__check {
      fill: $disabled-02;
    }

    //----------------------------------------------
    // Small toggle
    // ---------------------------------------------

    .#{$prefix}--toggle--small
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance {
      width: carbon--rem(32px);
      height: carbon--rem(16px);

      &::before {
        top: 0;
        width: carbon--rem(32px);
        height: carbon--rem(16px);
        box-sizing: border-box;
        border-radius: 0.9375rem;
      }

      &::after {
        top: carbon--rem(3px);
        left: carbon--rem(3px);
        width: carbon--rem(10px);
        height: carbon--rem(10px);
      }
    }

    .#{$prefix}--toggle--small:checked
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__check {
      fill: $support-02;
      transform: scale(1) translateX(carbon--rem(16px));
    }

    .#{$prefix}--toggle--small
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__text--left {
      left: carbon--rem(32px);
    }

    .#{$prefix}--toggle--small:checked
      + .#{$prefix}--toggle__label
      .#{$prefix}--toggle__appearance {
      &::after {
        margin-left: 0;
        transform: translateX(rem(17px));
      }
    }

    // -----------------------------------------------------
    // new accessible toggle
    // TODO: deprecate styles above this line
    // -----------------------------------------------------

    .#{$prefix}--toggle-input {
      @include hidden;

      &:focus {
        outline: none;
      }
    }

    .#{$prefix}--toggle-input__label {
      @include type-style('label-01');

      display: flex;
      flex-direction: column;
      align-items: flex-start;
      color: $text-02;
      cursor: pointer;
    }

    .#{$prefix}--toggle__switch {
      position: relative;
      display: flex;
      width: carbon--rem(48px);
      height: carbon--rem(24px);
      align-items: center;
      cursor: pointer;

      // Toggle background oval
      &::before {
        position: absolute;
        top: 0;
        display: block;
        width: carbon--rem(48px);
        height: carbon--rem(24px);
        box-sizing: border-box;
        background-color: $ui-04;
        border-radius: carbon--rem(15px);
        // Corresponds to the double-border for focused state (`0 0 0 1px $ui-02, 0 0 0 3px $focus`)
        box-shadow: 0 0 0 1px transparent, 0 0 0 3px transparent;
        content: '';
        transition: box-shadow $duration--fast-01 motion(exit, productive),
          background-color $duration--fast-01 motion(exit, productive);
        will-change: box-shadow;

        @media screen and (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }

      // Toggle circle
      &::after {
        position: absolute;
        top: carbon--rem(3px);
        left: carbon--rem(3px);
        display: block;
        width: carbon--rem(18px);
        height: carbon--rem(18px);
        box-sizing: border-box;
        background-color: $icon-03;
        border-radius: 50%;
        content: '';
        transition: transform $duration--fast-01 motion(exit, productive);
      }

      .#{$prefix}--toggle-input__label & {
        margin-top: $carbon--spacing-05;
      }
    }

    .#{$prefix}--toggle__text--off,
    .#{$prefix}--toggle__text--on {
      @include type-style('body-short-01');

      position: absolute;
      // top offset needed to vertically center absolutely positioned flex child in IE11
      top: 50%;
      margin-left: rem(56px);
      transform: translateY(-50%);
      user-select: none;
      white-space: nowrap;
    }

    //----------------------------------------------
    // Checked
    // ---------------------------------------------
    .#{$prefix}--toggle-input:checked
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch
      > .#{$prefix}--toggle__text--off,
    .#{$prefix}--toggle-input:not(:checked)
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch
      > .#{$prefix}--toggle__text--on {
      visibility: hidden;
    }

    .#{$prefix}--toggle-input:checked
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch {
      &::before {
        background-color: $support-02;
      }

      &::after {
        background-color: $icon-03;
        transform: translateX(carbon--rem(24px));
      }
    }

    //----------------------------------------------
    // Focus and active
    // ---------------------------------------------
    .#{$prefix}--toggle-input:focus
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch::before,
    .#{$prefix}--toggle-input:active
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch::before {
      box-shadow: 0 0 0 1px $ui-02, 0 0 0 3px $focus;
    }

    //----------------------------------------------
    // Disabled
    // ---------------------------------------------
    .#{$prefix}--toggle-input:disabled + .#{$prefix}--toggle-input__label {
      color: $disabled;
      cursor: not-allowed;
    }

    .#{$prefix}--toggle-input:disabled
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch {
      cursor: not-allowed;

      &::before {
        background-color: $disabled-02;
      }

      &::after {
        background-color: $disabled-03;
      }

      &::before,
      &::after {
        cursor: not-allowed;
        transition: $duration--fast-01 motion(exit, productive);

        @media screen and (prefers-reduced-motion: reduce) {
          transition: none;
        }
      }
    }

    .#{$prefix}--toggle-input:disabled:active
      + .#{$prefix}--toggle-input__label
      > .#{$prefix}--toggle__switch::before {
      box-shadow: none;
    }

    //----------------------------------------------
    // Small toggle
    // ---------------------------------------------
    .#{$prefix}--toggle-input--small + .#{$prefix}--toggle-input__label {
      > .#{$prefix}--toggle__switch {
        width: carbon--rem(32px);
        height: carbon--rem(16px);

        &::before {
          width: carbon--rem(32px);
          height: carbon--rem(16px);
          border-radius: 0.9375rem;
        }

        &::after {
          width: carbon--rem(10px);
          height: carbon--rem(10px);
        }
      }

      .#{$prefix}--toggle__text--off,
      .#{$prefix}--toggle__text--on {
        margin-left: carbon--rem(40px);
      }
    }

    .#{$prefix}--toggle-input--small:checked
      + .#{$prefix}--toggle-input__label {
      > .#{$prefix}--toggle__switch::after {
        transform: translateX(carbon--rem(17px));
      }

      .#{$prefix}--toggle__check {
        fill: $support-02;
        transform: scale(1) translateX(carbon--rem(16px));
      }
    }

    .#{$prefix}--toggle-input--small:disabled:checked
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__check {
      fill: $disabled-01;
    }

    //----------------------------------------------
    // Skeleton
    // ---------------------------------------------
    //md toggle input
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch {
      @include skeleton;

      width: 3rem;
      margin-top: 0.5rem;
    }

    //md skeleton label text
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      > div {
      overflow: hidden;
      width: 1.5rem;
      height: 0.5rem;
      //hides text
      font-size: 0%;
      line-height: 0;

      @include skeleton;
    }

    //small toggle input
    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch {
      @include skeleton;

      width: 2rem;
      margin-top: 0.5rem;
    }

    //sm skeleton label text
    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      > div {
      overflow: hidden;
      width: 1rem;
      height: 0.5rem;
      //hides text
      font-size: 0%;
      line-height: 0;

      @include skeleton;
    }

    // on/off text skeleton
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch
      .#{$prefix}--toggle__text--left {
      @include skeleton;

      position: absolute;
      width: 1rem;
      height: 0.5rem;
    }

    .#{$prefix}--toggle-input--small.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch
      .#{$prefix}--toggle__text--left {
      left: 2rem;
    }

    //pseudo "toggle" button
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch::after,
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__appearance::after,
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__appearance::before {
      display: none;
    }

    //make it square
    .#{$prefix}--toggle.#{$prefix}--skeleton
      + .#{$prefix}--toggle-input__label
      .#{$prefix}--toggle__switch::before {
      border-radius: 0;
    }
  }
}

@include exports('toggle') {
  @include toggle;
}