.ads-Toast {
  @apply rounded
    bg-gray-900
    text-white
    relative
    overflow-hidden
    pt-3 pb-5 px-4
    shadow-popover;

  width: 462px;
}

.ads-Toast-closeButton {
  @apply absolute
    text-gray-400
    hover:text-white;

  top: 10px;
  right: 10px;
}

.ads-Toast-body {
  @apply flex-col
    gap-y-1
    text-left
    text-body;

  line-height: 1.35;
  min-height: 42px;
  word-break: break-word;
}

.ads-Toast-title {
  @apply text-white;
}

.ads-Toast-progressBar {
  @apply absolute
  bottom-0
  left-0
  right-0
  h-2
  w-full;
}

.ads-Toast-progressBar--default {
  @apply bg-gray-300;
}

.ads-Toast-progressBar--danger {
  @apply bg-red-300;
}

.ads-Toast-progressBar--warning {
  @apply bg-gold-300;
}

.ads-Toast-progressBar--success {
  @apply bg-green-300;
}

.ads-Toast-link {
  @apply flex
    items-center
    w-full
    h-full
    rounded-b
    px-4
    -mx-4
    text-white
    underline
    transition-colors
    hover:text-gray-400;

  height: 42px;
  width: calc(100% + theme("width.10"));
}

.ads-Toast-link + .ads-Toast-link {
  @apply border-t
    border-white/20;
}

.ads-Toast-linkIcon {
  @apply text-gray-400
    text-[10px]
    w-4
    h-4
    items-center
    justify-center
    ml-auto
    flex-shrink-0
    transition-transform;

  margin-right: 7px;
}

.ads-Toast-link:hover .ads-Toast-linkIcon,
.ads-Toast-link:focus .ads-Toast-linkIcon {
  transform: translateX(2px);
}

.ads-Toast-message {
  @apply flex
    items-start
    gap-x-2
    text-bodySm
    leading-normal
    py-2;
}

.ads-Toast-message a {
  @apply transition-colors;

  color: inherit;
  text-decoration: underline;
}

.ads-Toast-message a:hover,
.ads-Toast-message a:focus {
  @apply text-gray-400;
}

.ads-Toast-icon {
  @apply text-icon
    flex-shrink-0
    w-4;

  margin-top: 2px;
}

.ads-Toast--default .ads-Toast-icon {
  @apply text-gray-300;
}

.ads-Toast--danger .ads-Toast-icon {
  @apply text-red-300;
}

.ads-Toast--warning .ads-Toast-icon {
  @apply text-gold-300;
}

.ads-Toast--success .ads-Toast-icon {
  @apply text-green-300;
}

.ads-Toast-progressBar--animated {
  transform: translateX(-100%);
  animation: toast-progress var(--ads-toast-duration, 5000ms) linear forwards;
}

.ads-Toast:hover .ads-Toast-progressBar--animated {
  animation-play-state: paused;
}

@keyframes toast-progress {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}