@telekom/scale-components/dist/collection/components/toggle-button/toggle-button.css

Scale is the digital design system for Telekom products and experiences.

/**
 * @license
 * Scale https://github.com/telekom/scale
 *
 * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

:host {
  --width: auto;
  --spacing-x: var(--telekom-spacing-composition-space-08);
  --spacing-x-icon-only: var(--telekom-spacing-composition-space-04);
  --min-height: var(--telekom-spacing-composition-space-08);
  --height-xs: var(--telekom-spacing-composition-space-08);
  --height-small: var(--telekom-spacing-composition-space-10);
  --height-regular: var(--telekom-spacing-composition-space-12);
  --height-large: var(--telekom-spacing-composition-space-14);
  --radius: var(--telekom-radius-small);
  --transition: all var(--telekom-motion-duration-transition)
      var(--telekom-motion-easing-standard),
    border-radius var(--telekom-motion-duration-instant);
  --box-shadow-focus: inset 0 0 0 var(--telekom-line-weight-highlight)
    var(--telekom-color-functional-focus-standard);
  --font-weight: var(--telekom-typography-font-weight-bold);
  --font-size-large: var(--telekom-typography-font-size-body);
  --font-size-small: var(--telekom-typography-font-size-caption);
  --font-size-xs: var(--telekom-typography-font-size-small);
  --line-height: var(--telekom-spacing-composition-space-04);
  --spacing-icon-x: var(--telekom-spacing-composition-space-04);
  --vertical-align: middle;
  --border-color: var(--telekom-color-ui-border-standard);
  --border-color-disabled: var(--telekom-color-ui-border-disabled);
  --color-disabled: var(--telekom-color-text-and-icon-disabled);

  /* size: small */
  --font-size-small: var(--telekom-typography-font-size-small);
  --line-height-small: var(--telekom-typography-line-spacing-standard);
  --min-height-small: var(--telekom-spacing-composition-space-10);

  /* variant: primary */
  --radius-primary: var(--radius);
  --background-primary: var(--telekom-color-ui-subtle);
  --background-primary-disabled: var(--telekom-color-ui-disabled);
  --color-primary: var(--telekom-color-ui-extra-strong);
  --color-primary-hover: var(--telekom-color-primary-hovered);
  --color-primary-active: var(--telekom-color-primary-pressed);

  /* variant: secondary */
  --background-secondary: transparent;
  --color-secondary: var(--telekom-color-text-and-icon-standard);
  --background-secondary-hover: var(--telekom-color-ui-state-fill-hovered);
  --background-secondary-active: var(--telekom-color-ui-state-fill-pressed);
  --background-secondary-disabled: none;
  --border-secondary: var(--telekom-color-ui-border-standard);
  --border-secondary-hover: var(--telekom-color-ui-border-hovered);
  --border-secondary-active: var(--telekom-color-ui-border-pressed);
  --border-secondary-focus: var(--telekom-color-functional-focus-standard);

  /* selected */
  --color-selected: var(--telekom-color-text-and-icon-white-standard);
  --background-selected-light: var(--telekom-color-primary-standard);
  --background-selected-hover-light: var(--telekom-color-primary-hovered);
  --background-selected-active-light: var(--telekom-color-primary-pressed);
  --background-selected-dark: var(--telekom-color-ui-extra-strong);
  --background-selected-hover-dark: var(--telekom-color-ui-strong);
  --background-selected-active-dark: var(--telekom-color-ui-strong);

  /* high contrast */
  --color-high-contrast: var(--telekom-color-text-and-icon-white-standard);
}

.toggle-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  position: relative;
  border: 0;
  outline: none;
  cursor: pointer;
  user-select: none;
  font-family: inherit;
  word-spacing: inherit;
  letter-spacing: inherit;
  justify-content: center;
  text-decoration: none;
  font-weight: var(--font-weight);
  font-size: var(--font-size);
  line-height: var(--line-height);
  min-height: var(--min-height);
  width: var(--width);
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
  vertical-align: var(--vertical-align);
  transition: var(--transition);
  margin: 0;
  color: var(--color-primary);
}

.toggle-button--primary {
  background: var(--background-primary);
}

.toggle-button--secondary {
  color: var(--color-secondary);
  background: var(--background-secondary);
}

.toggle-button--icon-before ::slotted(*) {
  margin-right: var(--spacing-icon-x);
  pointer-events: none;
}

.toggle-button--icon-after ::slotted(*) {
  margin-left: var(--spacing-icon-x);
  pointer-events: none;
}

.toggle-button--icon-only ::slotted(*) {
  pointer-events: none;
}

.toggle-button--xs {
  height: var(--height-xs);
  font-size: var(--font-size-xs);
}

.toggle-button--small {
  height: var(--height-small);
  font-size: var(--font-size-small);
}

.toggle-button--regular {
  height: var(--height-regular);
  font-size: var(--font-size-large);
}

.toggle-button--large {
  height: var(--height-large);
  font-size: var(--font-size-large);
}

.toggle-button:not(.button--disabled):focus {
  box-shadow: var(--box-shadow-focus);
}

.toggle-button:not(.button--disabled):hover {
  color: var(--color-secondary-hover);
  background-color: var(--background-secondary-hover);
}

.toggle-button:not(.button--disabled):active {
  color: var(--color-secondary-active);
  background-color: var(--background-secondary-active);
}

.toggle-button:disabled {
  color: var(--color-disabled);
  pointer-events: none;
  border: 1px solid var(--border-color-disabled);
}

.toggle-button:disabled.toggle-button--primary {
  background: var(--background-primary-disabled);
}

.toggle-button--selected.toggle-button--color {
  color: var(--color-selected);
  background: var(--background-selected-light);
}

.toggle-button--selected:not(.button--disabled).toggle-button--color:hover {
  color: var(--color-selected);
  background: var(--background-selected-hover-light);
}

.toggle-button--selected:not(.button--disabled).toggle-button--color:active {
  color: var(--color-selected);
  background: var(--background-selected-active-light);
}

.toggle-button--selected.toggle-button--monochrome {
  color: var(--telekom-color-text-and-icon-inverted-standard);
  background: var(--background-selected-dark);
}

.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:hover {
  color: var(--color-selected);
  background: var(--background-selected-hover-dark);
}

.toggle-button--selected:not(.button--disabled).toggle-button--monochrome:active {
  color: var(--color-selected);
  background: var(--background-selected-active-dark);
}

.toggle-button--border {
  border: 1px solid var(--border-color);
}

.toggle-button--left,
.toggle-button--left:disabled {
  border-right: 0;
  border-radius: var(--radius-primary) 0 0 var(--radius-primary);
}

.toggle-button--right,
.toggle-button--right:disabled {
  border-left: 0;
  border-radius: 0 var(--radius-primary) var(--radius-primary) 0;
}

.toggle-button--both,
.toggle-button--both:disabled {
  border-radius: var(--radius-primary);
}

.toggle-button--all,
.toggle-button--all:disabled {
  border-radius: var(--radius-primary);
}
.toggle-button--neither,
.toggle-button--neither:disabled {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
  .toggle-button {
    color: var(--color-high-contrast);
  }
}