.modal:has(.new-modal__form) {
  position: fixed;
  inset: 0;
  z-index: var(--z-index-modal);
  display: flex;
  justify-content: center;
  padding-top: 4rem;
  background-color: color-mix(in oklab, var(--clr-gray-950), transparent 50%);
  backdrop-filter: blur(0.25rem);
  opacity: 0;
  transition: opacity var(--transition-duration) linear;

  &.modal--visible {
    opacity: 1;
    z-index: var(--z-index-modal--visible);
  }

  .modal__container {
    min-width: 600px;
    height: 100%;
    max-height: 800px;
    background: var(--clr-gray-0);
    margin: 0;
    max-width: none;
  }

  .new-modal__form {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
  }

  .new-modal__header {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .new-modal__header__title {
    font-size: var(--fs-xl);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.625rem;

    button {
      display: grid;
      place-items: center;
    }
  }

  .new-modal__header__button--close {
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: opacity var(--transition-duration) ease-in-out;

    &:hover {
      opacity: 0.75;
    }
  }

  .new-modal__body {
    flex: 1;
    position: relative;
    margin: 0;
  }

  .new-modal__body__scrollable-area {
    position: absolute;
    inset: 0;
    padding: 0 2rem;
    overflow-y: auto;
  }

  .new-modal__footer {
    padding: 1rem 2rem 2rem;
    text-align: center;
  }

  .new-modal__footer__buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
  }

  .new-modal__button {
    --padding-vertical: 1.25rem;
    --padding-horizontal: 1.5rem;
    --background-color: var(--clr-gray-700);
    --border-radius: var(--br-sm);

    position: relative;
    z-index: 0;
    color: var(--clr-gray-0);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    font-weight: 700;
    border-radius: var(--border-radius);
    padding: var(--padding-vertical) var(--padding-horizontal);

    &::before {
      content: '';
      position: absolute;
      inset: -1rem;
      z-index: -2;
      background-color: var(--background-color);
      border-radius: var(--border-radius);
      opacity: 0;
    }

    &:hover::before {
      animation: button-pulse 0.4s 0.1s forwards;
    }

    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background-color: var(--background-color);
      border-radius: var(--border-radius);
    }

    &:hover::after {
      animation: button-stretch 0.3s forwards;
    }
  }

  .new-modal__button--orange {
    --background-color: var(--clr-primary);
  }

  .new-modal__button--wide {
    --padding-horizontal: 4rem;
    font-size: var(--fs-md);
  }
}

@media only screen and (max-width: 600px) {
  .modal:has(.new-modal__form) {
    padding: 0;

    .modal__container {
      width: 100%;
      height: 100%;
      min-width: 0;
      max-height: none;
    }
  }
}

@media only screen and (min-width: 600px) and (max-height: 900px) {
  .modal:has(.new-modal__form) {
    display: grid;
    place-items: center;
    padding: 0;
  }
}