@layer components {
  .dialog {
    border-radius: var(--radius-lg);

    &::backdrop {
      backdrop-filter: blur(4px);
    }
  }

  .dialog__close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-full);
    box-shadow: var(--shadow);
    transition: transform 0.15s ease;

    &:hover {
      transform: scale(1.1);
    }

    & svg {
      inline-size: 1rem;
      block-size: 1rem;
      color: var(--color-ink-muted);
    }
  }

  .dialog__close-btn-wrapper {
    position: absolute;
    inset-block-start: -1rem;
    inset-inline-end: -1rem;
    block-size: 2rem;
    z-index: 20;
  }

  .dialog__panel {
    position: relative;
    margin: var(--space-5);
  }

  .dialog__frame {
    display: block;
    inline-size: 100%;
  }

  .dialog__loading {
    border-radius: var(--radius);
    padding: var(--space-4);
    background-color: var(--color-surface);
  }

  .color-scheme.color-scheme--dark .dialog__loading {
    border: 1px solid var(--color-border);
  }

  @media (prefers-color-scheme: dark) {
    .color-scheme:not(.color-scheme--light) .dialog__loading {
      border: 1px solid var(--color-border);
    }
  }

  .dialog--overlay {
    position: absolute;
    inset-block-start: var(--space-5);
    inset-inline-start: var(--space-5);
    inline-size: 100vw;
    block-size: 100vh;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
    padding: 0;

    &::backdrop {
      backdrop-filter: blur(2px);
    }
  }

  .dialog--overlay-settings {
    inline-size: 100%;
    block-size: 100%;
  }

  @media (min-width: 640px) {
    .dialog--overlay {
      inset-block-start: var(--space-24);
    }
  }

  @media (min-width: 1024px) {
    .dialog--overlay {
      inset-block-start: var(--space-32);
    }
  }

  .dialog--overlay-mobile {
    position: absolute;
    inset: var(--space-5);
    inline-size: 100%;
    block-size: 100%;
    background-color: transparent;
    border: none;
    padding: 0;

    &::backdrop {
      backdrop-filter: blur(8px);
    }
  }
}