@import "main";

.modal {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: end;
  visibility: hidden;
  inset: 0;
  z-index: 1040;
  @media only screen and (min-width: $breakpoint) {
    align-items: center;
  }

  &.visible {
    visibility: visible;
  }

  &-content {
    display: flex;
    flex-direction: column;
    gap: 24px;

    background: $white;
    position: relative;

    margin: 0;
    padding: 64px 24px;
    height: 90%;
    width: 100%;

    @media only screen and (min-width: $breakpoint) {
      border-radius: 8px;
      padding: 64px;
      margin: 32px;
      max-width: $breakpoint;
      height: 80%;
    }

    &-header {
      margin-block-end: 8px;

      h1 {
        margin: 0 0 $xx_small 0;
      }

      .close_modal {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
        border: 0;
        cursor: pointer;
        background: none;
        font-size: 1rem;
        padding: 20px;
      }
    }

    &-body {
      display: flex;
      flex-direction: column;
      gap: $xxx_small;
      overflow: auto;
      overflow-x: hidden;
    }

    &-footer {
      display: flex;
      gap: $xxx_small;
      .button:not(.button-back) {
        flex: 1;
      }
    }
  }

  &-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba($color: #000000, $alpha: 0.25);
    z-index: -1;
  }
}