:host {
  /**
  * @prop --spacing-x: Horizontal padding for modal.
  */
  --spacing-x: 1rem;
  /**
  * @prop --background-overlay: Background color for modal.
  */
  --background-overlay: hsla(0, 0%, 42.4%, 0.7);

  /**
  * @prop --max-height-window: Max height of modal.
  */
  --max-height-window: calc(100vh - (2 * 5rem));
  /**
  * @prop --radius-window: Border radius for modal corners.
  */
  --radius-window: 12px;
  /**
  * @prop --box-shadow-window: Modal shadow size and color.
  */
  --box-shadow-window: 0px 20px 80px 0px hsla(0, 0%, 0%, 0.1),
    0px 10px 20px 0px hsla(0, 0%, 0%, 0.1);

  /*
    we're rudimentarily creating a grid here
    in the following modal--size-*,
    with 2, 6, 8 and 12 columns
  */

  /**
  * @prop --size-window-xsmall: Calculated size for an extra small modal.
  */
  --size-window-xsmall: calc((2 * 3.5rem) + (1 * 2rem));
  /**
  * @prop --size-window-small: Calculated size for a small modal.
  */
  --size-window-small: calc((6 * 3.5rem) + (5 * 2rem));
  /**
  * @prop --size-window-default: Calculated size for a default sized modal.
  */
  --size-window-default: calc((8 * 3.5rem) + (7 * 2rem));
  /**
  * @prop --size-window-large: Calculated size for a large modal.
  */
  --size-window-large: calc((12 * 3.5rem) + (11 * 2rem));

  /**
  * @prop --spacing-x-header: Sets left and right margins for header.
  */
  --spacing-x-header: 1.5rem;
  /**
  * @prop --spacing-y-header: Sets top and bottom margins for header.
  */
  --spacing-y-header: 1.5rem;

  /**
  * @prop --border-bottom-header-has-scroll: Sets the size and color of a bottom border if the modal is scrollable.
  */
  --border-bottom-header-has-scroll: 0.0625rem solid hsl(0, 0%, 80%);

  /**
  * @prop --font-family-heading: Sets the font used for the header.
  */
  --font-family-heading: NunitoSans-Regular, sans-serif;
  /**
  * @prop --font-size-heading: Sets the font size for the header.
  */
  --font-size-heading: 1.25rem;
  /**
  * @prop --font-weight-heading: Sets the font weight for the header.
  */
  --font-weight-heading: 800;

  /**
  * @prop --spacing-close-button: Padding, margin-bottom, and calculated transform for modal close button.
  */
  --spacing-close-button: 0.5rem;
  /**
  * @prop --radius-close-button: Border radius for modal close button.
  */
  --radius-close-button: 8px;
  /**
  * @prop --transition-close-button: Shorthand property for close button's transition-property, transition-duration, transition-timing-function, and transition-delay.
  */
  --transition-close-button: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
  /**
  * @prop --box-shadow-close-button-focus: Box shadow size and color for close button when focused.
  */
  --box-shadow-close-button-focus: 0 0 0 0.125rem
    hsl(215.60000000000002, 100%, 62%);
  /**
  * @prop --color-close-button-hover: Color of close button on hover.
  */
  --color-close-button-hover: hsl(229.20000000000005, 52%, 40%);
  /**
  * @prop --color-close-button-active: Color of button after click.
  */
  --color-close-button-active: hsl(196.10000000000002, 100%, 51%);

  /**
  * @prop --spacing-x-body-wrapper: Left and right padding for body wrapper.
  */
  --spacing-x-body-wrapper: 1.5rem;
  /**
  * @prop --spacing-y-body: Left and right padding of modal body.
  */
  --spacing-y-body: 1.5rem;

  /**
  * @prop --spacing-actions: Padding around modal footer.
  */
  --spacing-actions: 1.5rem;

  /**
  * @prop --spacing-x-actions-slotted: Left margin for each slotted action.
  */
  --spacing-x-actions-slotted: 0.5rem;

  /**
  * @prop --background-actions-has-scroll: Background color of actions if modal is scrollable.
  */
  --background-actions-has-scroll: hsl(0, 0%, 94.9%);

  --modal-position: fixed;
  /**
  * @prop --window-position: Sets the type of positioning method used for the modal (static, relative, fixed, absolute or sticky).
  */
  --window-position: relative;
  /**
  * @prop --window-top: Sets the top edge of the positioned modal from the top edge of the window.
  */
  --window-top: unset;
  /**
  * @prop --window-right: Sets the right edge of the positioned modal from the right edge of the window.
  */
  --window-right: unset;
  /**
  * @prop --window-left: Sets the left edge of the positioned modal from the left edge of the window.
  */
  --window-left: unset;
  /**
  * @prop --window-bottom: Sets the bottom edge of the positioned modal from the bottom edge of the window.
  */
  --window-bottom: unset;
}

