wix-style-react/dist/src/ToggleButton/ToggleButton.st.css

wix-style-react

@st-import [
  --wds-color-blue-200,
  --wds-color-text-success,
  --wds-color-text-destructive,
  --wds-color-text-primary,
  --wds-color-text-standard-primary,
  --wds-color-text-disabled,
  --wds-color-text-disabled-light,
  --wds-color-text-standard-primary-light,
  --wds-color-text-standard-secondary,
  --wds-color-fill-standard-primary,
  --wds-color-fill-standard-primary-hover,
  --wds-color-fill-standard-primary-disabled,
  --wds-color-fill-standard-secondary,
  --wds-color-fill-standard-secondary-hover,
  --wds-color-fill-standard-secondary-disabled,
  --wds-color-fill-standard-tertiary,
  --wds-color-fill-standard-tertiary-hover,
  --wds-color-fill-standard-tertiary-disabled,
  --wds-color-fill-dark-primary,
  --wds-color-fill-dark-primary-hover,
  --wds-color-fill-dark-primary-disabled,
  --wds-color-fill-dark-primary-active,
  --wds-color-fill-dark-tertiary-disabled,
  --wds-color-fill-destructive-primary,
  --wds-color-fill-destructive-primary-hover,
  --wds-color-fill-destructive-primary-disabled,
  --wds-color-fill-success-primary,
  --wds-color-fill-success-primary-active,
  --wds-color-fill-success-primary-hover,
  --wds-color-fill-success-primary-disabled,
  --wds-color-border-standard-tertiary,
  --wds-color-border-standard-tertiary-hover,
  --wds-color-border-standard-tertiary-disabled,
  --wds-color-border-standard-tertiary-active,
  --wds-color-border-destructive-tertiary-hover,
  --wds-color-border-success-tertiary-hover,
  --wds-border-radius-200,
  --wds-border-radius-300,
  --wds-border-radius-full,
  --wds-shadow-focus-standard,
  --wds-space-50,
  --wds-space-100,
  --wds-space-150,
  --wds-space-200,
  --wds-toggle-button-padding-right-tiny-round,
  --wds-toggle-button-padding-left-tiny-round,
  --wds-toggle-button-padding-right-small-round,
  --wds-toggle-button-padding-left-small-round,
  --wds-toggle-button-padding-right-medium-round,
  --wds-toggle-button-padding-left-medium-round,
  --wds-toggle-button-padding-right-large-round,
  --wds-toggle-button-padding-left-large-round,
] from '@wix/design-system-tokens/all.st.css';

:import {
  -st-from: '../Button/ButtonCore/ButtonCore.st.css';
  -st-default: ButtonCore;
}

:import {
  -st-from: '../common/Focusable/Focusable.st.css';
  -st-default: Focusable;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D55, D80, B10, B20, B30, B40, B50, F00, D10, D20, D30, D60, D10-30, D80-70, R10, R20, R30, G10, G20, G30;
}

:import {
  -st-from: '../Foundation/stylable/easing.st.css';
  -st-named: ease-9;
}

:import {
  -st-from: "../Tooltip/Tooltip.st.css";
  -st-default: Tooltip;
}

/* root */
.root {
  -st-extends: ButtonCore;
  -st-states: selected, disabled, skin(enum(standard, dark, inverted, destructive, success)),
    labelPlacement(enum(tooltip, end, bottom)), shape(enum(square, round, pill)), newColorsBranding;

  padding: 0;

  box-sizing: border-box;
  text-align: center;

  border: none;
  outline: none;

  background-color: transparent;
  color: var(--wds-color-text-standard-primary, value(D10));
}

.root::content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.root:hover:not(:disabled),
.root:hover:not(:disabled) .label {
  color: var(--wds-color-text-primary, value(B10));
}

.root:active:not(:disabled),
.root:active:not(:disabled) .label {
  color: var(--wds-color-blue-200, value(B20));
}

.root:selected:not(:disabled),
.root:selected:not(:disabled) .label {
  color: var(--wds-color-text-primary, value(B10));
}

.root:newColorsBranding:skin(inverted):selected:not(:disabled) .label {
  color: var(--wds-color-text-primary, value(B10));
}

.root:selected:not(:disabled) .icon {
  background-color: var(--wds-color-fill-standard-secondary, value(B40));
}

.root:selected:hover:not(:disabled),
.root:selected:hover:not(:disabled) .label {
  color: var(--wds-color-text-primary, value(B10));
}

.root:selected:hover:not(:disabled) .icon {
  background-color: var(--wds-color-fill-standard-secondary-hover, value(B50));
}

.root:disabled,
.root:disabled .label {
  color: var(--wds-color-text-disabled, value(D55));
  cursor: default;
}

.root:disabled .icon {
  background-color: var(--wds-color-fill-standard-tertiary-disabled, value(D80));
}

.root:disabled:selected .icon {
  color: var(--wds-color-text-disabled-light, value(D80-70));
  background-color: var(--wds-color-fill-standard-secondary-disabled, value(D10-30));
}

