/*------------------------------------------------------------
MODALS
====================================*/

/* Variables Custom */
$modal-icon-width-mobile: 1.8rem;
$modal-icon-height-mobile: $modal-icon-width-mobile;

$modal-inner-padding-desktop: 3rem;
$modal-header-padding-y-desktop: 2.4rem;
$modal-header-padding-x-desktop: 3rem;
$modal-icon-width-desktop: 3rem;
$modal-icon-height-desktop: $modal-icon-width-desktop;
/***************************************/

.modal-header {
  position: relative;
  padding: $modal-header-padding-y $modal-icon-width-mobile $modal-header-padding-y 0;
  margin: 0 $modal-header-padding-x;

  .close {
    position: absolute;
    top: 50%;
    right: 0;
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0.3s;
    outline: none;
    transform: translate(50%, -50%);
    svg {
      width: $modal-icon-width-mobile;
      height: $modal-icon-height-mobile;
    }
    &:hover {
      transform: translate(50%, -50%) rotate(180deg);
    }
  }
}

.modal-footer {
  flex-direction: column-reverse;
  .btn {
    width: 100%;
    margin-bottom: 1.5rem;
  }
  .link-secondary {
    position: relative;
    padding: 0 3rem;
    transition: 0.3s;
    svg {
      position: absolute;
      left: 0;
      transform: rotate(180deg);
      transition: 0.3s;
    }
    &:hover {
      svg {
        fill: $link-secondary-hover-color;
      }
    }
  }
}

/* RESPONSIVE */
/***************************************/
@include media-breakpoint-up(md) {
  .modal-body {
    padding: $modal-inner-padding-desktop;
  }

  .modal-footer {
    flex-direction: row;
    justify-content: space-between;
    .btn {
      width: auto;
      margin: 0;
    }
    .link-secondary {
      padding-right: 0;
    }
  }
}

@include media-breakpoint-up(lg) {
  .modal-header {
    padding: $modal-header-padding-y-desktop $modal-icon-width-desktop $modal-header-padding-y-desktop 0;
    margin: 0 $modal-header-padding-x-desktop;

    .close {
      svg {
        width: $modal-icon-width-desktop;
        height: $modal-icon-height-desktop;
      }
    }
  }

  .modal-dialog {
    max-width: $modal-lg;
  }
}

@include media-breakpoint-up(xl) {
  .modal-dialog {
    max-width: $modal-xl;
  }
}
