.alert-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--size-icon-small);
  flex-shrink: 0;
}

.alert-icon svg {
  display: block;
  flex-shrink: 0;
}

.alert-icon[data-color='gray'] {
  color: var(--color-gray);
}

.alert-icon[data-color='blue'] {
  color: var(--color-blue);
}

.alert-icon[data-color='orange'] {
  color: var(--color-orange);
}

.alert-icon[data-color='red'] {
  color: var(--color-red);
}

.alert-icon[data-color='green'] {
  color: var(--color-green);
}

.alert-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-family: var(--typography-font-sans);
  font-size: var(--font-size-medium-16);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-small-22);
  color: var(--color-base);
  justify-content: center;
}

.alert-view {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  box-sizing: border-box;
}

.alert-view:not(.alert-inline) {
  min-height: 64px;
  padding: var(--spacing-16);
  border-width: var(--border-width-base);
  border-style: solid;
  border-radius: var(--border-radius-base);
}

.alert-view.alert-inline {
  padding: var(--spacing-8);
}

.alert-view.alert-motion {
  padding: 0;
  align-items: flex-start;
}

.alert-view .alert-motion-content {
  display: contents;
}

.alert-view.alert-motion .alert-motion-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: var(--spacing-16);
}

.alert-view.alert-motion.alert-inline .alert-motion-content {
  padding: var(--spacing-8);
}

[data-js] .alert-view.alert-motion-pending {
  height: 0;
  min-height: 0;
  overflow: hidden;
  animation: alert-motion-unblock 0s linear 3s 1 forwards;
}

[data-js] .alert-view.alert-motion-pending .alert-motion-content {
  opacity: 0;
  padding-block: 0;
  animation: alert-motion-unblock 0s linear 3s 1 forwards;
}

@keyframes alert-motion-unblock {
to {
  height: auto;
  overflow: visible;
  opacity: 1;
}
}

.alert-view.alert-gray:not(.alert-inline) {
  background-color: var(--background-color-gray-subtle);
  border-color: var(--border-color-gray);
}

.alert-view.alert-blue:not(.alert-inline) {
  background-color: var(--background-color-blue-subtle);
  border-color: var(--border-color-blue);
}

.alert-view.alert-orange:not(.alert-inline) {
  background-color: var(--background-color-orange-subtle);
  border-color: var(--border-color-orange);
}

.alert-view.alert-red:not(.alert-inline) {
  background-color: var(--background-color-red-subtle);
  border-color: var(--border-color-red);
}

.alert-view.alert-green:not(.alert-inline) {
  background-color: var(--background-color-green-subtle);
  border-color: var(--border-color-green);
}

.alert-view.alert-dynamic {
  pointer-events: auto;
}

.alert-view .alert-motion-content-entering {
  animation: 0.4s ease 1 both alert-motion-content-enter;
}

.alert-view button.alert-dismiss {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
  align-self: center;
  min-width: var(--min-size-interactive-touch) !important;
  min-height: var(--min-size-interactive-touch) !important;
  width: var(--min-size-interactive-touch) !important;
  height: var(--min-size-interactive-touch) !important;
  padding: 0 !important;
  border: var(--border-transparent) !important;
  border-radius: var(--border-radius-circle) !important;
  background-color: var(--background-color-transparent) !important;
  color: var(--color-base) !important;
  cursor: var(--cursor-base-hover);
  transition: var(--transition-property-base) var(--transition-duration-base) var(--transition-timing-function-system);
}

.alert-view .alert-dismiss svg {
  display: block;
}

.alert-view.alert-gray .alert-dismiss:hover, .alert-view.alert-gray .alert-dismiss:focus-visible {
  background-color: var(--background-color-gray-subtle-hover) !important;
}

.alert-view.alert-gray .alert-dismiss:active {
  background-color: var(--background-color-gray-subtle-active) !important;
}

.alert-view.alert-blue .alert-dismiss:hover, .alert-view.alert-blue .alert-dismiss:focus-visible {
  background-color: var(--background-color-blue-subtle-hover) !important;
}

.alert-view.alert-blue .alert-dismiss:active {
  background-color: var(--background-color-blue-subtle-active) !important;
}

.alert-view.alert-orange .alert-dismiss:hover, .alert-view.alert-orange .alert-dismiss:focus-visible {
  background-color: var(--background-color-orange-subtle-hover) !important;
}

.alert-view.alert-orange .alert-dismiss:active {
  background-color: var(--background-color-orange-subtle-active) !important;
}

.alert-view.alert-red .alert-dismiss:hover, .alert-view.alert-red .alert-dismiss:focus-visible {
  background-color: var(--background-color-red-subtle-hover) !important;
}

.alert-view.alert-red .alert-dismiss:active {
  background-color: var(--background-color-red-subtle-active) !important;
}

.alert-view.alert-green .alert-dismiss:hover, .alert-view.alert-green .alert-dismiss:focus-visible {
  background-color: var(--background-color-green-subtle-hover) !important;
}

.alert-view.alert-green .alert-dismiss:active {
  background-color: var(--background-color-green-subtle-active) !important;
}

@keyframes alert-motion-content-enter {
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}