/**
 * Modal
 */
.modal-wrapper {
  background: var(--modal--wrapper--background, rgba(0, 0, 0, 0.75));
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-wrapper .modal {
  text-align: left;
  list-style: none;
  line-height: var(--modal--line-height, var(--line-height));
  display: block;
  width: calc(100% - var(--modal--margin-left, var(--margin-left)) - var(--modal--margin-right, var(--margin-right)));
  max-width: var(--modal--width, 480px);
  border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
  box-shadow: var(--modal--box-shadow, var(--modal--box-shadow-x-offset, var(--box-shadow-offset-x)) var(--modal--box-shadow-y-offset, var(--box-shadow-offset-y)) var(--modal--box-shadow-blur-radius, var(--box-shadow-blur-radius)) var(--modal--box-shadow-spread-radius, var(--box-shadow-spread-radius)) var(--modal--box-shadow-color, var(--box-shadow-color)));
}
.modal-wrapper .modal > .modal-header {
  display: flex;
  justify-content: space-between;
  background: var(--modal--header--background, var(--modal--background));
  border-style: var(--modal--header--border-style, var(--modal--header--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--header--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--header--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--header--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--header--border-width, var(--modal--header--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--header--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--header--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--header--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--header--border-color, var(--modal--header--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--header--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--header--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--header--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--header--padding, var(--modal--header--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--header--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--header--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--header--padding-left, var(--modal--padding-left, var(--padding-left))));
  color: var(--modal--header--color, var(--modal--color));
}
.modal-wrapper .modal > .modal-header > .close {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.5rem;
  width: 1.5rem;
  line-height: 1.5rem;
  font-size: 0.5rem;
  cursor: pointer;
  padding: 0;
  border: 0;
  transition: background-color 0.3s ease;
  background-color: transparent;
  border-radius: var(--modal--border-radius, var(--modal--border-top-left-radius, var(--border-top-left-radius)) var(--modal--border-top-right-radius, var(--border-top-right-radius)) var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius)) var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius)));
}
.modal-wrapper .modal > .modal-header > .close > .icon {
  mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
  -webkit-mask-image: url('data:image/svg+xml; utf8, <svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"><title>times</title><path d="M27.745 22.495c-0-0-0-0-0-0l-8.494-8.494 8.494-8.494c0-0 0-0 0-0 0.091-0.091 0.158-0.198 0.2-0.312 0.116-0.311 0.050-0.675-0.2-0.925l-4.013-4.013c-0.25-0.25-0.614-0.316-0.925-0.2-0.114 0.042-0.221 0.109-0.312 0.2 0 0-0 0-0 0l-8.494 8.494-8.494-8.494c-0-0-0-0-0-0-0.091-0.091-0.198-0.158-0.312-0.2-0.311-0.116-0.675-0.050-0.925 0.2l-4.013 4.013c-0.25 0.25-0.316 0.614-0.2 0.925 0.042 0.114 0.109 0.221 0.2 0.312 0 0 0 0 0 0l8.494 8.494-8.494 8.494c-0 0-0 0-0 0-0.091 0.091-0.157 0.198-0.2 0.312-0.116 0.311-0.050 0.675 0.2 0.925l4.013 4.013c0.25 0.25 0.614 0.316 0.925 0.2 0.114-0.042 0.221-0.109 0.312-0.2 0-0 0-0 0-0l8.494-8.494 8.494 8.494c0 0 0 0 0 0 0.092 0.091 0.198 0.158 0.312 0.2 0.311 0.116 0.675 0.050 0.925-0.2l4.013-4.013c0.25-0.25 0.316-0.614 0.2-0.925-0.042-0.114-0.109-0.221-0.2-0.312z"></path></svg>');
  mask-position: center center;
  -webkit-mask-position: center center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
  -webkit-mask-size: calc(var(--modal--font-size, var(--font-size)) / 2);
  background-color: var(--modal--header--color, var(--modal--color));
  width: var(--modal--font-size, var(--font-size));
  height: var(--modal--font-size, var(--font-size));
}
.modal-wrapper .modal > .modal-header > .close:hover, .modal-wrapper .modal > .modal-header > .close:focus {
  outline: none;
  background-color: rgba(0, 0, 0, 0.1);
}
.modal-wrapper .modal > .modal-header > .close:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.modal-wrapper .modal > .modal-body {
  display: flex;
  flex-direction: row;
  background: var(--modal--body--background, var(--modal--background));
  color: var(--modal--body--color, var(--modal--color));
  border-style: var(--modal--body--border-style, var(--modal--body--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--body--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--body--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--body--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--body--border-width, var(--modal--body--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--body--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--body--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--body--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--body--border-color, var(--modal--body--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--body--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--body--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--body--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--body--padding, var(--modal--body--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--body--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--body--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--body--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > .modal-body .modal-icon {
  margin-right: var(--modal--icon--margin-right, var(--modal--body--padding-right, var(--padding-right)));
}
.modal-wrapper .modal > .modal-body .modal-content {
  width: 100%;
  display: block;
}
.modal-wrapper .modal > .modal-footer {
  background: var(--modal--footer--background, var(--modal--background));
  color: var(--modal--footer--color, var(--modal--color));
  border-style: var(--modal--footer--border-style, var(--modal--footer--border-top-style, var(--modal--border-top-style, var(--border-top-style))) var(--modal--footer--border-right-style, var(--modal--border-right-style, var(--border-right-style))) var(--modal--footer--border-bottom-style, var(--modal--border-bottom-style, var(--border-bottom-style))) var(--modal--footer--border-left-style, var(--modal--border-left-style, var(--border-left-style))));
  border-width: var(--modal--footer--border-width, var(--modal--footer--border-top-width, var(--modal--border-top-width, var(--border-top-width))) var(--modal--footer--border-right-width, var(--modal--border-right-width, var(--border-right-width))) var(--modal--footer--border-bottom-width, var(--modal--border-bottom-width, var(--border-bottom-width))) var(--modal--footer--border-left-width, var(--modal--border-left-width, var(--border-left-width))));
  border-color: var(--modal--footer--border-color, var(--modal--footer--border-top-color, var(--modal--border-top-color, var(--border-top-color))) var(--modal--footer--border-right-color, var(--modal--border-right-color, var(--border-right-color))) var(--modal--footer--border-bottom-color, var(--modal--border-bottom-color, var(--border-bottom-color))) var(--modal--footer--border-left-color, var(--modal--border-left-color, var(--border-left-color))));
  padding: var(--modal--footer--padding, var(--modal--footer--padding-top, var(--modal--padding-top, var(--padding-top))) var(--modal--footer--padding-right, var(--modal--padding-right, var(--padding-right))) var(--modal--footer--padding-bottom, var(--modal--padding-bottom, var(--padding-bottom))) var(--modal--footer--padding-left, var(--modal--padding-left, var(--padding-left))));
}
.modal-wrapper .modal > *:first-child {
  border-top-left-radius: var(--modal--border-top-left-radius, var(--border-top-left-radius));
  border-top-right-radius: var(--modal--border-top-right-radius, var(--border-top-right-radius));
}
.modal-wrapper .modal > *:last-child {
  border-bottom-left-radius: var(--modal--border-bottom-left-radius, var(--border-bottom-left-radius));
  border-bottom-right-radius: var(--modal--border-bottom-right-radius, var(--border-bottom-right-radius));
}
.modal-wrapper .modal > .modal-header + .modal-body,
.modal-wrapper .modal > .modal-header + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-footer,
.modal-wrapper .modal > .modal-body + .modal-body {
  border-top-width: 0;
}
.modal-wrapper.-fullscreen {
  display: block;
}
.modal-wrapper.-fullscreen > .modal {
  width: 100%;
  height: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.modal-wrapper.-fullscreen > .modal > .modal-header {
  border-radius: var(--modal--fullscreen--header--border-radius, 0);
}
.modal-wrapper.-fullscreen > .modal > .modal-body {
  border-radius: var(--modal--fullscreen--body--border-radius, 0);
  flex: 1;
  overflow: auto;
}
.modal-wrapper.-fullscreen > .modal > .modal-footer {
  border-radius: var(--modal--fullscreen--footer--border-radius, 0);
}
.modal-wrapper.-alert > .modal > .modal-footer, .modal-wrapper.-confirm > .modal > .modal-footer, .modal-wrapper.-prompt > .modal > .modal-footer {
  display: flex;
  justify-content: flex-end;
}
.modal-wrapper.-alert > .modal > .modal-footer .button + .button, .modal-wrapper.-confirm > .modal > .modal-footer .button + .button, .modal-wrapper.-prompt > .modal > .modal-footer .button + .button {
  margin-left: var(--modal--footer--button--margin-left, var(--margin-left-1-2));
}

/**
 * Color variants
 */
.modal-wrapper.-primary {
  --modal--background: var(--modal--primary--background, var(--color-primary));
  --modal--border-top-color: var(
      --modal--primary--border-top-color,
      var(--color-primary-shade-50)
  );
  --modal--border-right-color: var(
      --modal--primary--border-right-color,
      var(--color-primary-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--primary--border-bottom-color,
      var(--color-primary-shade-50)
  );
  --modal--border-left-color: var(
      --modal--primary--border-left-color,
      var(--color-primary-shade-50)
  );
  --modal--color: var(--modal--primary--color, var(--contrast-text-color-primary));
  --modal--header--background: var(
      --modal--primary--header--background,
      var(--color-primary-shade-50)
  );
  --modal--footer--background: var(
      --modal--primary--footer--background,
      var(--color-primary-shade-50)
  );
}
.modal-wrapper.-secondary {
  --modal--background: var(--modal--secondary--background, var(--color-secondary));
  --modal--border-top-color: var(
      --modal--secondary--border-top-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-right-color: var(
      --modal--secondary--border-right-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--secondary--border-bottom-color,
      var(--color-secondary-shade-50)
  );
  --modal--border-left-color: var(
      --modal--secondary--border-left-color,
      var(--color-secondary-shade-50)
  );
  --modal--color: var(--modal--secondary--color, var(--contrast-text-color-secondary));
  --modal--header--background: var(
      --modal--secondary--header--background,
      var(--color-secondary-shade-50)
  );
  --modal--footer--background: var(
      --modal--secondary--footer--background,
      var(--color-secondary-shade-50)
  );
}
.modal-wrapper.-light {
  --modal--background: var(--modal--light--background, var(--color-white));
  --modal--border-top-color: var(--modal--light--border-top-color, var(--color-light));
  --modal--border-right-color: var(--modal--light--border-right-color, var(--color-light));
  --modal--border-bottom-color: var(--modal--light--border-bottom-color, var(--color-light));
  --modal--border-left-color: var(--modal--light--border-left-color, var(--color-light));
  --modal--color: var(--modal--light--color, var(--contrast-text-color-white));
  --modal--header--background: var(--modal--light--header--background, var(--color-gray-50));
  --modal--footer--background: var(--modal--light--footer--background, var(--color-gray-50));
}
.modal-wrapper.-dark {
  --modal--background: var(--modal--dark--background, var(--color-dark));
  --modal--border-top-color: var(--modal--dark--border-top-color, var(--color-dark-tint-50));
  --modal--border-right-color: var(
      --modal--dark--border-right-color,
      var(--color-dark-tint-50)
  );
  --modal--border-bottom-color: var(
      --modal--dark--border-bottom-color,
      var(--color-dark-tint-50)
  );
  --modal--border-left-color: var(
      --modal--dark--border-left-color,
      var(--color-dark-tint-50)
  );
  --modal--color: var(--modal--dark--color, var(--contrast-text-color-dark));
  --modal--header--background: var(
      --modal--dark--header--background,
      var(--color-dark-tint-50)
  );
  --modal--footer--background: var(
      --modal--dark--footer--background,
      var(--color-dark-tint-50)
  );
}
.modal-wrapper.-info {
  --modal--background: var(--modal--info--background, var(--color-info));
  --modal--border-top-color: var(--modal--info--border-top-color, var(--color-info-shade-50));
  --modal--border-right-color: var(
      --modal--info--border-right-color,
      var(--color-info-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--info--border-bottom-color,
      var(--color-info-shade-50)
  );
  --modal--border-left-color: var(
      --modal--info--border-left-color,
      var(--color-info-shade-50)
  );
  --modal--color: var(--modal--info--color, var(--contrast-text-color-info));
  --modal--header--background: var(
      --modal--info--header--background,
      var(--color-info-shade-50)
  );
  --modal--footer--background: var(
      --modal--info--footer--background,
      var(--color-info-shade-50)
  );
}
.modal-wrapper.-success {
  --modal--background: var(--modal--success--background, var(--color-success));
  --modal--border-top-color: var(
      --modal--success--border-top-color,
      var(--color-success-shade-50)
  );
  --modal--border-right-color: var(
      --modal--success--border-right-color,
      var(--color-success-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--success--border-bottom-color,
      var(--color-success-shade-50)
  );
  --modal--border-left-color: var(
      --modal--success--border-left-color,
      var(--color-success-shade-50)
  );
  --modal--color: var(--modal--success--color, var(--contrast-text-color-success));
  --modal--header--background: var(
      --modal--success--header--background,
      var(--color-success-shade-50)
  );
  --modal--footer--background: var(
      --modal--success--footer--background,
      var(--color-success-shade-50)
  );
}
.modal-wrapper.-warning {
  --modal--background: var(--modal--warning--background, var(--color-warning));
  --modal--border-top-color: var(
      --modal--warning--border-top-color,
      var(--color-warning-shade-50)
  );
  --modal--border-right-color: var(
      --modal--warning--border-right-color,
      var(--color-warning-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--warning--border-bottom-color,
      var(--color-warning-shade-50)
  );
  --modal--border-left-color: var(
      --modal--warning--border-left-color,
      var(--color-warning-shade-50)
  );
  --modal--color: var(--modal--warning--color, var(--contrast-text-color-warning));
  --modal--header--background: var(
      --modal--warning--header--background,
      var(--color-warning-shade-50)
  );
  --modal--footer--background: var(
      --modal--warning--footer--background,
      var(--color-warning-shade-50)
  );
}
.modal-wrapper.-danger {
  --modal--background: var(--modal--danger--background, var(--color-danger));
  --modal--border-top-color: var(
      --modal--danger--border-top-color,
      var(--color-danger-shade-50)
  );
  --modal--border-right-color: var(
      --modal--danger--border-right-color,
      var(--color-danger-shade-50)
  );
  --modal--border-bottom-color: var(
      --modal--danger--border-bottom-color,
      var(--color-danger-shade-50)
  );
  --modal--border-left-color: var(
      --modal--danger--border-left-color,
      var(--color-danger-shade-50)
  );
  --modal--color: var(--modal--danger--color, var(--contrast-text-color-danger));
  --modal--header--background: var(
      --modal--danger--header--background,
      var(--color-danger-shade-50)
  );
  --modal--footer--background: var(
      --modal--danger--footer--background,
      var(--color-danger-shade-50)
  );
}

/**
 * Size variants
 */
.modal-wrapper.-sm {
  --modal--border-top-left-radius: var(
      --modal--sm--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-sm))
  );
  --modal--border-top-right-radius: var(
      --modal--sm--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-sm))
  );
  --modal--border-bottom-right-radius: var(
      --modal--sm--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm))
  );
  --modal--border-bottom-left-radius: var(
      --modal--sm--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm))
  );
  --modal--font-size: var(
      --modal--sm--font-size,
      calc(var(--font-size) * var(--size-multiplier-sm))
  );
  --modal--margin-top: var(
      --modal--sm--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-sm))
  );
  --modal--margin-right: var(
      --modal--sm--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-sm))
  );
  --modal--margin-bottom: var(
      --modal--sm--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-sm))
  );
  --modal--margin-left: var(
      --modal--sm--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-sm))
  );
  --modal--padding-top: var(
      --modal--sm--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-sm))
  );
  --modal--padding-right: var(
      --modal--sm--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-sm))
  );
  --modal--padding-bottom: var(
      --modal--sm--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-sm))
  );
  --modal--padding-left: var(
      --modal--sm--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-sm))
  );
  --modal--width: var(--modal--sm--width, calc(480px * var(--size-multiplier-sm)));
}
.modal-wrapper.-md {
  --modal--border-top-left-radius: var(
      --modal--md--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-md))
  );
  --modal--border-top-right-radius: var(
      --modal--md--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-md))
  );
  --modal--border-bottom-right-radius: var(
      --modal--md--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-md))
  );
  --modal--border-bottom-left-radius: var(
      --modal--md--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-md))
  );
  --modal--font-size: var(
      --modal--md--font-size,
      calc(var(--font-size) * var(--size-multiplier-md))
  );
  --modal--margin-top: var(
      --modal--md--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-md))
  );
  --modal--margin-right: var(
      --modal--md--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-md))
  );
  --modal--margin-bottom: var(
      --modal--md--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-md))
  );
  --modal--margin-left: var(
      --modal--md--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-md))
  );
  --modal--padding-top: var(
      --modal--md--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-md))
  );
  --modal--padding-right: var(
      --modal--md--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-md))
  );
  --modal--padding-bottom: var(
      --modal--md--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-md))
  );
  --modal--padding-left: var(
      --modal--md--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-md))
  );
  --modal--width: var(--modal--md--width, calc(480px * var(--size-multiplier-md)));
}
.modal-wrapper.-lg {
  --modal--border-top-left-radius: var(
      --modal--lg--border-top-left-radius,
      calc(var(--border-top-left-radius) * var(--size-multiplier-lg))
  );
  --modal--border-top-right-radius: var(
      --modal--lg--border-top-right-radius,
      calc(var(--border-top-right-radius) * var(--size-multiplier-lg))
  );
  --modal--border-bottom-right-radius: var(
      --modal--lg--border-bottom-right-radius,
      calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg))
  );
  --modal--border-bottom-left-radius: var(
      --modal--lg--border-bottom-left-radius,
      calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg))
  );
  --modal--font-size: var(
      --modal--lg--font-size,
      calc(var(--font-size) * var(--size-multiplier-lg))
  );
  --modal--margin-top: var(
      --modal--lg--margin-top,
      calc(var(--margin-top) * var(--size-multiplier-lg))
  );
  --modal--margin-right: var(
      --modal--lg--margin-right,
      calc(var(--margin-right) * var(--size-multiplier-lg))
  );
  --modal--margin-bottom: var(
      --modal--lg--margin-bottom,
      calc(var(--margin-bottom) * var(--size-multiplier-lg))
  );
  --modal--margin-left: var(
      --modal--lg--margin-left,
      calc(var(--margin-left) * var(--size-multiplier-lg))
  );
  --modal--padding-top: var(
      --modal--lg--padding-top,
      calc(var(--padding-top) * var(--size-multiplier-lg))
  );
  --modal--padding-right: var(
      --modal--lg--padding-right,
      calc(var(--padding-right) * var(--size-multiplier-lg))
  );
  --modal--padding-bottom: var(
      --modal--lg--padding-bottom,
      calc(var(--padding-bottom) * var(--size-multiplier-lg))
  );
  --modal--padding-left: var(
      --modal--lg--padding-left,
      calc(var(--padding-left) * var(--size-multiplier-lg))
  );
  --modal--width: var(--modal--lg--width, calc(480px * var(--size-multiplier-lg)));
}