_toggle.scss

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

@use '../../config' as *;
@use '../../motion' as *;
@use '../../spacing' as *;
@use '../../theme' as *;
@use '../../type' as *;
@use '../button/tokens' as button;
@use '../../utilities/convert' as *;
@use '../../utilities/high-contrast-mode' as *;
@use '../../utilities/visually-hidden' as *;
@use '../../utilities/skeleton' as *;

/// Toggle styles
/// @access public
/// @group toggle
@mixin toggle {
  .#{$prefix}--toggle {
    display: inline-block;
    user-select: none;
  }

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

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

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

    &:focus {
      outline: none;
    }
  }

  .#{$prefix}--toggle__appearance {
    display: inline-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:not(:disabled):active
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle:active .#{$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-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);
    width: rem(6px);
    height: rem(5px);
    fill: $support-success;
    visibility: hidden;
  }

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

  // ----------------------------------------
  // disabled
  // ----------------------------------------

  .#{$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.$button-disabled;

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

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

  // ----------------------------------------
  // readonly
  // ----------------------------------------
  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__appearance {
    cursor: default;
  }

  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__switch {
    border: 1px solid $icon-disabled;
    background-color: transparent;

    &::before {
      top: rem(2px);
      left: rem(2px);
      background-color: $text-primary;
    }
  }

  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
    top: rem(5px);
    right: rem(4px);
    fill: $background;
  }

  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
    cursor: text;
    user-select: text;
  }

  // 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:not(:disabled):active
    + .#{$prefix}--toggle__label
    .#{$prefix}--toggle__switch,
  .#{$prefix}--toggle:active .#{$prefix}--toggle__switch {
    @include high-contrast-mode('focus');
  }
}