@use '../variables' as variables;
@use '../mixins' as mixins;

.modal {
  --modal-backdrop-bg: #{variables.$modal-backdrop-bg};
  --modal-bg: #{variables.$modal-bg};
  --modal-box-shadow: #{variables.$modal-box-shadow};
  --modal-close-icon: #{variables.$modal-close-icon};
  --modal-close-icon-font-family: #{variables.$modal-close-icon-font-family};
  --modal-close-icon-font-size: #{variables.$modal-close-icon-font-size};
  --modal-close-icon-font-weight: #{variables.$modal-close-icon-font-weight};
  --modal-padding-x: #{variables.$modal-padding-x};
  --modal-padding-y: #{variables.$modal-padding-y};
  --modal-width-base: #{variables.$modal-width-base};

  background-color: var(--modal-backdrop-bg);
  display: flex;
  height: 100%;
  justify-content: center;
  left: 0;
  overflow-y: auto;
  padding: clamp(0rem, -1258.125rem + 3000vw, var(--modal-padding-y))
    clamp(0rem, -1258.125rem + 3000vw, var(--modal-padding-x)); // mimic media-breakpoint-up(sm)
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: variables.$zindex-modal-backdrop;

  &.modal-centered {
    align-items: center;
  }
}

.modal-dialog {
  background-color: var(--modal-bg);
  box-shadow: var(--modal-box-shadow);
  height: max-content;
  width: var(--modal-width-base);
  z-index: variables.$zindex-modal;
}

.modal-body,
.modal-footer {
  padding: var(--modal-padding-y) var(--modal-padding-x);
}

.modal-open {
  overflow-y: hidden;
}

.modal-close-button {
  float: right;

  &::before {
    align-items: center;
    box-sizing: content-box;
    display: inline-flex;
    content: var(--modal-close-icon);
    font-size: var(--modal-close-icon-font-size);
    font-weight: var(--modal-close-icon-font-weight);
    font-family: var(--modal-close-icon-font-family);
    height: 1em;
    justify-content: center;
    text-decoration: none;
    text-transform: none;
    width: 1em;
  }

  @include mixins.hover-and-focus {
    text-decoration: none;
  }
}