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

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

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

// PUBLIC PROPERTIES

@use '@material/web/motion/animation';
@use '@material/web/sass/touch-target';

// TODO(b/230768994): update animation timing
$animation-duration: 75ms;
$icon-exit-duration: 0.4 * $animation-duration;
$icon-enter-duration: $animation-duration - $icon-exit-duration;

// PUBLIC API

@mixin static-styles() {
  :host {
    display: inline-flex;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }

  .md3-switch {
    @include _root;
  }

  // Track
  .md3-switch__track {
    @include _track;

    &::before {
      @include _track-before;

      .md3-switch--selected & {
        @include _track-selected-before;
      }
    }
  }

  // Handle container
  .md3-switch__handle-container {
    @include _handle-container;
  }

  // Handle
  .md3-switch__handle {
    @include _handle;

    &::before {
      @include _handle-before;

      .md3-switch--selected & {
        @include _handle-selected-before;
      }
    }
  }

  // Icons
  .md3-switch__icons {
    @include _icons;
  }

  .md3-switch__icon {
    @include _icon;
    @include _icon-hidden;
  }

  .md3-switch--selected .md3-switch__icon--on,
  .md3-switch--unselected .md3-switch__icon--off {
    @include _icon-visible;
  }

  // Touch target
  .md3-switch__touch {
    @include touch-target.touch-target();
  }

  // Disabled
  .md3-switch:disabled {
    @include _disabled;
  }

  // Disabled - Track
  .md3-switch__track {
    .md3-switch:disabled & {
      background-color: transparent;
      border-color: transparent;

      &::before {
        background-clip: content-box;
      }
    }
    .md3-switch--selected:disabled & {
      background-clip: border-box;
    }
  }

  input {
    @include _input;
  }
}

// PRIVATE API

@mixin _root() {
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0; // Stop from collapsing in flex containers
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
}

@mixin _disabled() {
  cursor: default;
  pointer-events: none;
}

@mixin _track() {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

  border-radius: inherit;

  // Center content
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin _track-before() {
  @include _before-base();

  border-style: solid;
}

// When selected, turn off ::before
@mixin _track-selected-before() {
  opacity: 0;
}

@mixin _handle-container() {
  position: relative;
  transition: animation.standard(margin, $animation-duration);
}

@mixin _handle() {
  transform-origin: center;
  transition: animation.standard(transform, $animation-duration);
}

@mixin _handle-before() {
  @include _before-base();
}

@mixin _before-base() {
  content: '';
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  box-sizing: border-box;

  transition-property: opacity;
  transition-duration: #{$animation-duration};
}

// When selected, turn off ::before
@mixin _handle-selected-before() {
  opacity: 0;
}

@mixin _icons() {
  position: relative;
  height: 100%;
  width: 100%;
}

@mixin _icon() {
  position: absolute;
  inset: 0;
  margin: auto;

  transition-property: fill;
  transition-duration: #{$animation-duration};
}

@mixin _icon-hidden() {
  opacity: 0;
}

@mixin _icon-visible() {
  opacity: 1;
}

@mixin _input() {
  display: none;
}