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

wix-style-react

/* st-namespace-reference="../../../src/FloatingNotification/FloatingNotification.st.css" */
:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: D80, B50, B30, G50, G30, R50, R30, Y50, Y30, P50, P30, D70, D50, D10;
}

.root {
  -st-states: type(enum(standard, success, destructive, warning, premium, preview, dark)), fullWidth;
  border-radius: 6px;
  border-width: 1px;
  border-style: solid;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding-inline-start: 12px;
  padding-inline-end: 6px;
  min-width: 330px;
  max-width: 540px;
  box-sizing: border-box;
}

.root > *:first-child {
  margin-inline-start: 0;
}

.root:fullWidth {
  border-radius: 0;
  border-left: none;
  border-right: none;
  max-width: 100%;
  width: 100%;
  height: 42px;
  padding-inline-start: 30px;
  padding-inline-end: 15px;
}

.root:type(standard) {
  background-color: value(B50);
  border-color: value(B30);
}

.root:type(success) {
  background-color: value(G50);
  border-color: value(G30);
}

.root:type(destructive) {
  background-color: value(R50);
  border-color: value(R30);
}

.root:type(warning) {
  background-color: value(Y50);
  border-color: value(Y30);
}

.root:type(premium) {
  background-color: value(P50);
  border-color: value(P30);
}

.root:type(preview) {
  background-color: value(D70);
  border-color: value(D50);
}

.root:type(dark) {
  background-color: value(D10);
  border-color: value(D10);
}

.root:type(dark) .icon {
  color: value(D80);
}

.icon {
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.text,
.textButton {
  margin-inline-start: 6px;
}

.button {
  margin-inline-start: 12px;
}

.button,
.textButton {
  max-width: 25%;
}

.gap {
  min-width: 24px;
  flex-grow: 1;
}

.close {
  flex-shrink: 0;
}