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

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, B20, B30, B50, D10-30, D20, D80, THEME-TEXT-COLOR-PRIMARY, THEME-TEXT-COLOR-SECONDARY-LIGHT;
}

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

@st-import [
  --wds-list-item-select-title,
  --wds-list-item-select-title-disabled,
  --wds-list-item-select-active-title,
  --wds-list-item-select-active-title-disabled,

 --wds-list-item-select-subtitle,
 --wds-list-item-select-subtitle-disabled,
 --wds-list-item-select-active-subtitle,
 --wds-list-item-select-active-subtitle-disabled,

  --wds-list-item-select-fill,
  --wds-list-item-select-fill-active,
  --wds-list-item-select-active-fill-active,
  --wds-list-item-select-fill-hover,
  --wds-list-item-select-active-fill,
  --wds-list-item-select-active-fill-hover,
  --wds-list-item-select-active-fill-disabled,

  --wds-list-item-select-padding-vertical-small,
  --wds-list-item-select-padding-vertical-medium,
  --wds-list-item-select-padding-horizontal-small,
  --wds-list-item-select-padding-horizontal-medium,
  --wds-space-100,
] from "@wix/design-system-tokens/all.st.css";

.root {
  -st-states: checkbox, selected, disabled, highlighted, size(enum(small, medium));
  background-color: var(--wds-list-item-select-fill, value(D80));
  display: inline-flex;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
}

.root:checkbox:selected:highlighted,
.root:checkbox:selected:hover,
.root:highlighted,
.root:hover {
  background-color: var(--wds-list-item-select-fill-hover, value(B50));
}

.root:selected:highlighted,
.root:selected:hover {
  background-color: var(--wds-list-item-select-active-fill-hover, value(B20));
}

.root:active,
.root:checkbox:selected:active {
  background-color: var(--wds-list-item-select-fill-active, value(B50));
}

.root:selected:active {
  background-color: var(--wds-list-item-select-active-fill-active, value(B20));
}

.root:selected {
  background-color: var(--wds-list-item-select-active-fill, value(B10));
}

.root:checkbox:selected {
  background-color: var(--wds-list-item-select-fill, value(D80));
}

.root:disabled {
  pointer-events: none;
  cursor: initial;
}

.root:not(:checkbox) {
  padding-left: var(--wds-list-item-select-padding-horizontal-medium, 18px);
  padding-right: var(--wds-list-item-select-padding-horizontal-medium, 24px);
}

.root:not(:checkbox):size(small) {
  padding-left: var(--wds-list-item-select-padding-horizontal-small, 18px);
  padding-right: var(--wds-list-item-select-padding-horizontal-small, 24px);
}

:global([dir="rtl"]) .root:not(:checkbox) {
  padding-left: var(--wds-list-item-select-padding-horizontal-medium, 24px);
  padding-right: var(--wds-list-item-select-padding-horizontal-medium, 18px);
}

:global([dir="rtl"]) .root:not(:checkbox):size(small) {
  padding-left: var(--wds-list-item-select-padding-horizontal-small, 24px);
  padding-right: var(--wds-list-item-select-padding-horizontal-small, 18px);
}

/* Checkbox */
.fullWidthContent label {
  margin-left: var(--wds-list-item-select-padding-horizontal-medium, 18px);
  margin-right: var(--wds-list-item-select-padding-horizontal-medium, 24px);
}

.root:size(small) .fullWidthContent label {
  margin-left: var(--wds-list-item-select-padding-horizontal-small, 18px);
  margin-right: var(--wds-list-item-select-padding-horizontal-small, 24px);
}

:global([dir="rtl"]) .fullWidthContent label {
  margin-left: var(--wds-list-item-select-padding-horizontal-medium, 24px);
  margin-right: var(--wds-list-item-select-padding-horizontal-medium, 18px);
}

:global([dir="rtl"]) .root:size(small) .fullWidthContent label {
  margin-left: var(--wds-list-item-select-padding-horizontal-small, 24px);
  margin-right: var(--wds-list-item-select-padding-horizontal-small, 18px);
}

.fullWidthContent,
.fullWidthContent label {
  width: 100%;
}

/* Prefix & Suffix */
.textsWrapper >:not(.titleWrapper) {
  margin-top: auto;
  margin-bottom: auto;
  flex-shrink: 0;
  max-width: 30%;
}

.titleWrapper {
  -st-states: subtitle;
  margin: var(--wds-list-item-select-padding-vertical-medium, 6px) var(--wds-space-100, 6px);
  display: grid;
  line-height: initial;
  font-size: initial;
}

.root:size(small) .titleWrapper {
  margin: var(--wds-list-item-select-padding-vertical-small, 6px) var(--wds-space-100, 6px);
}

.titleWrapper:subtitle {
  margin: var(--wds-list-item-select-padding-vertical-medium, 9px) var(--wds-space-100, 6px);
}

.root:size(small) .titleWrapper:subtitle {
  margin: var(--wds-list-item-select-padding-vertical-small, 9px) var(--wds-space-100, 6px);
}

.title {
  -st-extends: Text;
}

.title:skin(standard) {
  color: var(--wds-list-item-select-title, value(THEME-TEXT-COLOR-PRIMARY));
}

.title:skin(disabled) {
  color: var(--wds-list-item-select-title-disabled, value(D10-30));
}

.root:selected:not(:checkbox) .title {
  color: var(--wds-list-item-select-active-title, value(D80));
}

.root:selected:disabled:not(:checkbox) {
  background-color: var(--wds-list-item-select-active-fill-disabled, value(D10-30));
}
.root:selected:disabled:not(:checkbox) .title {
  color: var(--wds-list-item-select-active-title-disabled, value(D80));
}

.prefix {
  -st-extends: Text;
  -st-states: subtitle;
  margin: auto 0;
}

.prefix:subtitle {
  margin: auto var(--wds-space-100, 6px) auto 0;
}

:global([dir="rtl"]) .prefix:subtitle {
  margin: auto 0 auto var(--wds-space-100, 6px);
}

.suffix {
  -st-extends: Text;
  margin: auto 0 auto auto;
}

:global([dir="rtl"]) .suffix {
  margin: auto auto auto 0;
}

.subtitle {
  -st-extends: Text;
}

.subtitle:skin(standard):secondary:light,
.prefix:skin(standard):secondary:light,
.suffix:skin(standard):secondary:light {
  color: var(--wds-list-item-select-subtitle, value(THEME-TEXT-COLOR-SECONDARY-LIGHT));
}

.subtitle:skin(disabled),
.prefix:skin(disabled),
.suffix:skin(disabled) {
  color: var(--wds-list-item-select-subtitle-disabled, value(D10-30));
}

.root:selected:not(:checkbox) .subtitle,
.root:selected:not(:checkbox) .prefix,
.root:selected:not(:checkbox) .suffix {
  color: var(--wds-list-item-select-active-subtitle, value(D80));
}

.root:selected:disabled:not(:checkbox) .subtitle,
.root:selected:disabled:not(:checkbox) .prefix,
.root:selected:disabled:not(:checkbox) .suffix {
  color: var(--wds-list-item-select-active-subtitle-disabled, value(D80));
}

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