////// Modal based on details tag //////

.modal-wrapper {
  position: relative;
}

.modal-trigger {
  display: contents;
}

.modal-wrapper[open] .modal-trigger::before {
  content: "";
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: rgba(0,0,0,.75);
}

.modal-wrapper[open] .modal-container {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: start;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: $spacing-lg;
  overflow-y: scroll;
  z-index: 11;
  pointer-events: none;
}

.modal-wrapper[open] .modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: $modal-md;
  height: auto;
  max-width: 100vw;
  margin-top: $spacing;
  pointer-events: all;
  background-color: $white;
  border-radius: $border-radius;
  z-index: 12;

  &.modal-sm {
    width: $modal-sm;
  }
  
  &.modal-lg {
    width: $modal-lg;
  }
  
}

.modal-wrapper[open] .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0;
}

.modal-wrapper[open] .modal-title {
  font-size: $font-size-h3;
  padding: $modal-padding;
}

.modal-wrapper[open] .modal-header .close-btn {
  cursor: pointer;
  border-radius: 0 $border-radius 0 0;
}

.modal-wrapper[open] .modal-content {
  padding: 0 $modal-padding $modal-padding $modal-padding;
}

.modal-wrapper[open] .modal-footer {
  display: flex;
  justify-content: start;
  padding: $spacing-sm $modal-padding;
  background-color: $actionbar;
  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

.modal-footer .btn-primary {
  background-color: $white;
  color: $primary;
  border: none;
  &:hover, &:focus {
    background-color: $link-hover-color;
    color: $white;
  }
}

.modal-footer .btn-secondary {
  border-color: $white;
  color: $white;
  &:hover, &:focus {
    color: $white;
    background-color: $link-hover-color;
    border-color: $link-hover-color;
  }
}

.modal-footer .btn.disabled,
.modal-footer .btn:disabled {
  color: $white;
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  background-color: transparent;
  opacity: 0.25;
  border: $border-width solid $white;
}