material-components_material-web/switch/lib/_handle.scss

//
// Copyright 2022 Google LLC
// SPDX-License-Identifier: Apache-2.0
//

// stylelint-disable selector-class-pattern --
// Selector '.md3-*' should only be used in this project.

// go/keep-sorted start
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../ripple/ripple';
@use '../../tokens';
// go/keep-sorted end

$_md-sys-motion: tokens.md-sys-motion-values();
$_easing-standard: map.get($_md-sys-motion, easing-standard);

@mixin styles() {
  .md3-switch__handle-container {
    position: relative;
    // this easing is custom to perform the "overshoot" animation
    transition: margin 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    $margin: calc(var(--_track-width) - var(--_track-height));

    .md3-switch--selected & {
      margin-inline-start: $margin;
    }

    .md3-switch--unselected & {
      margin-inline-end: $margin;
    }

    .md3-switch:disabled & {
      transition: none;
    }
  }

  .md3-switch__handle {
    // Handle shape
    border-start-start-radius: var(--_handle-shape-start-start);
    border-start-end-radius: var(--_handle-shape-start-end);
    border-end-end-radius: var(--_handle-shape-end-end);
    border-end-start-radius: var(--_handle-shape-end-start);
    height: var(--_unselected-handle-height);
    width: var(--_unselected-handle-width);
    background-color: var(--_selected-handle-color);

    transform-origin: center;
    transition-property: height, width, background-color;
    transition-duration: 250ms, 250ms, 67ms;
    transition-timing-function: $_easing-standard, $_easing-standard, linear;
    z-index: 0;

    &::before {
      content: '';
      display: flex;
      position: absolute;
      height: 100%;
      width: 100%;
      border-radius: inherit;
      box-sizing: border-box;

      transition: opacity 67ms linear;

      .md3-switch--selected & {
        // When selected, turn off ::before
        opacity: 0;
      }

      .md3-switch:disabled & {
        transition: none;
      }
    }

    .md3-switch:disabled & {
      transition: none;
    }

    .md3-switch--selected &,
    .md3-switch--unselected &.md3-switch__handle--big {
      height: var(--_selected-handle-height);
      width: var(--_selected-handle-width);
    }

    .md3-switch--selected:enabled:active &,
    .md3-switch--unselected:enabled:active & {
      height: var(--_pressed-handle-height);
      width: var(--_pressed-handle-width);
      transition-timing-function: linear;
      transition-duration: 100ms;
    }

    .md3-switch--selected:hover & {
      background-color: var(--_selected-hover-handle-color);
    }

    .md3-switch--selected:focus-visible & {
      background-color: var(--_selected-focus-handle-color);
    }

    .md3-switch--selected:active & {
      background-color: var(--_selected-pressed-handle-color);
    }

    .md3-switch--selected:disabled & {
      background-color: var(--_disabled-selected-handle-color);
    }

    &::before {
      background-color: var(--_unselected-handle-color);

      .md3-switch--unselected:hover & {
        background-color: var(--_unselected-hover-handle-color);
      }

      .md3-switch--unselected:focus-visible & {
        background-color: var(--_unselected-focus-handle-color);
      }

      .md3-switch--unselected:active & {
        background-color: var(--_unselected-pressed-handle-color);
      }

      .md3-switch--unselected:disabled & {
        background-color: var(--_disabled-unselected-handle-color);
      }
    }
  }

  .md3-switch__ripple {
    position: absolute;
    display: inline-flex;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: var(--_state-layer-size);
    width: var(--_state-layer-size);

    .md3-switch--selected & {
      @include ripple.theme(
        (
          hover-color: var(--_selected-hover-state-layer-color),
          focus-color: var(--_selected-focus-state-layer-color),
          pressed-color: var(--_selected-pressed-state-layer-color),
          hover-opacity: var(--_selected-hover-state-layer-opacity),
          focus-opacity: var(--_selected-focus-state-layer-opacity),
          pressed-opacity: var(--_selected-pressed-state-layer-opacity),
        )
      );
    }

    .md3-switch--unselected & {
      @include ripple.theme(
        (
          hover-color: var(--_unselected-hover-state-layer-color),
          focus-color: var(--_unselected-focus-state-layer-color),
          pressed-color: var(--_unselected-pressed-state-layer-color),
          hover-opacity: var(--_unselected-hover-state-layer-opacity),
          focus-opacity: var(--_unselected-focus-state-layer-opacity),
          pressed-opacity: var(--_unselected-pressed-state-layer-opacity),
        )
      );
    }
  }
}