.modal.modal-dialog-select {
  min-height: 100dvh;
  justify-items: center;
  align-items: start;
  padding: 10dvh 0 40px !important;

  .modal-content {
    width: 100%;
    max-width: 580px;
    border-radius: 10px;
    padding: 18px 10px;
    box-sizing: border-box;
    overflow: hidden;

    & > .spacer {
      padding-bottom: var(--spacing-xs);
    }

    hr {
      border: 0.5px solid var(--border-primary);
      margin: var(--spacing-xs) 0;
    }

    & > .search {
      margin-bottom: var(--spacing-xs);
    }

    .no-data {
      width: 100%;
      text-align: center;
      color: var(--text-body-tertiary);

      @include typography(app-body-2);
    }

    .option {
      min-height: 24px;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: flex-start;
      column-gap: var(--spacing-xs);
      cursor: pointer;
      user-select: none;

      p,
      span {
        @include typography(app-modal-1);
      }

      span {
        color: var(--text-body-tertiary);
      }
    }

    .options {
      list-style: none;
      display: flex;
      flex-flow: column;
      row-gap: var(--spacing-xs);
      min-height: calc(24px * 6 + 50px);
      max-height: calc(240px + (9 * var(--spacing-xs)));
      overflow-x: hidden;
      overflow-y: auto;
    }

    .controls {
      padding-top: var(--spacing-xs);
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: center;
      column-gap: var(--spacing-l);
    }
  }
}
