.tw-modal {
  &--scrollable {
    max-height: 100%;

    /* mobile viewport bug fix */
    // stylelint-disable-next-line value-no-vendor-prefix
    max-height: -webkit-fill-available;
  }

  .tw-modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translateY(-25%);
    box-shadow: none;
    background: var(--color-background-elevated);
    border-radius: var(--radius-large);
  }

  &.in {
    .tw-modal-dialog {
      transform: translate(0);
    }
  }

  .tw-modal-content {
    width: 100%;
    background-color: transparent;

    .tw-modal-body {
      flex: 1;
      word-break: break-word;

      &--scrollable {
        overflow-y: auto;
      }
    }

    .tw-modal-header,
    .tw-modal-footer,
    .tw-modal-body {
      padding: var(--size-16);
    }

    .tw-modal-title {
      max-width: 85%;
    }

    .tw-modal-footer {
      padding-top: var(--size-12);
      padding-bottom: var(--size-12);
    }
  }
}

@media (--screen-sm) {
  .tw-modal {
    .tw-modal-content {
      .tw-modal-header,
      .tw-modal-footer {
        padding: var(--size-24);
      }
      .tw-modal-body {
        padding: 0 var(--size-24);
      }
    }
  }
}

@media (--screen-xs) {
  .tw-modal-dialog {
    &.tw-modal-sm {
      width: 300px;
    }
  }
}

@media (--screen-sm) {
  .tw-modal {
    padding: var(--size-40);

    .tw-modal-dialog {
      .tw-modal-content {
        border-radius: var(--radius-small);
      }

      &.tw-modal-md {
        width: 540px;
      }
    }
  }
}

@media (--screen-md) {
  .tw-modal-dialog {
    &.tw-modal-lg {
      width: 720px;
    }
  }
}

@media (--screen-lg) {
  .tw-modal-dialog {
    &.tw-modal-xl {
      width: 1000px;
    }
  }
}

/* Internet explorer hack */
// In internet explorer 11 modal shows up always collapsed.
@media all and (-ms-high-contrast: none) {
  /* IE11 */
  /* stylelint-disable selector-no-vendor-prefix, selector-type-no-unknown */
  _:-ms-fullscreen,
  :root .tw-modal {
    height: 100%;

    .tw-modal-dialog {
      height: 100%;
    }
  }
}