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

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, B40, B50, D10, D55, D80, F00, G30, R10, R30, R60;
}

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D10-30;
}

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

.root {
  -st-states: skin(enum(standard, dark, destructive)), disabled, highlighted,
    ellipsis, newColorsBranding;
  -st-extends: Focusable;

  overflow: hidden;
  display: inline-flex;
  padding: 6px 24px 6px 18px;
  width: 100%;
  align-items: center;

  background-color: value(D80);
  cursor: pointer;

  text-align: start;

  outline: none;
  border: none;

  text-decoration: none;
}

.root:disabled {
  cursor: default;
  color: value(D10-30);
}

.root:not(:disabled):focus-visible {
  box-shadow: inset 0 0 0 3px value(F00);
}

/* Skin standard */
.root:skin(standard) .text,
.root:skin(standard) .prefixIcon,
.root:skin(standard) .suffixIcon {
  color: value(B10);
}

.root:skin(standard):highlighted,
.root:skin(standard):not(:disabled):hover {
  background-color: value(B50);
}

.root:skin(standard):disabled .text,
.root:skin(standard):disabled .prefixIcon,
.root:skin(standard):disabled .suffixIcon  {
  color: value(D10-30);
}

/* Skin dark */
.root:skin(dark) .text,
.root:skin(dark) .prefixIcon {
  color: value(D10);
}

.root:skin(dark):highlighted .text,
.root:skin(dark):highlighted .prefixIcon,
.root:skin(dark):highlighted .suffixIcon,
.root:skin(dark):not(:disabled):hover .text,
.root:skin(dark):not(:disabled):hover .prefixIcon,
.root:skin(dark):not(:disabled):hover .suffixIcon {
  color: value(B10);
}

.root:skin(dark):disabled .text,
.root:skin(dark):disabled .prefixIcon,
.root:skin(dark):disabled .suffixIcon {
  color: value(D10-30);
}

/* Skin destructive */
.root:skin(destructive) .text,
.root:skin(destructive) .prefixIcon,
.root:skin(destructive) .suffixIcon {
  color: value(R10);
}

.root:skin(destructive):disabled .text,
.root:skin(destructive):disabled .prefixIcon,
.root:skin(destructive):disabled .suffixIcon {
  color: value(D10-30);
}

.prefixIcon {
  -st-states: subtitle;
}

.prefixIcon {
  flex-shrink: 0;
}

.prefixIcon:subtitle {
  margin-block-end: auto;
}

.suffixIcon {
  -st-states: subtitle;
  flex-shrink: 0;
  margin-inline-start: 6px;
}

.suffixIcon:subtitle {
  margin-block-end: auto;
}

.textBox {
  margin-inline-start: 6px;
  flex-grow: 2;
}

.root:ellipsis .textBox {
  overflow: hidden;
}

.suffix {
  flex-grow: 1;
  max-width: 30%;
  margin-left: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* With new BM theme */
.root:newColorsBranding:skin(standard):not(:disabled) .text,
.root:newColorsBranding:skin(standard):not(:disabled) .prefixIcon,
.root:newColorsBranding:skin(standard):not(:disabled) .suffixIcon {
  color: value(D10);
}

.root:newColorsBranding:skin(standard):highlighted .text,
.root:newColorsBranding:skin(standard):highlighted .prefixIcon,
.root:newColorsBranding:skin(standard):not(:disabled):hover .text,
.root:newColorsBranding:skin(standard):not(:disabled):hover .prefixIcon,
.root:newColorsBranding:skin(standard):not(:disabled):hover .suffixIcon {
  color: value(B10);
}

.root:newColorsBranding:skin(dark):highlighted,
.root:newColorsBranding:skin(dark):not(:disabled):hover {
  background-color: value(B50);
}

.root:newColorsBranding:skin(destructive):highlighted,
.root:newColorsBranding:skin(destructive):not(:disabled):hover {
  background-color: value(R60);
}

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