@adobe/spectrum-css/dist/components/toast/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Toast {
  box-sizing: border-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: stretch;
      align-items: stretch;

  border-radius: var(--spectrum-toast-border-radius, var(--spectrum-global-dimension-static-size-50));

  padding: var(--spectrum-toast-padding-y, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-right, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-y, var(--spectrum-global-dimension-size-100)) var(--spectrum-toast-padding-left, var(--spectrum-global-dimension-size-200));

  font-size: var(--spectrum-toast-text-size, var(--spectrum-alias-font-size-default));
  font-weight: var(--spectrum-toast-text-font-weight, var(--spectrum-global-font-weight-bold));
  -webkit-font-smoothing: antialiased;
}

.spectrum-Toast-typeIcon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-positive: 0;
      flex-grow: 0;

  margin: var(--spectrum-global-dimension-size-85) var(--spectrum-toast-icon-padding-right, var(--spectrum-global-dimension-size-150)) var(--spectrum-global-dimension-size-85) 0;
}

.spectrum-Toast-content {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  display: inline-block;
  box-sizing: border-box;
  padding: var(--spectrum-global-dimension-size-65) var(--spectrum-toast-content-padding-right, var(--spectrum-global-dimension-size-200)) var(--spectrum-global-dimension-size-65) 0;
  text-align: left;
}

.spectrum-Toast-buttons {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  -ms-flex-align: start;
      align-items: flex-start;
}

.spectrum-Toast-buttons .spectrum-Button + .spectrum-Button,
    .spectrum-Toast-buttons .spectrum-Button + .spectrum-ClearButton,
    .spectrum-Toast-buttons .spectrum-ClearButton + .spectrum-Button,
    .spectrum-Toast-buttons .spectrum-ClearButton + .spectrum-ClearButton {
      margin-left: var(--spectrum-toast-button-gap, var(--spectrum-global-dimension-size-100));
    }

.spectrum-Toast-body {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.spectrum-Toast-body .spectrum-Button {
    float: right;
    margin-right: var(--spectrum-global-dimension-size-130);
  }

.spectrum-Toast-body + .spectrum-Toast-buttons {
    padding-left: var(--spectrum-toast-padding-right, var(--spectrum-global-dimension-size-100));

    border-left-width: 1px;
    border-left-style: solid;
  }

.spectrum-Toast {
  background-color: var(--spectrum-toast-background-color, var(--spectrum-global-color-static-gray-700));
  color: var(--spectrum-toast-background-color, var(--spectrum-global-color-static-gray-700));
}

.spectrum-Toast-content {
  color: var(--spectrum-toast-text-color, var(--spectrum-global-color-static-white));
}

.spectrum-Toast-typeIcon {
  color: white;
}

.spectrum-Toast-buttons {
  border-left-color: rgba(255, 255, 255, 0.2);
}

.spectrum-Toast--warning {
  background-color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700));
  color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700));
}

.spectrum-Toast--warning .spectrum-Toast-closeButton.focus-ring:not(:active) {
      color: var(--spectrum-toast-warning-background-color, var(--spectrum-global-color-static-orange-700));
    }

.spectrum-Toast--negative,
/** @deprecated */.spectrum-Toast--error {
  background-color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700));
  color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700));
}

.spectrum-Toast--negative .spectrum-Toast-closeButton.focus-ring:not(:active), .spectrum-Toast--error .spectrum-Toast-closeButton.focus-ring:not(:active) {
      color: var(--spectrum-toast-error-background-color, var(--spectrum-global-color-static-red-700));
    }

.spectrum-Toast--info {
  background-color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700));
  color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700));
}

.spectrum-Toast--info .spectrum-Toast-closeButton.focus-ring:not(:active) {
      color: var(--spectrum-toast-info-background-color, var(--spectrum-global-color-static-blue-700));
    }

.spectrum-Toast--positive,
/** @deprecated */.spectrum-Toast--success {
  background-color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700));
  color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700));
}

.spectrum-Toast--positive .spectrum-Toast-closeButton.focus-ring:not(:active), .spectrum-Toast--success .spectrum-Toast-closeButton.focus-ring:not(:active) {
      color: var(--spectrum-toast-positive-background-color, var(--spectrum-global-color-static-green-700));
    }