.dark-mode {
 --c-text: hsl(240, 6%, 88%);
 --c-text-secondary: hsl(240, 4%, 70%);
 --c-text-tertiary: hsl(240, 2%, 50%);
 --c-text-quaternary: #f4f4f5;

 --c-grid-border: hsl(0, 0%, 20%);

 --c-bg: hsl(240, 3%, 8%);
 --c-surface:hsl(240, 2%, 11%);
 --c-surface-high: hsl(210, 2%, 17%);
}
body.dark-mode {
    background-color: var(--c-bg);
}
.dark-mode .page-header .main-header {
    box-shadow: hsl(0deg 0% 100% / 10%) 0 1px;
    background-color: var(--c-surface);
}
.dark-mode .page-header .logo img {
    filter: brightness(0) invert(1);
}
.dark-mode .page-header .nav-item {
    background-color: hsl(240 3% 5% / 1);
    border-color: hsla(0, 0%, 100%, 0.1);
    color: var(--c-text);
}
.dark-mode .page-header .nav-item:hover {
    background-color: hsl(240 3% 0% / 1);
    border-color: hsla(0, 0%, 100%, 00);
}
.dark-mode .page-header .nav-item-small {
    background-color: hsl(240 3% 5% / 1);
    border-color: hsla(0, 0%, 100%, 0.1);
    color: var(--c-text);
}
.dark-mode .page-header .nav-item-small:hover {
    background-color: hsl(240 3% 0% / 1);
    border-color: hsla(0, 0%, 100%, 00);
}
.dark-mode .page-header .nav-item-small .icon {
    color: var(--c-gray-400);
}
.dark-mode .tippy-box[data-theme~=light] {
    background-color: #000 !important;
    border: 1px solid hsl(0deg 0% 100% / 20%) !important;
    color: var(--c-text-secondary) !important;
    box-shadow: 0 0 20px 4px rgba(154, 161, 177, .1), 0 4px 80px -8px rgba(36, 40, 47, .15), 0 4px 4px -2px rgba(91, 94, 105, .1);
}
.dark-mode .page-header .header-nav.mobile-nav {
    background-color: var(--c-surface);
}
.dark-mode .match .tabs-header {
    border-bottom: 1px solid var(--c-grid-border);
}
.dark-mode .match .tabs-header .tab-item {

}
.dark-mode .match .tabs-header .tab-item:hover {
    background-color: transparent;
}
.dark-mode .match .tabs-header .tab-item.active {
    border: 1px solid var(--c-grid-border);
    border-bottom: none;
    box-shadow: 0 1px 0 0 hsl(240deg 2.56% 7.65%);
}
.dark-mode .match .tabs-header .tab-item.active:hover {
    background-color: transparent;
}
.dark-mode .match .tabs-header .tab-item .tab-counter {
    background-color: var(--c-gray-800);
}
.dark-mode .match .tabs-header .reset-archive-btn {

}
.dark-mode .fontitem {
    border: 1px solid var(--c-grid-border);
}
.dark-mode .fontitem .item-media img {
    filter: brightness(0.93) invert(1);
}
.dark-mode .fontitem:hover {
    border: 1px solid hsl(0, 0%, 40%);
    box-shadow: 0px 0px 12px -6px #000;
}
.dark-mode .fontitem:hover img {

}
.dark-mode .fontitem .item-action {
    background-color: var(--c-gray-800);
}
.dark-mode .fontitem .stacked-indicator .expand-btn {
    background-color: var(--c-gray-800);
}
.dark-mode .fontitem .stacked-indicator .expand-btn:hover {
    color: var(--c-gray-700);
}
.dark-mode .controls {
    background-color: var(--c-surface-high);
    box-shadow: inset rgb(71 73 75) 0 0 0 1px
}
.dark-mode  .main-input .input-wrapper .user-text {
    background-color: var(--c-surface);
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}
.dark-mode .main-input .input-wrapper .user-text:hover {
    background-color: #000;
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}
.dark-mode .main-input .input-wrapper .user-text:focus {
    background-color: #000;
    box-shadow: inset rgb(71 73 75) 0 0 0 1px;
}
.dark-mode .main-input .user-text-submit {
    background-color: var(--c-gray-700);
    color: hsl(0deg 0% 100%);
    box-shadow: hsl(0deg 0% 0%) 0px 3px 8px -4px, hsl(0, 0%, 0%) 0 2px 0 0;
    border: 1px solid #646464
}
.dark-mode .main-input .user-text-submit:hover {
    background-color: var(--c-gray-700);
    color: hsl(0deg 0% 100%);
    box-shadow: hsl(0deg 0% 0%) 0px 3px 8px -4px, hsl(0, 0%, 0%) 0 2px 0 0;
    border: 1px solid #6e6e6e;
}
.dark-mode .main-input .clear-text-button .icon {
    filter: brightness(0) invert(1);
}
.dark-mode .custom-caret {
    background-color: var(--c-gray-500);
}
.dark-mode .custom-caret .counter-height {
    background-color: var(--c-gray-800);
}
.dark-mode .preferences .option-wrapper {
    background-color: var(--c-surface);
    box-shadow: 0px 0px 0px 1px #575757;

}
.dark-mode .preferences .option-wrapper:hover {
    background-color: var(--c-bg);
}
.dark-mode .preferences .display-label.icon img {
    filter: brightness(0) invert(1);
}
.dark-mode .preferences .option .display-label .value {
    color: var(--c-gray-400);
}
.dark-mode .preferences .option > input[type="radio"]:checked ~ .display-label {
    opacity: 1;
    background-color: #000000;
    box-shadow: inset 0px 0px 0px 1px hsl(0deg 0% 29.51%), 0px 1px 4px -2px rgb(0 0 0);
}
.dark-mode .searchable-select__trigger {
    border: 1px solid var(--c-gray-200);
    border: 1px solid #575757;
    background-color: var(--c-surface);
}
.dark-mode .searchable-select__trigger:hover {
    background-color: hsl(0, 0%, 5%);
    border: 1px solid #575757;
}
.dark-mode .searchable-select__dropdown {
    background-color: #2a2b2c;
    border: 1px solid hsl(0deg 0% 32%);
}
.dark-mode .searchable-select__search-input {
    background-color: #2a2b2c;
    border-bottom: 1px solid l(0deg 0% 32%);
}
.dark-mode .searchable-select__chevron {
    filter: brightness(0.5) invert(1);
}
.dark-mode .searchable-select__option:hover {
    background-color: #000;
}
.dark-mode .searchable-select__option.is-selected {
    background-image: url(../../assets/icons/check-white.svg);
}