wcs-modal {
  --wcs-modal-backdrop-color: var(--wcs-semantic-color-background-backdrop);
  --wcs-modal-max-height: 80%;
  --wcs-modal-background-color: var(--wcs-semantic-color-background-surface-primary);
  --wcs-modal-border-radius: var(--wcs-semantic-border-radius-base);
  --wcs-modal-padding: calc(3 * var(--wcs-semantic-spacing-base));
  --wcs-modal-border-width: var(--wcs-semantic-border-width-default);
  --wcs-modal-border-color: var(--wcs-semantic-color-border-secondary);
  --wcs-modal-title-margin-bottom: var(--wcs-semantic-spacing-large);
  --wcs-modal-title-font-size: var(--wcs-semantic-font-size-heading-4);
  --wcs-modal-title-font-weight: var(--wcs-semantic-font-weight-heavy);
  --wcs-modal-title-line-height: var(--wcs-semantic-font-line-height-medium);
  --wcs-modal-actions-margin-top: var(--wcs-semantic-spacing-large);
  --wcs-modal-width-s: 288px;
  --wcs-modal-width-m: 480px;
  --wcs-modal-width-l: 864px;
  --wcs-modal-width-xl: 1200px;
  z-index: 999;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  background: var(--wcs-modal-backdrop-color);
}

wcs-modal[show] {
  display: flex;
  height: 100vh;
  width: 100vw;
  align-items: center;
  justify-content: center;
}

/**
Backdrop
 */
wcs-modal[without-backdrop] {
  background-color: unset;
}
wcs-modal[without-backdrop] .wcs-modal-container {
  border: solid var(--wcs-modal-border-width) var(--wcs-modal-border-color);
}

wcs-modal[hide-actions] .wcs-modal-actions {
  display: none;
}

/**
Modal window
 */
.wcs-modal-container {
  max-height: var(--wcs-modal-max-height, 80%);
  background-color: var(--wcs-modal-background-color);
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  box-sizing: border-box;
  pointer-events: auto;
  background-clip: padding-box;
  border-radius: var(--wcs-modal-border-radius);
  z-index: 20000;
  padding: var(--wcs-modal-padding);
  width: var(--wcs-modal-width-m);
}

.wcs-modal-container[data-size=s] {
  width: var(--wcs-modal-width-s);
}

.wcs-modal-container[data-size=m] {
  width: var(--wcs-modal-width-m);
}

.wcs-modal-container[data-size=l] {
  width: var(--wcs-modal-width-l);
}

.wcs-modal-container[data-size=xl] {
  width: var(--wcs-modal-width-xl);
}

.wcs-modal-header {
  /* h1 for semantic but h3 for style */
  margin-bottom: var(--wcs-modal-title-margin-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wcs-modal-header h1 {
  font-size: var(--wcs-modal-title-font-size);
  font-weight: var(--wcs-modal-title-font-weight);
  line-height: var(--wcs-modal-title-line-height);
  margin: 0;
}

.wcs-modal-content {
  overflow-y: var(--wcs-modal-overflow-y, auto);
}

.wcs-modal-actions {
  margin-top: var(--wcs-modal-actions-margin-top);
  display: flex;
  justify-content: flex-end;
}