@use "../../styles/utils";
@use "./variables" as locals;

@include utils.layer {
  .Block {
    position: relative;
    z-index: 100;
  }

  .backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
  }

  .panel-wrapper {
    position: fixed;
    inset: 0;
    display: grid;
    place-content: center;
  }

  .panel {
    position: relative;
    min-width: min(calc(100vw - 2 * locals.$outerMargin), locals.$minWidth);
    max-width: locals.$maxWidth;
    margin: 0 locals.$outerMargin;
    padding: 1.5rem;
    background: var(--cmm-color-surface-0);
    border-radius: var(--cmm-radius-xl);
  }

  .title {
    font-weight: var(--cmm-font-weight-semibold);
    font-size: var(--cmm-font-size-lg);
    color: var(--cmm-color-font-base);
  }

  .content {
    margin: 0.5rem 0 1rem 0;
    font-weight: var(--cmm-font-weight-normal);
    color: var(--cmm-color-font-muted);
  }

  .close {
    // FIXME: Avoid !important.
    // Import variables?
    --cmm-IconButton-size: 1.75rem !important;
    --cmm-IconButton-icon-size: calc(
      var(--cmm-IconButton-size) * 0.75
    ) !important;

    position: absolute;
    inset: locals.$closeOffset locals.$closeOffset auto auto;
  }
}
