material-web/switch/internal/_switch.scss

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

// go/keep-sorted start
@use 'sass:list';
@use 'sass:map';
// go/keep-sorted end
// go/keep-sorted start
@use '../../focus/focus-ring';
@use '../../tokens';
@use './handle';
@use './icon';
@use './track';
// go/keep-sorted end

@mixin theme($tokens) {
  $supported-tokens: list.join(
    tokens.$md-comp-switch-supported-tokens,
    (
      'handle-shape-start-start',
      'handle-shape-start-end',
      'handle-shape-end-end',
      'handle-shape-end-start',
      'track-shape-start-start',
      'track-shape-start-end',
      'track-shape-end-end',
      'track-shape-end-start'
    )
  );

  @each $token, $value in $tokens {
    @if list.index($supported-tokens, $token) == null {
      @error 'Token `#{$token}` is not a supported token.';
    }

    @if $value {
      --md-switch-#{$token}: #{$value};
    }
  }
}

@mixin styles() {
  $tokens: tokens.md-comp-switch-values();

  @layer styles, hcm;
  @layer styles {
    :host {
      @each $token, $value in $tokens {
        --_#{$token}: var(--md-switch-#{$token}, #{$value});
      }

      // Support logical shape properties
      --_handle-shape-start-start: var(
        --md-switch-handle-shape-start-start,
        var(--_handle-shape)
      );
      --_handle-shape-start-end: var(
        --md-switch-handle-shape-start-end,
        var(--_handle-shape)
      );
      --_handle-shape-end-end: var(
        --md-switch-handle-shape-end-end,
        var(--_handle-shape)
      );
      --_handle-shape-end-start: var(
        --md-switch-handle-shape-end-start,
        var(--_handle-shape)
      );
      --_track-shape-start-start: var(
        --md-switch-track-shape-start-start,
        var(--_track-shape)
      );
      --_track-shape-start-end: var(
        --md-switch-track-shape-start-end,
        var(--_track-shape)
      );
      --_track-shape-end-end: var(
        --md-switch-track-shape-end-end,
        var(--_track-shape)
      );
      --_track-shape-end-start: var(
        --md-switch-track-shape-end-start,
        var(--_track-shape)
      );

      display: inline-flex;
      outline: none;
      vertical-align: top;
      -webkit-tap-highlight-color: transparent;
      cursor: pointer;
    }

    :host([disabled]) {
      cursor: default;
    }

    :host([touch-target='wrapper']) {
      margin: max(0px, (48px - var(--_track-height)) / 2) 0px;
    }

    md-focus-ring {
      @include focus-ring.theme(
        (
          'shape-start-start': var(--_track-shape-start-start),
          'shape-start-end': var(--_track-shape-start-end),
          'shape-end-end': var(--_track-shape-end-end),
          'shape-end-start': var(--_track-shape-end-start),
        )
      );
    }

    .switch {
      align-items: center;
      display: inline-flex;
      flex-shrink: 0; // Stop from collapsing in flex containers
      position: relative;
      width: var(--_track-width);
      height: var(--_track-height);

      // Track shape
      border-start-start-radius: var(--_track-shape-start-start);
      border-start-end-radius: var(--_track-shape-start-end);
      border-end-end-radius: var(--_track-shape-end-end);
      border-end-start-radius: var(--_track-shape-end-start);
    }

    // Input is also touch target
    input {
      appearance: none;
      height: 48px;
      outline: none;
      margin: 0;
      position: absolute;
      width: 100%;
      z-index: 1;
      cursor: inherit;
    }

    :host([touch-target='none']) input {
      display: none;
    }
  }

  @include track.styles();
  @include handle.styles();
  @include icon.styles();
}