@layer ui.modal {
  .Modal {
    position: relative;
    z-index: var(--z-modal);
    color: var(--color-text);

    &[open] {
      display: block;
    }

    &.confirm,
    &.pin {
      z-index: var(--z-modal-confirm);
    }

    &.low-priority {
      z-index: var(--z-modal-low-priority);
    }

    &.delete,
    &.error,
    &.confirm,
    &.pin,
    &.unpin-all {
      .modal-dialog {
        max-width: 24rem;
      }
    }

    &.error {
      .modal-content .dialog-buttons {
        margin-top: 1rem;
      }
    }

    &.narrow {
      .modal-dialog {
        max-width: 20rem;
      }
    }

    &.slim {
      .modal-dialog {
        max-width: 26.25rem;
      }

      .modal-content {
        max-height: min(92vh, 36rem);
      }

      &.tall .modal-content {
        max-height: min(92vh, 50rem);
      }
    }

    .modal-container {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    &.with-balance-bar {
      .modal-container {
        flex-direction: column;
      }

      .modal-dialog {
        margin-top: 0;
      }
    }

    .modal-backdrop {
      position: fixed;
      z-index: -1;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      background-color: rgba(0, 0, 0, 0.25);
    }

    &.transparent-backdrop .modal-backdrop {
      background-color: transparent;
    }

    .modal-dialog {
      position: relative;
      transform: translate3d(0, -1rem, 0);

      display: inline-flex;
      flex-direction: column;

      width: 100%;
      min-width: 17.5rem;
      max-width: 35rem;
      margin: 2rem auto;
      border-radius: var(--border-radius-modal);

      background-color: var(--color-background);
      box-shadow: 0 0.25rem 0.5rem 0.125rem var(--color-default-shadow);

      transition:
        transform 0.2s ease,
        opacity 0.2s ease;

      body.no-page-transitions & {
        transform: none !important;
        transition: none;
      }

      @media (max-width: 450px) {
        max-width: calc(100vw - 3rem) !important;
      }

      @media (max-width: 450px) {
        &.mini-app-modal-dialog {
          width: 100vw !important;
          max-width: 100vw !important;
          margin: 0 !important;
          border-radius: 0;
        }
      }

      @media (max-width: 600px) {
        &.premium-main-modal-dialog {
          width: 100% !important;
          max-width: 100% !important;
          height: 100%;
          margin: 0;
          border-radius: 0;
        }
      }
    }

    &.open .modal-dialog {
      transform: translate3d(0, 0, 0);
    }

    &.closing .modal-dialog {
      transform: translate3d(0, 1rem, 0);
    }

    .modal-header,
    %modal-header {
      display: flex;
      flex-shrink: 0;
      align-items: center;
      padding: 1.3125rem 1.375rem 0;
    }

    .modal-title {
      overflow: hidden;
      flex: 1 1 auto;

      font-size: 1.25rem;
      font-weight: var(--font-weight-medium);
      text-overflow: ellipsis;

      &:not(:only-child) {
        margin: 0 1rem;
      }
    }

    .modal-header-condensed-wide,
    .modal-header-condensed {
      @extend %modal-header;

      min-height: 3.5rem;

      .modal-action-button {
        width: auto;
        min-width: 5rem;
        height: 2.25rem;
        margin-left: auto;
        padding-right: 1.25rem;
        padding-left: 1.25rem;

        font-size: 0.875rem;
        line-height: 1.625rem;

        &.danger {
          color: var(--color-white);
          background-color: var(--color-error);

          &:hover,
          &:focus,
          &:active {
            background-color: var(--color-error-shade);
          }
        }
      }
    }

    .modal-header-condensed {
      padding: 0.375rem 0.75rem !important;
    }

    .modal-header-condensed-wide {
      padding: 0.375rem 1.375rem !important;
      .modal-title {
        &:not(:only-child) {
          margin: 0 1.375rem;
        }
      }
    }

    .modal-content {
      overflow-y: auto;
      flex-grow: 1;

      width: 100%;
      max-height: min(92vh, 50rem);
      padding: 1rem 1.5rem 1.1875rem;

      b,
      strong {
        overflow-wrap: anywhere;
      }
    }

    .modal-title,
    .modal-content,
    .modal-content > p {
      unicode-bidi: plaintext;
    }

    .modal-about {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;

      text-overflow: ellipsis;
    }

    .modal-help {
      font-size: 0.9375rem;
      line-height: 1.3;
      color: var(--color-text-secondary);
    }

    .dialog-buttons {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      justify-content: flex-start;
    }

    .dialog-buttons-column {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .dialog-buttons-centered {
      justify-content: center;
    }

    .dialog-checkbox {
      margin: 1rem -1.125rem;
    }

    .dialog-checkbox-group {
      margin: 0 -1.125rem 1rem;
    }

    .confirm-dialog-button {
      width: auto;
      height: auto;

      font-weight: var(--font-weight-semibold);
      text-align: right;
      white-space: pre-wrap;
    }

    .dialog-button-spacer {
      flex-grow: 1;
    }

    .modal-absolute-close-button {
      position: absolute;
      z-index: 3;
      top: 0.875rem;
      left: 0.875rem;
    }

    .modal-more-button {
      position: absolute;
      z-index: 3;
      top: 0.875rem;
      right: 0.875rem;
    }
  }

  dialog.Modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;

    color: var(--color-text);

    background: transparent;
    outline: none;

    &::backdrop {
      background: transparent;
    }
  }
}
