.gux-illustration {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--gse-ui-blankState-mainIllustration-width);
  block-size: var(--gse-ui-blankState-mainIllustration-height);
}

.gux-background-shape {
  grid-area: 1/1;
  inline-size: var(--gse-ui-blankState-mainIllustration-background-width);
  block-size: var(--gse-ui-blankState-mainIllustration-background-height);
}
.gux-background-shape.gux-background-shape-solid-wide, .gux-background-shape.gux-background-shape-solid-narrow,
.gux-background-shape svg {
  fill: var(--gse-ui-blankState-mainIllustration-background-solidColor);
}
.gux-background-shape.gux-background-shape-gradient-wide svg, .gux-background-shape.gux-background-shape-gradient-narrow svg {
  fill: url("#gux-background-gradient");
  --gradient-start: #ffffff0d;
  --gradient-end: #bfc6d933;
}

.gux-illustration-variant {
  display: flex;
  grid-area: 1/1;
  place-items: center;
}
.gux-illustration-variant svg {
  inline-size: var(--gse-ui-blankState-mainIllustration-illustration-height);
  block-size: var(--gse-ui-blankState-mainIllustration-illustration-height);
  fill: var(--gse-ui-blankState-mainIllustration-illustrationColor);
}

.gux-illustration-status {
  position: absolute;
  inset-block-start: var(--gse-ui-blankState-mainIllustration-smallIcon-position-left);
  inset-inline-start: var(--gse-ui-blankState-mainIllustration-smallIcon-position-top);
}
.gux-illustration-status svg {
  inline-size: var(--gse-ui-icon-large-size);
  block-size: var(--gse-ui-icon-large-size);
}
.gux-illustration-status.gux-illustration-status-success svg path:first-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-successBaseColor);
}
.gux-illustration-status.gux-illustration-status-success svg path:last-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-successSymbolColor);
}
.gux-illustration-status.gux-illustration-status-error svg path:first-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-errorBaseColor);
}
.gux-illustration-status.gux-illustration-status-error svg path:last-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-errorSymbolColor);
}
.gux-illustration-status.gux-illustration-status-info svg path:first-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-infoBaseColor);
}
.gux-illustration-status.gux-illustration-status-info svg path:last-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-infoSymbolColor);
}
.gux-illustration-status.gux-illustration-status-add svg path:first-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-operationBaseColor);
}
.gux-illustration-status.gux-illustration-status-add svg path:last-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-operationSymbolColor);
}
.gux-illustration-status.gux-illustration-status-warning svg path:first-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-warningBaseColor);
}
.gux-illustration-status.gux-illustration-status-warning svg path:last-child {
  fill: var(--gse-ui-blankState-mainIllustration-smallIcon-warningSymbolColor);
}