body {
  .modal-bg {
    background-color: transparent;
  }

  .modal:not(.mod-sidebar-layout) {
    backdrop-filter: var(--blur-m);
    box-shadow: var(--shadow-s);
    min-width: 320px;
    gap: 8px;
  }

  .modal-button-container {
    justify-content: center;
    gap: 8px;
    margin-top: 0;

    button {
      width: auto;
      line-height: var(--line-height-normal);
      border-radius: var(--clickable-icon-radius);
      flex: 1 1 calc(50% - 4px);
    }

    .mod-checkbox {
      justify-content: center;
      margin-bottom: 8px;
      width: 100%;
    }
  }
}

body:not(.is-mobile) {
  .modal:not(.mod-sidebar-layout) {
    .modal-close-button {
      display: none;
    }

    .modal-title {
      margin: 4px 0 8px;
      font-weight: var(--font-bold);

      &:empty {
        display: none;
      }
    }

    button {
      height: unset;
      border-radius: 100vh;
    }

    .modal-header {
      margin: 0;
    }

    .modal-content,
    .mod-checkbox {
      font-size: var(--font-ui-small);
    }
  }
}

body.is-mobile {
  .modal-close-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--modal-header-height);
    height: var(--modal-header-height);
    border-radius: var(--clickable-icon-radius);

    &::before {
      content: "";
      background-color: var(--text-normal);
      content: "";
      height: 12px;
      width: 12px;
      -webkit-mask-position: 50% 50%;
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' fill='none' viewBox='0 0 19 19'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='black' d='M.303 18.291c.41.399 1.09.399 1.489 0l7.5-7.5 7.5 7.5c.398.399 1.09.41 1.488 0a1.061 1.061 0 0 0 0-1.476l-7.5-7.512 7.5-7.5c.398-.398.41-1.078 0-1.476-.41-.41-1.09-.41-1.489 0l-7.5 7.5-7.5-7.5c-.398-.41-1.09-.422-1.488 0a1.061 1.061 0 0 0 0 1.476l7.5 7.5-7.5 7.512c-.398.398-.41 1.078 0 1.476Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='white' d='M0 0h18.935v18.595H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e");
    }
  }

  .modal:not(.mod-sidebar-layout) {
    backdrop-filter: var(--blur-s);
    border-radius: var(--modal-radius);
    background-color: var(--modal-background) !important;

    .modal-header {
      border: none !important;
      padding: 24px 24px 0;
    }

    .modal-title {
      max-width: 100%;
      text-align: start;
    }

    .modal-content {
      padding: 8px 24px;
      font-size: var(--font-ui-small);

      .modal-button-container {
        padding: 0 0 var(--side-padding);
      }
    }

    .modal-button-container {
      margin: 0;
      padding: 0 var(--side-padding) var(--side-padding);

      button {
        margin: 0;
        font-size: var(--font-ui-medium);
        text-align: center;
        justify-content: center;
        min-height: 48px;
      }
    }

    .modal-nav-action {
      margin-top: 8px;
      box-shadow: none !important;
      background-color: transparent !important;
      padding: 24px;
      height: unset;

      &:first-of-type {
        inset-inline-start: unset;
        right: 6em;
      }
    }
  }
}

body.is-phone {
  .modal {
    padding-bottom: var(--safe-area-inset-bottom);
  }
  .modal-button-container button {
    flex: 1 1 calc(50% - 4px);
  }
}

body.is-tablet {
  .modal {
    outline: var(--prompt-border-width) solid var(--background-modifier-hover);
    margin: 0;
    padding: 0;
  }

  .modal-title {
    font-size: var(--font-ui-medium);
  }
}
