.modal-wrapper {
  width: 100%;
  height: 100%;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 1;

  & .modal-body {
    position: fixed;
    background: var(--background-color);
    height: 100%;
    width: 100%;
    inset: 0;
    overflow: scroll;
    padding: var(--sizing-lg) var(--sizing-2xl);

    & .modal-close {
      position: absolute;
      top: var(--sizing-lg);
      right: var(--sizing-lg);
      cursor: pointer;

      & svg {
        stroke: var(--accent-color);
        transform: rotate(0deg);
        transition: transform var(--transition-duration-default) var(--transition-ease-in-out);

        &:focus,
        &:focus-within {
          outline: var(--outline)
        }

        &:hover,
        &:focus,
        &:active {
          stroke: var(--accent-color-hover);
          transform: rotate(8deg);
        }
      }
    }
  }
}

.modal-input {
  display: none;

  &:checked ~ .modal-wrapper {
    display: block;
  }

  &:not(:checked) ~ .modal-wrapper {
    display: none;
  }
}

.modal-toggle {
  cursor: pointer;
  display: inline-flex;
  vertical-align: middle;

  & svg {
    cursor: pointer;
    stroke: var(--accent-color);
    transform: rotate(0deg);
    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);

    &:focus,
    &:focus-within {
      outline: var(--outline)
    }

    &:hover,
    &:focus,
    &:active {
      stroke: var(--accent-color-hover);
      transform: rotate(8deg);
    }
  }
}

@media screen and (min-width: 768px) {
  .modal-wrapper .modal-body {
    max-height: 75%;
    max-width: 75%;
    inset: 12.5%;
    border: 1px solid var(--gray-light);
  }
}