@use 'settings' as *;

.cc-root,
.cc-modal {
  box-sizing: border-box;
  color: var(--cc-color-text);
  font-family: var(--cc-font-family);
  font-size: var(--cc-font-size);
  font-weight: 400;
  line-height: 1.4;
}

.cc-root *,
.cc-root *::before,
.cc-root *::after,
.cc-modal *,
.cc-modal *::before,
.cc-modal *::after {
  box-sizing: border-box;
}

.cc-root {
  position: fixed;
  z-index: var(--cc-z-index);
  width: min(var(--cc-max-width), calc(100vw - 2em));

  &[dir='rtl'] {
    text-align: right;
  }
}

.cc-root--bottom {
  right: $cc-viewport-inset;
  bottom: $cc-viewport-inset;
  left: $cc-viewport-inset;
  width: auto;
  max-width: none;
}

.cc-root--top {
  top: $cc-viewport-inset;
  right: $cc-viewport-inset;
  left: $cc-viewport-inset;
  width: auto;
  max-width: none;
}

.cc-root--floating {
  right: $cc-viewport-inset;
  bottom: $cc-viewport-inset;
}

.cc-root[dir='rtl'].cc-root--floating {
  right: auto;
  left: $cc-viewport-inset;
}

.cc-root--center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.cc-banner,
.cc-modal__panel {
  background: var(--cc-color-bg);
  border: 0.0625em solid var(--cc-color-border);
  border-radius: var(--cc-radius);
  box-shadow: var(--cc-shadow);
}

.cc-title,
.cc-modal__title {
  margin: 0;
  font: 600 1.125em/1.35 var(--cc-font-family);
}

.cc-description,
.cc-footer,
.cc-modal__description {
  margin: var(--cc-space-sm) 0 0;
  color: var(--cc-color-muted);
  font: 400 0.9375em/1.5 var(--cc-font-family);
}

.cc-provided-by {
  margin: var(--cc-space-sm) 0 0;
  color: var(--cc-color-muted);
  font: 400 0.875em/1.45 var(--cc-font-family);
}