.modal {
  align-items: center;
  bottom: auto;
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  margin: auto;
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 20;

  &.modal--open {
    display: flex;
  }

  .modal-header {
    display: flex;
    margin-bottom: var(--space-y-block-small-breakpoint-modal-header);
    column-gap: 40px;

    .modal-title {
      color: var(--color-modal-title);
      flex: 1;
      font-family: var(--font-modal-title);
      font-size: var(--size-small-breakpoint-modal-title);
      font-weight: var(--weight-modal-title);
    }

    .modal-close {
      cursor: pointer;
      height: var(--size-modal-close);
      margin-left: auto;
      width: var(--size-modal-close);

      & svg {
        color: var(--color-modal-close);
        height: var(--size-modal-close);
        width: var(--size-modal-close);
      }
    }
  }

  .modal-body {
    background: var(--background-modal-body);
    border-color: var(--border-color-modal-body);
    border-radius: var(--border-radius-modal-body);
    border-style: solid;
    border-width: var(--border-width-small-breakpoint-modal-body);
    box-shadow: 0 0 var(--size-modal-shadow) var(--color-modal-shadow);
    margin: 0 auto;
    max-width: var(--max-width-small-breakpoint-modal-body);
    overflow-y: scroll;
    padding: var(--space-y-small-breakpoint-modal) var(--space-x-small-breakpoint-modal);

    & p {
      color: var(--color-modal-body);
      font-size: var(--size-small-breakpoint-modal-body);
      font-weight: var(--weight-modal-body);
      line-height: var(--line-height-small-breakpoint-modal-body);
    }

    ::-webkit-scrollbar {
      display: none;
    }
  }
}

.modal-backdrop {
  background: var(--background-modal-backdrop);
  content: '';
  display: block;
  height: 100%;
  left: 0;
  opacity: var(--opacity-modal-backdrop);
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 12;
}

@media (width <= 767.98px) {
  .modal {
    align-items: flex-start;
    bottom: inherit;
    top: 0;

    .modal-body {
      border-radius: 0;
      height: 100dvh;
      width: 100%;
    }
  }
}

@media (width >= 768px) {
  .modal {
    .modal-header {
      margin-bottom: var(--space-y-block-medium-breakpoint-modal-header);

      .modal-title {
        font-size: var(--size-medium-breakpoint-modal-title);
      }
    }

    .modal-body {
      max-height: calc(100dvh - 60px);
      & p {
        font-size: var(--size-medium-breakpoint-modal-body);
        line-height: var(--line-height-medium-breakpoint-modal-body);
      }

      border-width: var(--border-width-medium-breakpoint-modal-body);
      max-width: var(--max-width-medium-breakpoint-modal-body);
      padding: var(--space-y-medium-breakpoint-modal) var(--space-x-medium-breakpoint-modal);
    }
  }
}

@media (width >= 992px) {
  .modal {
    .modal-header {
      margin-bottom: var(--space-y-block-large-breakpoint-modal-header);

      .modal-title {
        font-size: var(--size-large-breakpoint-modal-title);
      }
    }

    .modal-body {
      & p {
        font-size: var(--size-large-breakpoint-modal-body);
        line-height: var(--line-height-large-breakpoint-modal-body);
      }

      border-width: var(--border-width-large-breakpoint-modal-body);
      max-width: var(--max-width-large-breakpoint-modal-body);
      padding: var(--space-y-large-breakpoint-modal) var(--space-x-large-breakpoint-modal);
    }
  }
}