:host {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
}

.gux-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--gse-ui-blankState-padding);
  color: var(--gse-ui-blankState-foregroundColor);
}
.gux-container.gux-no-padding {
  padding: 0;
}
.gux-container .gux-call-to-actions {
  display: flex;
  flex-direction: column;
  gap: var(--gse-ui-blankState-gapCtaGroup);
  padding-block-start: var(--gse-ui-blankState-gapContent);
}
.gux-container .gux-image {
  padding-block-end: var(--gse-ui-blankState-gapMain);
}
.gux-container .gux-message {
  padding-block-end: var(--gse-ui-blankState-gapMessage);
}
.gux-container .gux-guidance {
  text-align: center;
}
.gux-container ::slotted(gux-icon) {
  inline-size: var(--gse-ui-blankState-icon-size-lg);
  block-size: var(--gse-ui-blankState-icon-size-lg);
  color: var(--gse-ui-blankState-iconColor);
}
.gux-container slot[name=primary-message] {
  font-family: var(--gse-ui-progressAndLoading-blankState-large-header-fontFamily);
  font-size: var(--gse-ui-progressAndLoading-blankState-large-header-fontSize);
  font-weight: var(--gse-ui-progressAndLoading-blankState-large-header-fontWeight);
  line-height: var(--gse-ui-progressAndLoading-blankState-large-header-lineHeight);
  color: var(--gse-ui-blankState-foregroundColor);
  text-align: center;
}
.gux-container slot[name=additional-guidance] {
  font-family: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontFamily);
  font-size: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontSize);
  font-weight: var(--gse-ui-progressAndLoading-blankState-large-subheader-fontWeight);
  line-height: var(--gse-ui-progressAndLoading-blankState-large-subheader-lineHeight);
  color: var(--gse-ui-blankState-foregroundColor);
  text-align: center;
}
.gux-container.gux-alignment-left {
  align-items: flex-start;
}
.gux-container.gux-alignment-left slot[name=primary-message],
.gux-container.gux-alignment-left slot[name=additional-guidance] {
  text-align: start;
}
.gux-container.gux-alignment-left .gux-guidance {
  text-align: start;
}

@container (width < 570px) {
  .gux-container ::slotted(gux-icon) {
    inline-size: var(--gse-ui-blankState-icon-size-sm);
    block-size: var(--gse-ui-blankState-icon-size-sm);
  }
  .gux-container slot[name=primary-message] {
    font-family: var(--gse-ui-progressAndLoading-blankState-small-header-fontFamily);
    font-size: var(--gse-ui-progressAndLoading-blankState-small-header-fontSize);
    font-weight: var(--gse-ui-progressAndLoading-blankState-small-header-fontWeight);
    line-height: var(--gse-ui-progressAndLoading-blankState-small-header-lineHeight);
  }
  .gux-container slot[name=additional-guidance] {
    font-family: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontFamily);
    font-size: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontSize);
    font-weight: var(--gse-ui-progressAndLoading-blankState-small-subheader-fontWeight);
    line-height: var(--gse-ui-progressAndLoading-blankState-small-subheader-lineHeight);
  }
}