.ty-alert {
  border: 1px solid;
  border-radius: var(--ty-alert-border-radius);
  box-sizing: border-box;
  padding: var(--ty-alert-padding);
  position: relative;
  font-weight: var(--ty-alert-font-weight);
  opacity: 1;
  font-size: var(--ty-alert-font-size);
  transition: all var(--ty-alert-transition-duration);
  transform-origin: center top;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}
.ty-alert + .ty-alert {
  margin-top: var(--ty-alert-stack-gap);
}
.ty-alert__content {
  flex: 1;
  overflow: hidden;
}
.ty-alert__title {
  box-sizing: border-box;
  margin: 0;
  font-size: var(--ty-alert-title-font-size);
  font-weight: var(--ty-alert-title-font-weight);
}
.ty-alert__title_has-content {
  margin-bottom: var(--ty-alert-title-margin-bottom);
}
.ty-alert__desc {
  box-sizing: border-box;
  line-height: var(--ty-alert-desc-line-height);
}
.ty-alert__icon {
  line-height: var(--ty-alert-desc-line-height);
  margin-right: var(--ty-alert-icon-gap);
  position: relative;
  top: var(--ty-alert-icon-offset-top);
}
.ty-alert__close-btn {
  position: absolute;
  top: var(--ty-alert-close-offset-top);
  right: var(--ty-alert-close-offset-inline-end);
  cursor: pointer;
  float: right;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.ty-alert_error {
  border-color: var(--ty-color-danger-border);
  background-color: var(--ty-color-danger-bg);
  color: var(--ty-color-danger-text);
}
.ty-alert_warning {
  border-color: var(--ty-color-warning-border);
  background-color: var(--ty-color-warning-bg);
  color: var(--ty-color-warning-text);
}
.ty-alert_success {
  border-color: var(--ty-color-success-border);
  background-color: var(--ty-color-success-bg);
  color: var(--ty-color-success-text);
}
.ty-alert_info {
  border-color: var(--ty-color-info-border);
  background-color: var(--ty-color-info-bg);
  color: var(--ty-color-info-text);
}