.ads-Toast {
  @apply rounded
    bg-white
    w-full
    shadow-popover
    mt-4
    mx-4;

  border-bottom-width: 3px;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  width: 460px;
}

.ads-Toast--default {
  @apply border-blue-400;
}

.ads-Toast--danger {
  @apply border-red-500;
}

.ads-Toast--warning {
  @apply border-caution;
}

.ads-Toast--success {
  @apply border-green-500;
}

.ads-Toast-header {
  @apply bg-gray-200
    rounded-t
    items-center
    font-medium
    px-5
    h-12;

  grid-row: 1 / 2;
}

.ads-Toast-close {
  @apply ml-auto
    -mr-3;
}

.ads-Toast-body {
  @apply items-start
    justify-center
    px-5
    flex-col
    text-left;

  grid-row: 1 / -1;
  min-height: 44px;
}

.ads-Toast--withHeader .ads-Toast-body {
  grid-row: 2 / 3;
}

.ads-Toast-link {
  @apply flex
    items-center
    w-full
    h-full
    rounded-b
    px-5
    -mx-5;

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

.ads-Toast-link:focus {
  @apply outline-none
    shadow-focus;
}

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

.ads-Toast-message {
  @apply text-bodySm
    text-gray-900
    leading-normal
    py-5;
}

.ads-Toast-message a {
  color: inherit;
  text-decoration: underline;
}

.ads-Toast-icon {
  @apply mr-2
    text-icon
    float-left;

  margin-top: 2px;
}

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

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

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

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