:root {
  --modal-background: var(--color-white);
  --modal-color: var(--color-black);
  --modal-padding-x: clamp(1rem, 5vw, 4rem);
  --modal-margin-y: clamp(3rem, 5vw, 4rem);
  --modal-backdrop-color: var(--color-black);
  --modal-backdrop-opacity: 0.5;
  --modal-width: calc(100% - 2rem);
  --modal-max-width: 70rem;
  --modal-max-height: min(50rem, calc(100vh - 8rem));
  --modal-close-size: 1rem;
  --modal-close-opacity: 0.5;
  --modal-radius: 0;
  --modal-transition: var(--transition-fast);
}

.details-modal {
  transition: var(--transition-fast);
  background: var(--color-white);
  background: var(--modal-background);
  color: var(--color-black);
  color: var(--modal-color);
  box-shadow: var(--shadow-small);
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 2rem);
  width: var(--modal-width);
  max-width: 70rem;
  max-width: var(--modal-max-width);
  max-height: min(50rem, calc(100vh - 8rem));
  max-height: var(--modal-max-height);
  text-align: left;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  border-radius: var(--modal-radius);
  overflow: hidden;
}

/**
 * Close
 */

.details-modal-close {
  align-items: center;
  display: flex;
  height: 1rem;
  height: var(--modal-close-size);
  width: 1rem;
  width: var(--modal-close-size);
  justify-content: center;
  pointer-events: none;
  position: absolute;
  right: 1.5rem;
  right: calc(var(--modal-close-size)*1.5);
  top: 1.5rem;
  top: calc(var(--modal-close-size)*1.5);
  opacity: 0.5;
  opacity: var(--modal-close-opacity);
}

.details-modal-close svg {
    width: 100%;
    height: auto;
  }

/**
 * Content
 */

.details-modal-content {
  padding-left: clamp(1rem, 5vw, 4rem);
  padding-left: var(--modal-padding-x);
  padding-right: clamp(1rem, 5vw, 4rem);
  padding-right: var(--modal-padding-x);
  padding-bottom: clamp(3rem, 5vw, 4rem);
  padding-bottom: var(--modal-margin-y);
  margin-top: clamp(3rem, 5vw, 4rem);
  margin-top: var(--modal-margin-y);
  pointer-events: all;
  overflow: auto;
}

/**
 * Overlay
 */

.details-modal-overlay {
  background: var(--color-black);
  background: var(--modal-backdrop-color);
  transition: opacity 0.2s ease-out;
  pointer-events: none;
  cursor: pointer;
  position: fixed;
  z-index: 500;
  opacity: 0;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

details[open] .details-modal-overlay {
    pointer-events: all;
    opacity: 0.5;
    opacity: var(--modal-backdrop-opacity);
  }

/**
 * Details
 */

details input {
    accent-color: var(--color-black);
    accent-color: var(--modal-color);
  }

details summary {
    list-style: none;
  }

details summary:focus {
      outline: none;
    }

details summary::-webkit-details-marker {
      display: none;
    }