:host {
  display: block;
}

.wb-alert {
  color: var(--wb-alert__color);
  font-family: var(--wb-alert__font-family);
  font-size: var(--wb-alert__font-size);
  font-style: var(--wb-alert__font-style);
  font-weight: var(--wb-alert__font-weight);
  line-height: var(--wb-alert__line-height);
  letter-spacing: var(--wb-alert__letter-spacing);
  text-transform: var(--wb-alert__text-transform);
  text-align: var(--wb-alert__text-align);
  opacity: var(--wb-alert__opacity);
  padding-top: var(--wb-alert__bezel-top--type, var(--wb-alert__bezel--type, var(--wb-alert__bezel-top, var(--wb-alert__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-right: var(--wb-alert__bezel-right--type, var(--wb-alert__bezel--type, var(--wb-alert__bezel-right, var(--wb-alert__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-bottom: var(--wb-alert__bezel-bottom--type, var(--wb-alert__bezel--type, var(--wb-alert__bezel-bottom, var(--wb-alert__bezel, var(--wb-ds-space--s, 1rem)))));
  padding-left: var(--wb-alert__bezel-left--type, var(--wb-alert__bezel--type, var(--wb-alert__bezel-left, var(--wb-alert__bezel, var(--wb-ds-space--s, 1rem)))));
  --wb-alert__box-shadow--value: var(--wb-alert__box-shadow--type, var(--wb-alert__box-shadow, var(--wb-ds-border-is-box-shadow)));
  --wb-alert__border-width--value: var(--wb-alert__border-width--type, var(--wb-alert__border-width, var(--wb-ds-border-width--default)));
  --wb-alert__border-color--value: var(--wb-alert__border-color--type, var(--wb-alert__border-color, var(--wb-ds-color-border--default)));
  --wb-alert__blur-radius--value: var(--wb-alert__blur-radius--type, var(--wb-alert__blur-radius, var(--wb-ds-border-blur-radius--default, 0)));
  --wb-alert__spread-radius--value: var(--wb-alert__spread-radius--type, var(--wb-alert__spread-radius, var(--wb-ds-border-spread-radius--default, 0)));
  --wb-alert__box-shadow-top--value: var(--wb-alert__box-shadow-top, inset 0px var(--wb-alert__border-width--value) var(--wb-alert__blur-radius--value) var(--wb-alert__spread-radius--value) var(--wb-alert__border-color--value));
  --wb-alert__box-shadow-right--value: var(--wb-alert__box-shadow-right, inset calc(var(--wb-alert__border-width--value) * -1) 0px var(--wb-alert__blur-radius--value) var(--wb-alert__spread-radius--value) var(--wb-alert__border-color--value));
  --wb-alert__box-shadow-bottom--value: var(--wb-alert__box-shadow-bottom, inset 0px calc(var(--wb-alert__border-width--value) * -1) var(--wb-alert__blur-radius--value) var(--wb-alert__spread-radius--value) var(--wb-alert__border-color--value));
  --wb-alert__box-shadow-left--value: var(--wb-alert__box-shadow-left, inset var(--wb-alert__border-width--value) 0px var(--wb-alert__blur-radius--value) var(--wb-alert__spread-radius--value) var(--wb-alert__border-color--value));
  box-shadow: var(--wb-alert__box-shadow--value, var(--wb-alert__box-shadow-left--value), var(--wb-alert__box-shadow-right--value), var(--wb-alert__box-shadow-top--value), var(--wb-alert__box-shadow-bottom--value));
  border-top: var(--wb-alert__border-top--type, var(--wb-alert__border--type, var(--wb-alert__border-top, var(--wb-alert__border, var(--wb-ds-border-is-border)))));
  border-right: var(--wb-alert__border-right--type, var(--wb-alert__border--type, var(--wb-alert__border-right, var(--wb-alert__border, var(--wb-ds-border-is-border)))));
  border-bottom: var(--wb-alert__border-bottom--type, var(--wb-alert__border--type, var(--wb-alert__border-bottom, var(--wb-alert__border, var(--wb-ds-border-is-border)))));
  border-left: var(--wb-alert__border-left--type, var(--wb-alert__border--type, var(--wb-alert__border-left, var(--wb-alert__border, var(--wb-ds-border-is-border)))));
  border-radius: var(--wb-alert__border-radius--type, var(--wb-alert__border-radius, var(--wb-ds-border-radius--default)));
  outline: var(--wb-alert__outline--type, var(--wb-alert__outline, var(--wb-ds-border-is-outline)));
  transition: var(--wb-alert__transition--type, var(--wb-alert__transition));
  background: var(--wb-alert__background--type, var(--wb-alert__background, var(--wb-ds-color-background--default, initial)));
  box-sizing: border-box;
  height: 100%;
  position: relative;
}
.wb-alert * {
  --wb-alert__bezel: initial;
  --wb-alert__bezel-top: initial;
  --wb-alert__bezel-right: initial;
  --wb-alert__bezel-bottom: initial;
  --wb-alert__bezel-left: initial;
}
.wb-alert * {
  --wb-alert__border-color: initial;
  --wb-alert__border-radius: initial;
  --wb-alert__border-width: initial;
  --wb-alert__box-shadow: initial;
  --wb-alert__box-shadow-top: initial;
  --wb-alert__box-shadow-right: initial;
  --wb-alert__box-shadow-bottom: initial;
  --wb-alert__box-shadow-left: initial;
  --wb-alert__border: initial;
  --wb-alert__border-top: initial;
  --wb-alert__border-right: initial;
  --wb-alert__border-bottom: initial;
  --wb-alert__border-left: initial;
  --wb-alert__outline: initial;
  --wb-alert__transition: initial;
}
.wb-alert * {
  --wb-alert__background: initial;
}
.wb-alert--closed {
  display: none;
}
.wb-alert--info {
  --wb-alert__bezel--type: var(--wb-alert-is-info__bezel);
  --wb-alert__bezel-bottom--type: var(--wb-alert-is-info__bezel-bottom);
  --wb-alert__bezel-top--type: var(--wb-alert-is-info__bezel-top);
  --wb-alert__bezel-right--type: var(--wb-alert-is-info__bezel-right);
  --wb-alert__bezel-left--type: var(--wb-alert-is-info__bezel-left);
  --wb-alert__border--type: var(--wb-alert-is-info__border);
  --wb-alert__outline--type: var(--wb-alert-is-info__outline);
  --wb-alert__box-shadow--type: var(--wb-alert-is-info__box-shadow);
  --wb-alert__border-radius--type: var(--wb-alert-is-info__border-radius);
  --wb-alert__border-left--type: var(--wb-alert-is-info__border-left);
  --wb-alert__border-bottom--type: var(--wb-alert-is-info__border-bottom);
  --wb-alert__border-right--type: var(--wb-alert-is-info__border-right);
  --wb-alert__border-top--type: var(--wb-alert-is-info__border-top);
  --wb-alert__background--type: var(--wb-alert-is-info__background, var(--wb-ds-color-info--light));
}
.wb-alert--success {
  --wb-alert__bezel--type: var(--wb-alert-is-success__bezel);
  --wb-alert__bezel-bottom--type: var(--wb-alert-is-success__bezel-bottom);
  --wb-alert__bezel-top--type: var(--wb-alert-is-success__bezel-top);
  --wb-alert__bezel-right--type: var(--wb-alert-is-success__bezel-right);
  --wb-alert__bezel-left--type: var(--wb-alert-is-success__bezel-left);
  --wb-alert__border--type: var(--wb-alert-is-success__border);
  --wb-alert__outline--type: var(--wb-alert-is-success__outline);
  --wb-alert__box-shadow--type: var(--wb-alert-is-success__box-shadow);
  --wb-alert__border-radius--type: var(--wb-alert-is-success__border-radius);
  --wb-alert__border-left--type: var(--wb-alert-is-success__border-left);
  --wb-alert__border-bottom--type: var(--wb-alert-is-success__border-bottom);
  --wb-alert__border-right--type: var(--wb-alert-is-success__border-right);
  --wb-alert__border-top--type: var(--wb-alert-is-success__border-top);
  --wb-alert__background--type: var(--wb-alert-is-success__background, var(--wb-ds-color-success--light));
}
.wb-alert--warning {
  --wb-alert__bezel--type: var(--wb-alert-is-warning__bezel);
  --wb-alert__bezel-bottom--type: var(--wb-alert-is-warning__bezel-bottom);
  --wb-alert__bezel-top--type: var(--wb-alert-is-warning__bezel-top);
  --wb-alert__bezel-right--type: var(--wb-alert-is-warning__bezel-right);
  --wb-alert__bezel-left--type: var(--wb-alert-is-warning__bezel-left);
  --wb-alert__border--type: var(--wb-alert-is-warning__border);
  --wb-alert__outline--type: var(--wb-alert-is-warning__outline);
  --wb-alert__box-shadow--type: var(--wb-alert-is-warning__box-shadow);
  --wb-alert__border-radius--type: var(--wb-alert-is-warning__border-radius);
  --wb-alert__border-left--type: var(--wb-alert-is-warning__border-left);
  --wb-alert__border-bottom--type: var(--wb-alert-is-warning__border-bottom);
  --wb-alert__border-right--type: var(--wb-alert-is-warning__border-right);
  --wb-alert__border-top--type: var(--wb-alert-is-warning__border-top);
  --wb-alert__background--type: var(--wb-alert-is-warning__background, var(--wb-ds-color-warning--light));
}
.wb-alert--error {
  --wb-alert__bezel--type: var(--wb-alert-is-error__bezel);
  --wb-alert__bezel-bottom--type: var(--wb-alert-is-error__bezel-bottom);
  --wb-alert__bezel-top--type: var(--wb-alert-is-error__bezel-top);
  --wb-alert__bezel-right--type: var(--wb-alert-is-error__bezel-right);
  --wb-alert__bezel-left--type: var(--wb-alert-is-error__bezel-left);
  --wb-alert__border--type: var(--wb-alert-is-error__border);
  --wb-alert__outline--type: var(--wb-alert-is-error__outline);
  --wb-alert__box-shadow--type: var(--wb-alert-is-error__box-shadow);
  --wb-alert__border-radius--type: var(--wb-alert-is-error__border-radius);
  --wb-alert__border-left--type: var(--wb-alert-is-error__border-left);
  --wb-alert__border-bottom--type: var(--wb-alert-is-error__border-bottom);
  --wb-alert__border-right--type: var(--wb-alert-is-error__border-right);
  --wb-alert__border-top--type: var(--wb-alert-is-error__border-top);
  --wb-alert__background--type: var(--wb-alert-is-error__background, var(--wb-ds-color-error--light));
}
.wb-alert__close-button {
  position: absolute;
  top: var(--wb-alert-close-button__position-top, 10px);
  right: var(--wb-alert-close-button__position-right, 10px);
}