@trimble-oss/moduswebcomponents/collection/components/modus-wc-modal/modus-wc-modal.css

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

modus-wc-modal .modus-wc-modal {
  box-sizing: border-box;
  color: var(--modus-wc-color-base-content);
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box {
  display: flex;
  flex-direction: column;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header {
  align-items: center;
  display: flex;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header > span {
  border-radius: var(--rounded-box);
  display: block;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header .modus-wc-modal-top-icon-buttons {
  display: flex;
  margin-inline-start: auto;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-header .modus-wc-modal-top-icon-buttons svg {
  height: 24px;
  width: 24px;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box.modus-wc-modal-fullscreen {
  border-radius: 0;
  height: 100dvh;
  max-height: none;
  max-width: none;
  width: 100dvw;
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .modus-wc-modal-action {
  margin-top: auto;
}

.modus-wc-modal-content {
  height: 100%;
}
.modus-wc-modal-content > span {
  border-radius: var(--rounded-box);
  display: block;
  height: 100%;
}

[data-theme^=modus-modern] .modus-wc-modal-content > span,
[data-theme^=connect] .modus-wc-modal-content > span {
  display: flex;
  flex-direction: column;
  gap: var(--modus-wc-spacing-sm);
}
[data-theme^=modus-modern] .modus-wc-modal-action,
[data-theme^=connect] .modus-wc-modal-action {
  display: flex;
  gap: var(--modus-wc-spacing-sm);
  justify-content: flex-end;
  padding-inline: 0;
  padding-top: var(--modus-wc-spacing-lg);
}
[data-theme^=modus-modern] .modus-wc-modal-action > :not([hidden]) ~ :not([hidden]),
[data-theme^=connect] .modus-wc-modal-action > :not([hidden]) ~ :not([hidden]) {
  margin: 0;
}

[data-theme=modus-classic-dark] .modus-wc-modal-box,
[data-theme=modus-classic-light] .modus-wc-modal-box {
  --rounded-box: var(--modus-wc-border-radius-md);
}
[data-theme=modus-classic-dark] .modus-wc-modal-header span,
[data-theme=modus-classic-light] .modus-wc-modal-header span {
  background: transparent;
  border-radius: 0;
  display: block;
  padding: 0;
}
[data-theme=modus-classic-dark] .modus-wc-modal-content,
[data-theme=modus-classic-light] .modus-wc-modal-content {
  height: 100%;
}
[data-theme=modus-classic-dark] .modus-wc-modal-content > span,
[data-theme=modus-classic-light] .modus-wc-modal-content > span {
  background: transparent;
  border-radius: 0;
  display: block;
  height: 100%;
  padding: 0;
}

[data-theme=modus-classic-light] .modus-wc-modal-box {
  background-color: var(--modus-wc-color-white);
}
[data-theme=modus-classic-light] .modus-wc-modal-box .modus-wc-modal-top-icon-buttons svg {
  fill: var(--modus-wc-color-trimble-gray);
}

[data-theme=modus-classic-dark] modus-wc-modal .modus-wc-modal-box {
  background-color: var(--modus-wc-color-gray-9);
}
[data-theme=modus-classic-dark] modus-wc-modal .modus-wc-modal-box .modus-wc-modal-top-icon-buttons svg {
  fill: var(--modus-wc-color-white);
}