:root {
  --modal-max-height: calc(100vh - (2 * theme("height.22")));
  --modal-max-width: calc(100vw - theme("width.22"));
}

.ads-ModalContainer {
  @apply top-0
    left-0
    z-modal
    flex
    items-center
    justify-center
    w-screen
    h-screen
    bg-screen;
}

.ads-Modal {
  @apply rounded
    bg-white
    w-full
    shadow-popover;

  max-height: var(--modal-max-height);
}

.ads-Modal:not(.ads-Modal--center) {
  @apply absolute;

  top: theme("height.22");
}

.ads-Modal--default {
  max-width: 640px;
}

.ads-Modal--large {
  max-width: 818px;
}

.ads-Modal--full {
  max-width: var(--modal-max-width);
}

.ads-Modal-header,
.ads-Modal-footer {
  @apply border-border
    bg-gray-200
    relative
    leading-none
    py-4;
}

.ads-Modal-header {
  @apply items-center
    justify-between
    pl-6
    pr-2
    border-b
    rounded-t
    leading-none
    h-14;
}

.ads-Modal-footer {
  @apply border-t
    px-6
    rounded-b;
}

.ads-Modal-description {
  @apply px-6
    py-4
    border-b
    border-border
    bg-gray-100
    text-bodySm;
}

.ads-Modal-close {
  @apply h-10
    w-10
    text-h4;
}

.ads-Modal-tabs {
  @apply px-3;
}

.ads-Modal-body {
  @apply flex
    flex-col
    justify-between;

  max-height: calc(
    var(--modal-max-height) - theme("height.15") - theme("height.20")
  );
  overflow-y: auto;
}

.ads-Modal-body--padded {
  @apply px-6
    py-4;
}

.ads-Modal-progressDots {
  @apply absolute
    w-full
    h-full
    top-0
    left-0
    items-center
    justify-center
    pointer-events-none;
}

.ads-Modal-progressDot {
  @apply bg-gray-400
    rounded-full
    w-2
    h-2;
}

.ads-Modal-progressDot--active {
  @apply bg-brandGreen-400;
}

.ads-Modal-buttonLabels {
  @apply items-center
    justify-between
    text-h5
    text-gray-600
    mb-3;
}

.ads-Modal-buttonLabel--left {
  @apply mr-auto
    w-1/2
    text-left;
}

.ads-Modal-buttonLabel--right {
  @apply ml-auto
    w-1/2
    text-right;
}