#c15t-banner {
  --color-offgray-50: hsl(218, 12%, 95%);
  --color-offgray-100: hsl(218, 12%, 88%);
  --color-offgray-200: hsl(218, 12%, 80%);
  --color-offgray-300: hsl(218, 12%, 75%);
  --color-offgray-400: hsl(218, 12%, 64%);
  --color-offgray-500: hsl(218, 12%, 56%);
  --color-offgray-600: hsl(218, 12%, 48%);
  --color-offgray-700: hsl(218, 12%, 40%);
  --color-offgray-800: hsl(218, 12%, 34%);
  --color-offgray-900: hsl(218, 12%, 24%);
  --color-offgray-950: hsl(218, 12%, 15%);
  --color-offgray-1000: hsl(218, 12%, 5%);

  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);

  --color-accent-blue: hsla(218, 93%, 42%, 1);

  position: fixed;
  z-index: 9999;
  bottom: 16px;
  right: 16px;
  border-radius: 4px;
  max-width: 300px;
  background: white;
  border: 1px solid
    color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
  box-shadow: 6px 6px 0
    color-mix(in oklab, var(--color-accent-blue) 6%, transparent);
}

.dark #c15t-banner {
  border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent);
  background: var(--color-offgray-1000);
  box-shadow: 5px 5px 0
    color-mix(in oklab, var(--color-accent-blue) 8%, transparent);
}

#c15t-banner > div:first-child {
  padding: 12px;
  display: flex;
  flex-direction: column;
}

#c15t-banner a {
  color: var(--links);
  text-decoration: underline;
  text-decoration-color: var(--link-line-decoration);
}

#c15t-banner a:hover {
  text-decoration-color: var(--link-line-decoration-hover);
}

#c15t-description {
  font-size: 12px;
  margin: 0;
  margin-top: 4px;
}

#c15t-configure-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--divider);
  padding: 12px;
}

#c15t-configure-section > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#c15t-configure-section label {
  text-transform: uppercase;
  font-size: 11px;
}

#c15t-footer {
  padding: 12px;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--divider);
  background-color: color-mix(
    in oklab,
    var(--color-offgray-50) 50%,
    transparent
  );
}

.dark #c15t-footer {
  background-color: color-mix(
    in oklab,
    var(--color-offgray-600) 4%,
    transparent
  );
}

.c15t-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-height: 28px;
  color: black;
  padding: 4px 8px;
  font-size: 14px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid transparent;
  transition: 100ms;
  transition-property: box-shadow, border-color, background-color;
}

.c15t-button:hover {
  background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
}

.dark .c15t-button {
  color: var(--color-offgray-50);
}

.dark .c15t-button:hover {
  background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);
}

.c15t-button.icon {
  padding: 0;
  width: 24px;
  height: 24px;
}

.c15t-button.primary {
  color: var(--color-blue-700);
  background: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
  border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px
    0 0 inset;
}

.c15t-button.primary:hover {
  background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
  box-shadow: none;
}

.dark .c15t-button.primary {
  color: var(--color-blue-50);
  background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
  border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent);
  box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px
    0 0 inset;
}

.dark .c15t-button.primary:hover {
  background: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
  box-shadow: none;
}

.c15t-button.secondary {
  background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent);
  border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
  box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent)
    0 -2px 0 0 inset;
}

.c15t-button.secondary:hover {
  background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
  box-shadow: none;
}

.dark .c15t-button.secondary {
  background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent);
  border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent);
  box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent)
    0 -2px 0 0 inset;
}

.dark .c15t-button.secondary:hover {
  background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent);
  box-shadow: none;
}

.c15t-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 20px;
  flex-shrink: 0;
}

.c15t-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.c15t-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: color-mix(
    in oklab,
    var(--color-offgray-100) 80%,
    transparent
  );
  border-radius: 20px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
  transition: background-color 0.2s;
}

.c15t-slider:hover {
  background-color: var(--color-offgray-100);
}

.dark .c15t-slider {
  background-color: color-mix(in oklab, #fff 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
}

.dark .c15t-slider:hover {
  background-color: color-mix(in oklab, #fff 10%, transparent);
}

.c15t-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  box-shadow:
    0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  transition: transform 0.2s;
}

.c15t-switch input:checked + .c15t-slider {
  background-color: var(--color-accent-blue);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
}

.c15t-switch input:checked + .c15t-slider:hover {
  background-color: var(--color-accent-blue);
}

.dark .c15t-switch input:checked + .c15t-slider {
  background-color: var(--color-accent-blue);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
}

.c15t-switch input:checked + .c15t-slider:before {
  transform: translateX(12px);
}

.c15t-switch input:disabled + .c15t-slider {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}

.c15t-switch input:disabled + .c15t-slider:hover {
  background-color: color-mix(
    in oklab,
    var(--color-offgray-100) 80%,
    transparent
  );
}

#c15t-manage-consent-btn {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

#c15t-manage-consent-btn:hover {
  text-decoration-color: var(--link-line-decoration-hover);
}