.modal-wrapper {
  width: 100%;
  height: 100%;
  inset: 0;
  background: var(--gray-dark-transparent);
  position: fixed;
  z-index: 3;

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

    @media screen and (min-width: 768px) {
      max-height: 75%;
      max-width: 75%;
      inset: 12.5%;
      border: var(--border-gray);
    }

    & .modal-close {
      position: sticky;
      top: 0;
      left: 100%;
      height: var(--sizing-svg-base);
      width: var(--sizing-svg-base);
    }
  }
}

.modal-input {
  display: none;

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

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

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

  &:active svg,
  &:focus svg,
  &:focus-within svg {
    outline: var(--outline-default);
    border-radius: var(--border-radius-slight);
  }

  & svg {
    cursor: pointer;
    stroke: var(--accent-color);

    &:focus {
      outline: var(--outline-default);
      border-radius: var(--border-radius-slight);
    }

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