@import (reference) "@transferwise/neptune-tokens/breakpoints.less";
@import (reference) "@transferwise/neptune-tokens/tokens.less";

.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-xlarge);
  }

  &.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: (@screen-xs-min - 2 * @size-10);
    }
  }
}

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

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

      &.tw-modal-md {
        width: (@screen-sm-min - @size-24);
      }
    }
  }
}

@media (--screen-md) {
  .tw-modal-dialog {
    &.tw-modal-lg {
      width: (@screen-md-min - @size-48);
    }
  }
}

@media (--screen-lg) {
  .tw-modal-dialog {
    &.tw-modal-xl {
      width: (@size-40 * 25);
    }
  }
}
