@charset 'utf-8';

:modal {
  --modal-pd: 2rem;

  margin: auto;
  padding-block: calc(var(--modal-pd) * 0.85) calc(var(--modal-pd) * 0.85);
  padding-inline: var(--modal-pd);
  max-width: 60ch;
  max-height: 95vh;

  border: none;
  border-radius: 6px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow-y: clip;
}

.modal-close {
  --btn-fs: 1.2rem;
  --btn-size: calc(var(--btn-fs) * 1.65);
  padding: 0;
  width: var(--btn-size);
  height: var(--btn-size);
  position: absolute;
  top: calc(var(--modal-pd) / 3.75);
  right: calc(var(--modal-pd) / 3.75);
  border: none;
  background-color: transparent;

  &::before {
    content: '\f00d';
    font-family: var(--ff-fa-free);
    color: var(--clr-accent-2, var(--clr-err));
    background-color: transparent;
    font-size: var(--btn-fs);
    text-align: center;
  }

  &:hover,
  &:focus,
  &:focus-visible {
    border: none;
    background-color: transparent;
    color: var(--clr-accent-1, var(--clr-err));

    &::before {
      background-color: transparent;
      color: var(--clr-accent-1, var(--clr-err));
    }
  }
}

.modal-title {
  margin-block-end: 1.5rem;
  text-align: center;
  font-size: 1.75rem;
  font-weight: 600;
}