.svv-wgt-v2-container {
  --svv-v2-skin-bg: #000000;
}

.svv-wgt-v2 {
  --pl-fill: rgba(255, 255, 255, 0.07);
  --pl-fill-hover: rgba(255, 255, 255, 0.11);
  --pl-fill-active: rgba(255, 255, 255, 0.15);

  --svv-text: #ededed;
  --svv-text-muted: #a3a3a3;
  --svv-border: #262626;
  --svv-border-strong: #3a3a3a;
  --svv-bg: #141414;
  --svv-surface: #1a1a1a;
  --svv-card-bg: #1f1f1f;
  --svv-card-text: #ededed;
  --svv-card-text-muted: #a3a3a3;

  --svv-primary: #00e07a;
  --svv-primary-hover: #19ec8b;
  --svv-primary-text: #062617;
  --svv-primary-subtle: #0c2b1d;

  --svv-accent: #6ee7a8;
  --svv-accent-strong: #00e07a;
  --svv-accent-subtle: #0c2b1d;

  --svv-success: #4fd39b;
  --svv-warning: #e5a443;
  --svv-critical: #ff8a80;
  --svv-info: #6ee7a8;

  --svv-calendar-text: #ededed;
  --svv-calendar-marked-bg: #0c2b1d;
  --svv-calendar-selected-bg: #ededed;
  --svv-calendar-selected-text: #141414;
  --svv-calendar-today-border: #3a3a3a;

  --svv-drawer-bg: #1a1a1a;
  --svv-drawer-backdrop: rgba(0, 0, 0, 0.66);

  .svv-shell__header,
  .svv-shell__aside,
  .svv-shell__content {
    background: #1a1a1a;
    border-color: var(--svv-border);
  }

  .svv-search {
    background: #1f1f1f;

    &:hover {
      border-color: #4d4d4d;
    }

    &:focus-within {
      border-color: var(--svv-text);
    }
  }

  .svv-viewmode button.is-active {
    background: #2e2e2e;
    color: var(--svv-text);
    box-shadow: none;
  }

  .svv-quick button.is-active,
  .svv-calendar__day.is-selected {
    background: var(--svv-text);
    color: #141414;
  }

  .svv-card__cta,
  .svv-drawer__cta,
  .svv-submit {
    color: var(--svv-primary-text);
  }

  .svv-card__cta--muted,
  .svv-drawer__cta--muted {
    background: #4d1414;
    color: #ffb4b4;
  }

  .svv-badge--critical {
    background: #4d1414;
    color: #ffb4b4;
  }

  .svv-badge--accent {
    background: #4a2a0a;
    color: #ffcb8f;
  }

  .svv-card__media {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .svv-events--grid .svv-card {
    background: #1f1f1f;

    &:hover {
      background: #1f1f1f;
    }
  }

  .svv-monthview__cell.is-outside {
    background: #121212;
  }

  .svv-monthview__today {
    background: #1f1f1f;
    box-shadow: none;
  }

  .svv-drawer,
  .svv-modal {
    box-shadow:
      0 20px 40px -12px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.08);
  }

  .svv-drawer__head,
  .svv-drawer__foot {
    background: #1a1a1a;
  }

  .svv-field__input,
  .svv-share__link {
    background-color: #1f1f1f;
  }
}