material-components_material-web/segmented_button/lib/_segmented-button.scss

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

// stylelint-disable selector-class-pattern -- allow `md3-` class selectors.

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

@mixin static-styles() {
  @keyframes md3-segmented-button-checkmark-selection-draw-in {
    from {
      stroke-dashoffset: 29.7833385;
    }
    to {
      stroke-dashoffset: 0;
    }
  }

  @keyframes md3-segmented-button-simple-fade-out {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes md3-segmented-button-simple-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  :host {
    display: inline-flex;
    outline: none;
  }

  .md3-segmented-button {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: inherit;
    display: flex;
    flex: 1;
    justify-content: center;
    outline: none;
    padding: 0;
    position: relative;
    vertical-align: middle;
  }

  .md3-segmented-button:enabled {
    cursor: pointer;
  }

  .md3-segmented-button__focus-ring {
    z-index: 1;
  }

  .md3-segmented-button__ripple {
    border-radius: inherit;
    z-index: 0;
  }

  .md3-segmented-button__touch {
    @include touch-target.touch-target($width: 100%);
  }

  .md3-segmented-button__leading,
  .md3-segmented-button__graphic {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
  }

  .md3-segmented-button__graphic {
    position: relative;
    overflow: hidden;
  }

  .md3-segmented-button__graphic {
    transition: animation.standard(width, 150ms);
  }

  .md3-segmented-button--unselected.md3-segmented-button--with-label,
  .md3-segmented-button--unselected.md3-segmented-button--without-label,
  .md3-segmented-button--selected.md3-segmented-button--without-checkmark {
    .md3-segmented-button__graphic {
      width: 0;
    }
  }

  .md3-segmented-button--unselected .md3-segmented-button__checkmark {
    opacity: 0;
  }

  .md3-segmented-button--selected.md3-segmented-button--with-label {
    .md3-segmented-button__icon {
      opacity: 0;
    }
  }

  .md3-segmented-button--with-label .md3-segmented-button__checkmark {
    display: inline-flex;
    position: absolute;
  }

  .md3-segmented-button__checkmark-path {
    stroke-width: 2px;
    stroke-dasharray: 29.7833385;
  }

  .md3-segmented-button--selecting {
    .md3-segmented-button__checkmark-path {
      // We immediately render the checkmark in the animation start treatment
      // because we're using an animation delay. If we didn't have the delay,
      // the checkmark would render in the base fully-drawn state during the
      // brief animation-delay period which would look wrong.
      stroke-dashoffset: 29.7833385;
      animation: md3-segmented-button-checkmark-selection-draw-in;
      animation-duration: 150ms;
      animation-delay: 50ms;
      animation-fill-mode: forwards;
      animation-timing-function: animation.$standard-easing;
    }
    &.md3-segmented-button--with-label .md3-segmented-button__icon {
      animation: md3-segmented-button-simple-fade-out;
      animation-duration: 75ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }
  }

  .md3-segmented-button--deselecting {
    .md3-segmented-button__checkmark {
      animation: md3-segmented-button-simple-fade-out;
      animation-duration: 50ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }
    &.md3-segmented-button--with-label .md3-segmented-button__icon {
      // We immediately render the icon in the animation start treatment
      // because we're using an animation delay. If we didn't have the delay,
      // the icon would render with full opacity during the brief
      // animation-delay period which would look wrong.
      opacity: 0;
      animation: md3-segmented-button-simple-fade-in;
      animation-delay: 50ms;
      animation-duration: 150ms;
      animation-timing-function: linear;
      animation-fill-mode: forwards;
    }
  }
}