.modal {
  top: 0;
  left: 0;
  width: 100%;
  bottom: 0;
  display: none;
  z-index: 100;
  position: var(--modal-position);
  background: var(--background-overlay);
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding-left: var(--spacing-x);
  padding-right: var(--spacing-x);
}

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

.modal__backdrop {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  position: fixed;
}

.modal__window {
  width: 100vw;
  height: auto;
  display: flex;
  z-index: 10;
  position: var(--window-position);
  top: var(--window-top);
  right: var(--window-right);
  left: var(--window-left);
  bottom: var(--window-bottom);
  overflow-y: auto;
  flex-direction: column;
  background-color: white;
  max-height: var(--max-height-window);
  border-radius: var(--radius-window);
  box-shadow: var(--box-shadow-window);
}

.modal__window .modal__body-wrapper {
  overflow-y: auto;
  flex-shrink: 1;
}

.modal--size-xsmall .modal__window {
  max-width: var(--size-window-xsmall);
}

.modal--size-small .modal__window {
  max-width: var(--size-window-small);
}

.modal--size-default .modal__window {
  max-width: var(--size-window-default);
}

.modal--size-large .modal__window {
  max-width: var(--size-window-large);
}

@media (max-height: 30em) {
  .modal__window {
    max-height: calc(100vh - 1.5rem);
  }
}

/* a11y: transparent border for Windows HCM */
.modal__window:after {
  top: 0;
  left: 0;
  width: 100%;
  border: 1px solid transparent;
  height: 100%;
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
  border-radius: var(--radius-window);
}

.modal__header {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  justify-content: space-between;
  margin-left: var(--spacing-x-header);
  margin-right: var(--spacing-x-header);
  padding-top: var(--spacing-y-header);
  padding-bottom: var(--spacing-y-header);
}

.modal--has-scroll .modal__header {
  border-bottom: var(--border-bottom-header-has-scroll);
}

::slotted([slot='heading']) {
  margin: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading);
  font-weight: var(--font-weight-heading);
}

.modal__close-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-close-button);
  margin-bottom: calc(-2 * var(--spacing-close-button));
  border: 0;
  border-radius: var(--radius-close-button);
  outline: none;
  background: transparent;
  transition: var(--transition-close-button);
  transform: translate(
    var(--spacing-close-button),
    calc(-1 * var(--spacing-close-button))
  );
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.modal__close-button:focus {
  box-shadow: var(--box-shadow-close-button-focus);
}

.modal__close-button:hover {
  color: var(--color-close-button-hover);
}

.modal__close-button:active {
  color: var(--color-close-button-active);
}

.modal__body-wrapper {
  padding-left: var(--spacing-x-body-wrapper);
  padding-right: var(--spacing-x-body-wrapper);
}

.modal--has-body .modal__body-wrapper {
  min-height: 3rem;
}

.modal--has-body .modal__body {
  /* we use `margin` and top padding because we want to allow "margin collapse" */
  /* @see https://web.dev/learn/css/spacing/#margin-collapse */
  margin-top: var(--spacing-y-body);
  margin-bottom: var(--spacing-y-body);
}

.modal__actions {
  display: none;
  flex-shrink: 0;
  justify-content: flex-end;
  padding: var(--spacing-actions);
}

.modal__actions ::slotted(*) {
  margin-left: var(--spacing-x-actions-slotted);
}

.modal--has-actions .modal__actions {
  display: flex;
}

.modal--align-actions-left .modal__actions {
  justify-content: flex-start;
}

.modal--has-scroll .modal__actions {
  background-color: var(--background-actions-has-scroll);
}