.cc-modal {
  position: fixed;
  inset: 0;
  z-index: calc(var(--cc-z-index) + 1);
  display: grid;
  place-items: center;
  padding: 1em;
  background: rgb(23 32 51 / 45%);
  animation: cc-fade-in var(--cc-duration) var(--cc-easing) both;

  &[dir='rtl'] {
    text-align: right;
  }
}

.cc-modal__panel {
  width: min(38.75em, 100%);
  max-height: min(47.5em, calc(100vh - 2em));
  overflow: auto;
  padding: var(--cc-space-lg);
  animation: cc-enter var(--cc-duration) var(--cc-easing) both;
}

.cc-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cc-space-md);
}