.root:labelPlacement(end),
.root:labelPlacement(bottom) {
  display: block;
  max-width: 100%;
}

/* skin Dark */
.root:skin(dark):hover:not(:disabled),
.root:skin(dark):hover:not(:disabled) .label {
  color: var(--wds-color-text-standard-secondary, value(D30));
}

.root:skin(dark):active:not(:disabled),
.root:skin(dark):selected:not(:disabled),
.root:skin(dark):active:not(:disabled) .label,
.root:skin(dark):selected:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):labelPlacement(bottom):active:not(:disabled) .label,
.root:skin(dark):labelPlacement(bottom):selected:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary, value(D10));
}

.root:skin(dark):selected:not(:disabled) .icon {
  background-color: var(--wds-color-fill-dark-primary, value(D10));
}

.root:skin(dark):active:not(:disabled) .icon {
  background-color: var(--wds-color-fill-dark-primary-active, value(D10));
}

.root:skin(dark):active:not(:disabled),
.root:skin(dark):selected:hover:not(:disabled),
.root:skin(dark):active:not(:disabled) .label,
.root:skin(dark):selected:hover:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(dark):labelPlacement(bottom):active:not(:disabled) .label,
.root:skin(dark):labelPlacement(bottom):selected:hover:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary, value(D10));
}

.root:skin(dark):active:not(:disabled) .icon {
  background-color: var(--wds-color-fill-dark-primary-active, value(D20));
}

.root:skin(dark):selected:hover:not(:disabled) .icon {
  background-color: var(--wds-color-fill-dark-primary-hover, value(D20));
}

.root:skin(dark):disabled,
.root:skin(dark):disabled .label {
  color: var(--wds-color-text-disabled, value(D55));
}

.root:skin(dark):disabled .icon {
  background-color: var(--wds-color-fill-dark-tertiary-disabled, value(D80));
}

.root:skin(dark):selected:disabled .icon {
  background-color: var(--wds-color-fill-dark-primary-disabled, initial);
}

