/* Copyright 2024, 2025 New Vector Ltd.
 * Copyright 2024 The Matrix.org Foundation C.I.C.
 *
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 * Please see LICENSE files in the repository root for full details.
 */

.overlay,
.scroll-container {
  position: fixed;
  inset: 0;
  background: rgba(3 12 27 / 52.8%);
}

.scroll-container {
  overflow-y: auto;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
}

.dialog {
  /* To position the close icon */
  position: relative;
  margin: var(--cpd-space-4x);
  min-width: 0;
  flex: 0 1 520px;
}

.body {
  display: flex;
  flex-direction: column;
  gap: var(--cpd-space-4x);
  background: var(--cpd-color-bg-canvas-default);
}

.title {
  font: var(--cpd-font-heading-md-semibold);
  letter-spacing: var(--cpd-font-letter-spacing-heading-md);
  color: var(--cpd-color-text-primary);
  margin-block-start: var(--cpd-space-4x);
}

.dialog .body {
  padding: var(--cpd-space-4x) var(--cpd-space-10x) var(--cpd-space-10x);
}

.dialog .title {
  /* This adds a padding to the title to make sure it overflows correctly
     * and not behind the close button */
  padding-inline-end: var(--cpd-space-7x);
}

.dialog .close {
  position: absolute;
  inset-block-start: var(--cpd-space-7x);
  inset-inline-end: var(--cpd-space-7x);
  padding: var(--cpd-space-1x);
  border-radius: var(--cpd-radius-pill-effect);
  background: var(--cpd-color-bg-subtle-secondary);
  color: var(--cpd-color-icon-secondary);

  & > svg {
    inline-size: var(--cpd-space-5x);
    block-size: var(--cpd-space-5x);
  }

  &:hover {
    background: var(--cpd-color-bg-subtle-primary);
    color: var(--cpd-color-icon-primary);
  }
}

.drawer {
  position: fixed;
  background: var(--cpd-color-bg-canvas-default);
  inset-block-end: 0;
  inset-inline: 0;

  /* Cap the inline content size at 520px, filling the rest of the space with
  padding */
  padding-inline: max(0px, calc((100% - 520px) / 2));
  border-start-start-radius: var(--border-radius);
  border-start-end-radius: var(--border-radius);
  display: flex;
  flex-direction: column;

  /* Make sure the border radius cuts the content */
  overflow: hidden;
  contain: paint;

  /* Cap the block size */
  max-block-size: calc(100vh - var(--cpd-space-4x));
  /* biome-ignore lint/suspicious/noDuplicateProperties: this isn't a real duplicate */
  max-block-size: calc(100svh - var(--cpd-space-4x));

  /* Drawer comes in the Android style by default */
  --border-radius: 28px;
  --handle-block-size: 4px;
  --handle-inline-size: 32px;
  --handle-inset-block-start: var(--cpd-space-4x);
  --handle-inset-block-end: 0px;
}

.drawer[data-platform="ios"] {
  --border-radius: 10px;
  --handle-block-size: 5px;
  --handle-inline-size: 36px;
  --handle-inset-block-start: var(--cpd-space-1-5x);
  --handle-inset-block-end: 1px;
}

.drawer .body {
  overflow-y: auto;
  scrollbar-width: none;
  padding-inline: var(--cpd-space-4x);
  margin-block-start: var(--cpd-space-2x);
  padding-block-start: var(--cpd-space-4x);
  padding-block-end: var(--cpd-space-12x);
}

.drawer .handle {
  align-self: center;
  block-size: var(--handle-block-size);
  inline-size: var(--handle-inline-size);
  margin-block-start: var(--handle-inset-block-start);
  margin-block-end: var(--handle-inset-block-end);
  background: var(--cpd-color-icon-secondary);
  border-radius: var(--cpd-radius-pill-effect);
}