.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: 0 5px 15px rgba(0, 0, 0, 0.2);
    background: var(--color-background-elevated);

    .np-theme-personal & {
      background: var(--color-background-elevated);
      box-shadow: none;
      border-radius: var(--radius-large);
    }
  }

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

  .tw-modal-content {
    width: 100%;

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

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

    .tw-modal-header {
      box-shadow: inset 0 -1px 0 0 rgb(226 230 232);

      .np-theme-personal & {
        box-shadow: inset 0 -1px 0 0 var(--color-border-neutral);

        .np-close-button {
          margin: calc(var(--size-8) * -1) calc(var(--size-8) * -1) calc(var(--size-8) * -1) 0;
        }
      }

      &.modal--withoutborder {
        box-shadow: none;
      }

      .tw-icon {
        fill: var(--color-content-accent);
        cursor: pointer;
        display: block;
      }
    }

    .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);
      box-shadow: inset 0 1px 0 0 rgb(226 230 232);

      .np-theme-personal & {
        border-top: 1px solid var(--color-border-neutral);
      }

      .np-theme-personal &,
      &.modal--withoutborder {
        box-shadow: none;
      }
    }

    &.tw-modal-no-title {
      .tw-modal-body {
        padding-top: 0 !important;
      }

      .tw-modal-header {
        min-height: var(--size-32);
        padding-bottom: 4px !important;
      }
    }

    .np-theme-personal {
      background-color: transparent;
    }
  }

  table, .table {
    background-color: transparent;
  }
}

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

        .np-theme-personal & {
          padding: var(--size-24);
        }
      }
    }

    .tw-modal-compact {
      .tw-modal-header {
        min-height: calc(var(--size-8) * 7);
      }

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

@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%;
    }
  }
}