/* skin Inverted */
.root:skin(inverted):selected:hover:not(:disabled),
.root:skin(inverted):selected:not(:disabled) {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(inverted):selected:not(:disabled) .icon {
  background-color: var(--wds-color-fill-standard-primary, value(B10));
}

.root:skin(inverted):selected:hover:not(:disabled) .icon {
  background-color: var(--wds-color-fill-standard-primary-hover, value(B20));
}

.root:skin(inverted):not(:selected):hover .icon {
  background-color: var(--wds-color-fill-standard-tertiary-hover, value(B50));
}

.root:skin(inverted):selected:disabled .icon {
  background-color: var(--wds-color-fill-standard-primary-disabled, value(D10-30));
}

/* skin Destructive */
.root:skin(destructive):selected:not(:disabled),
.root:skin(destructive):selected:hover:not(:disabled) {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(destructive):hover:not(:disabled),
.root:skin(destructive):hover:not(:disabled) .label,
.root:skin(destructive):selected:not(:disabled) .label {
  color: var(--wds-color-text-destructive, value(R10));
}

.root:skin(destructive):shape(pill):selected:not(:disabled) .label,
.root:skin(destructive):shape(square):labelPlacement(end):selected:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}


.root:skin(destructive):selected:not(:disabled) .icon {
  background-color: var(--wds-color-fill-destructive-primary, value(R10));
}

.root:skin(destructive):selected:hover:not(:disabled) .icon {
  background-color: var(--wds-color-fill-destructive-primary-hover, value(R20));
}

.root:skin(destructive):selected:not(:disabled) .icon:border {
  outline-color: transparent;
}

.root:skin(destructive):selected:hover:not(:disabled) .icon:border {
  outline-color: transparent;
}

.root:skin(destructive):hover:not(:disabled) .icon:border {
  outline-color: var(--wds-color-border-destructive-tertiary-hover, value(R30));
}

.root:skin(destructive):selected:disabled .icon {
  background-color: var(--wds-color-fill-destructive-primary-disabled, value(D10-30));
}

/* skin Success */
.root:skin(success):selected:not(:disabled),
.root:skin(success):selected:hover:not(:disabled) {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(success):hover:not(:disabled),
.root:skin(success):hover:not(:disabled) .label,
.root:skin(success):selected:not(:disabled) .label {
  color: var(--wds-color-text-success, value(G10));
}

.root:skin(success):shape(pill):selected:not(:disabled) .label,
.root:skin(success):shape(square):labelPlacement(end):selected:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.root:skin(success):selected:not(:disabled) .icon {
  background-color: var(--wds-color-fill-success-primary, value(G10));
}

.root:skin(success):selected:hover:not(:disabled) .icon {
  background-color: var(--wds-color-fill-success-primary-hover, value(G20));
}

.root:skin(success):selected:not(:disabled) .icon:border {
  outline-color: transparent;
}

.root:skin(success):selected:hover:not(:disabled) .icon:border {
  outline-color: transparent;
}

.root:skin(success):hover:not(:disabled) .icon:border {
  outline-color: var(--wds-color-border-success-tertiary-hover, value(G30));
}

.root:skin(success):selected:disabled .icon {
  background-color: var(--wds-color-fill-success-primary-disabled, value(D10-30));
}

/* icon */
.icon {
  -st-extends: Focusable;
  -st-states: border, size(enum(tiny, small, medium, large));

  display: flex;
  align-items: center;

  outline: none;
  background-color: var(--wds-color-fill-standard-tertiary-disabled, value(D80));
  transition: all 100ms value(ease-9);
}

.root:focus-visible .icon {
  box-shadow: var(--wds-shadow-focus-standard, 0 0 0 3px value(F00));
}

.icon:size(tiny) {
  border-radius: var(--wds-border-radius-200, 4px);
  padding: 3px;
}

.icon:size(small) {
  border-radius: var(--wds-border-radius-200, 4px);
  padding: 6px;
}

.icon:size(medium) {
  border-radius: var(--wds-border-radius-300, 6px);
  padding: 6px;
}

.icon:size(large) {
  border-radius: var(--wds-border-radius-300, 6px);
  padding: 9px;
}

/* shape Round */
.root:shape(round) .icon {
  border-radius: var(--wds-border-radius-full, 100%);
}

/* shape Pill */
.root:shape(pill) .icon {
  border-radius: var(--wds-border-radius-full, 36px);
}

.root:shape(pill) .icon:size(tiny) {
  padding: 3px 0;
  padding-inline: var(--wds-toggle-button-padding-left-tiny-round, 6px) var(--wds-toggle-button-padding-right-tiny-round, 12px);
}

.root:shape(pill) .icon:size(small) {
  padding: 6px 0;
  padding-inline: var(--wds-toggle-button-padding-left-small-round, 12px) var(--wds-toggle-button-padding-right-small-round, 18px);
}

.root:shape(pill) .icon:size(medium) {
  padding: 6px 0;
  padding-inline: var(--wds-toggle-button-padding-left-medium-round, 12px) var(--wds-toggle-button-padding-right-medium-round, 24px);
}

.root:shape(pill) .icon:size(large) {
  padding: 9px 0;
  padding-inline: var(--wds-toggle-button-padding-left-large-round, 12px) var(--wds-toggle-button-padding-right-large-round, 30px);
}

.root:labelPlacement(end) .icon,
.root:labelPlacement(bottom) .icon {
  max-width: 100%;
}

/* label */
.label {
  -st-states: placement(enum(tooltip, end, bottom)),
    size(enum(tiny, small, medium, large)),
    shape(enum(square, pill, round));

  transition: all 100ms value(ease-9);
}

.label:placement(end):size(tiny) {
  padding: 0 var(--wds-space-50, 3px);
}

.label:placement(end):size(small),
.label:placement(end):size(medium) {
  padding: 0 var(--wds-space-100, 6px);
}

.label:placement(end):size(large) {
  padding: 0 var(--wds-space-200, 9px);
}

.label:shape(pill) {
  padding-inline-start: var(--wds-space-50, 3px);
}

.label:shape(pill):size(tiny) {
  padding-inline-start: var(--wds-space-50, 3px);
}

.label:shape(pill):size(small),
.label:shape(pill):size(medium) {
  padding-inline-start: var(--wds-space-100, 6px);
}

.label:shape(pill):size(large) {
  padding-inline-start: var(--wds-space-200, 12px);
}

.label:placement(bottom) {
  margin-top: var(--wds-space-150, 9px);
}

.root:skin(inverted):shape(pill):selected:not(:disabled) .label,
.root:skin(inverted):shape(square):labelPlacement(end):active:not(:disabled) .label,
.root:skin(inverted):shape(square):labelPlacement(end):selected:not(:disabled) .label {
  color: var(--wds-color-text-standard-primary-light, value(D80));
}

.labelContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.tooltip {
  -st-extends: Tooltip;
  max-width: 100%;
  box-sizing: border-box;
  display: inline-flex;
}

.tooltip::element {
  max-width: 100%;
  display: inline-flex;
}

/* Border */
.icon:border {
  outline: 1px solid;
  outline-offset: -1px;
  outline-color: var(--wds-color-border-standard-tertiary, value(D60));
}

.root:hover .icon:border {
  outline-color: var(--wds-color-border-standard-tertiary-hover, value(B40));
}

.root:selected .icon:border,
.root:selected:hover .icon:border {
  outline-color: transparent;
}

.root:active .icon:border {
  outline-color: var(--wds-color-border-standard-tertiary-active, value(B30));
}

.root:disabled .icon:border {
  outline-color: var(--wds-color-border-standard-tertiary-disabled, value(D60));
}

.root:selected:skin(inverted) .icon:border {
  outline-color: transparent;
}

.root:selected:skin(inverted):hover .icon:border {
  outline-color: transparent;
}

.root:disabled:selected .icon:border {
  outline-color: transparent;
}

/* st-namespace-reference="../../../src/ToggleButton/ToggleButton.st.css" */