@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);
  --rounded-box: var(--modus-wc-border-radius-box);
}
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-top-icon-buttons {
  display: flex;
  position: absolute;
  right: var(--modus-wc-spacing-sm);
  top: var(--modus-wc-spacing-sm);
}
modus-wc-modal .modus-wc-modal .modus-wc-modal-box .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-header > span {
  border-radius: var(--modus-wc-border-radius-btn);
  display: block;
  padding: var(--modus-wc-spacing-lg);
}

.modus-wc-modal-content {
  height: 100%;
}
.modus-wc-modal-content span {
  background: var(--modus-wc-color-base-200);
  border-radius: var(--modus-wc-border-radius-btn);
  display: block;
  height: 100%;
  padding: var(--modus-wc-spacing-lg);
}

[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-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);
}

[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;
}