.floating-notification {
  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;

  /* the root is doubled so this keeps beating the slot margins below,
     the way the Stylable (0,2,0) rule beat the (0,1,0) slot rules */
  &#{&} > *:first-child {
    margin-inline-start: 0;
  }

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

  &#{&}--type-standard {
    background-color: var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff));
    border-color: var(--wds-color-blue-300, var(--wsr-color-B30, #a8caff));
  }

  &#{&}--type-success {
    background-color: var(--wds-color-green-500, var(--wsr-color-G50, #e1f4eb));
    border-color: var(--wds-color-green-300, var(--wsr-color-G30, #87cea5));
  }

  &#{&}--type-destructive {
    background-color: var(--wds-color-red-500, var(--wsr-color-R50, #fde3e1));
    border-color: var(--wds-color-red-300, var(--wsr-color-R30, #f69891));
  }

  &#{&}--type-warning {
    background-color: var(--wds-color-yellow-500, var(--wsr-color-Y50, #fff0d1));
    border-color: var(--wds-color-yellow-100, var(--wsr-color-Y10, #ffb700));
  }

  &#{&}--type-premium {
    background-color: var(--wds-color-purple-500, var(--wsr-color-P50, #f1e0f9));
    border-color: var(--wds-color-purple-300, var(--wsr-color-P30, #cf8cf1));
  }

  &#{&}--type-preview {
    background-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
    border-color: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &#{&}--type-dark {
    background-color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
    border-color: var(--wds-color-black-100, var(--wsr-color-D10, #000624));
  }

  &#{&}--type-dark &__icon {
    color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
  }

  & &__icon {
    height: 100%;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }

  & &__text,
  & &__text-button {
    margin-inline-start: 6px;
  }

  & &__button {
    margin-inline-start: 12px;
  }

  /* one class only, like the Stylable rule: Button's and TextButton's own
     ellipsis max-width is two classes and has to keep winning this */
  &__button,
  &__text-button {
    max-width: 25%;
  }

  & &__gap {
    min-width: 24px;
    flex-grow: 1;
  }

  & &__close {
    flex-shrink: 0;
  }
}