/** Dark mode for Esup Pod **/

[data-theme="dark"] {
  /* CUSTOM COLORS */
  --color-shark: #212529;
  --bg-color: #303238;
  --background-color: #1e1e2c;

  /* BOOTSTRAP COLORS */
  --bs-dark: #202025;
  --bs-light: var(--bs-dark);
  --bs-gray-dark: var(--bs-dark);
  --bs-danger: #fe4c53;
  --color-formfields: #454c52;
  --color-silver-chalice: #000;
  --color-alto: var(--pod-background);
  --color-black: #fff;
  --color-black-alpha: #fffa;

  /* Video Comment variable */

  /*
  --primary-background-color: var(--pod-background) !important;
  --third-background-color: var(--pod-background) !important;
  --content-primary-color: var(--pod-font-color) !important;
  */
}

:root[data-theme="dark"] {
  --pod-primary: var(--pod-primary-dark);
  --pod-primary-lighten: var(--pod-primary-lighten-dark);
  --pod-primary-darken: var(--pod-primary-darken-dark);
  --pod-background: var(--pod-background-dark);
  --pod-font-color: var(--pod-font-color-dark);
  --pod-background-neutre1-bloc: var(--pod-background-neutre1-bloc-dark);
  --pod-background-neutre2-bloc: var(--pod-background-neutre2-bloc-dark);
  --pod-btn-text: var(--pod-btn-text-dark);
  --pod-alert: var(--pod-alert-dark);
  --pod-link-color: var(--pod-primary-lighten-dark);
  --pod-link-color-rgb: var(--pod-primary-lighten-dark-rgb);
  --pod-activelink-color: var(--pod-primary);
}

[data-theme="dark"] .table {
  /* copied from .table-dark class */
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #373b3e;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
}

[data-theme="dark"] .offcanvas {
  --bs-offcanvas-color: var(--pod-font-color);
}

/***** Auto DARK MODE (use browser setting) *****/

/*
@media (prefers-color-scheme: dark) {
  body[data-admin-utc-offset] {
    --primary: #264b5d;
    --secondary: #417690;
    --pod-font-color: #eeeeee;
    --bg-color: #121212;
  }
}
*/

/* switch logoPod color on dark theme */
[data-theme="dark"] .pod-navbar__brand img {
  filter: invert(100%) saturate(2908%) hue-rotate(27deg) brightness(121%)
    contrast(99%);
}

[data-theme="dark"] .vjs-logo-button {
  filter: brightness(0) invert(1);
}

[data-theme="dark"] :not(.alert) > .btn-close {
  filter: invert(100%);
}

[data-theme="dark"] .form-control::placeholder {
  color: #bec1c6;
}

[data-theme="dark"] .text-muted {
  color: #ccc !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-check-input:focus {
  background-color: var(--background-color);
  color: var(--pod-font-color);
  border-color: var(--pod-primary);
  box-shadow: 0 0 0 0.2rem rgb(126 126 126 / 25%);
}

[data-theme="dark"] .infinite-item.selected .checked-overlay {
  background-color: var(--dark-select-category-video-color);
}

[data-theme="dark"] #card-takenote .header:hover {
  background-color: var(--pod-background);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bs-white);
}

[data-theme="dark"] .breadcrumb-item.active {
  color: #a8abb3;
}

[data-theme="dark"] .nav-tabs .nav-item.show .nav-link,
[data-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--pod-background);
  color: var(--bs-white);
  border-bottom: none;
}

[data-theme="dark"] .nav-tabs .nav-link:focus,
[data-theme="dark"] .nav-tabs .nav-link:hover {
  background-color: var(--pod-background);
  border-color: var(--pod-background);
}

/*
[data-theme="dark"] .navbar-nav .nav-link:focus,
[data-theme="dark"] .navbar-nav .nav-link:hover {
  color: var(--pod-activelink-color);
}
*/

[data-theme="dark"] .btn-link.disabled,
[data-theme="dark"] .dropdown-item,
[data-theme="dark"] footer,
[data-theme="dark"] .list-group-item {
  color: var(--pod-font-color);
}

[data-theme="dark"] .btn-link.disabled {
  opacity: 0.7;
}

/*
[data-theme="dark"] .btn:hover,
[data-theme="dark"] .btn:active,
[data-theme="dark"] .btn:focus {
  color: inherit;
}

[data-theme="dark"] .btn-link:focus,
[data-theme="dark"] .btn-link:active,
[data-theme="dark"] .btn-link:hover {
  color: var(--pod-activelink-color);
}
*/

[data-theme="dark"] .btn-light {
  background-color: var(--bs-dark);
  border-color: var(--color-formfields);
  color: var(--pod-link-color);
}

[data-theme="dark"] .btn-light:hover,
[data-theme="dark"] .btn-light:active,
[data-theme="dark"] .btn-light:focus {
  color: var(--pod-activelink-color);
  background-color: var(--color-silver);
}

[data-theme="dark"] .btn-secondary {
  color: var(--bs-white);
}

[data-theme="dark"] .btn-outline-secondary {
  color: #a8afb5;
}

[data-theme="dark"] .btn-outline-primary {
  color: var(--pod-font-color);

  --bs-btn-hover-bg: var(--pod-primary-darken-dark);
}

[data-theme="dark"] .btn-outline-primary > svg {
  color: var(--pod-primary);
}

[data-theme="dark"] .btn-outline-primary:hover > svg,
[data-theme="dark"] .btn-outline-primary:focus > svg {
  color: var(--bs-white);
}

[data-theme="dark"] .card {
  /*
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
  */
  color: var(--pod-font-color);
}

[data-theme="dark"] .card-header {
  border-bottom-color: var(--color-formfields);
}

/*
body.dark {
  background-color: var(--background-color) !important;
}
*/

/* Video Comment override css dark mode */
[data-theme="dark"] .comment_main .comment .comment_content {
  box-shadow: 2px 2px 12px var(--bs-dark);
}

/* Modal override css dark mode */
[data-theme="dark"] #podfile #dirs .folder-search,
[data-theme="dark"] #podfile .list_folders .folder_container:nth-child(2n),
[data-theme="dark"] #podfile .list_folders_sub .folder_container:nth-child(2n),
[data-theme="dark"] .modal-content {
  background-color: var(--bs-dark) !important;
  border-color: var(--bs-dark) !important;
  color: #fff !important;
}

[data-theme="dark"] .close {
  color: #fff;
}

[data-theme="dark"] #podfile #dirs .folder-search::placeholder {
  color: #ccc;
}

[data-theme="dark"] #podfile .col,
[data-theme="dark"] .card {
  background-color: var(--pod-background-neutre2-bloc);
}

[data-theme="dark"] .list-group-item-action:focus,
[data-theme="dark"] .list-group-item-action:hover {
  background-color: var(--bs-dark);
}

[data-theme="dark"] .border {
  border-color: var(--gray) !important;
}

/** Admin widgets styles **/
[data-theme="dark"] .selector .selector-filter,
[data-theme="dark"] .selector-chosen h2,
[data-theme="dark"] .selector .selector-available h2 {
  color: var(--pod-font-color);
  border-color: var(--background-color);
}

[data-theme="dark"] .selector .selector-filter {
  background-color: var(--pod-background);
}

[data-theme="dark"] .selector-chosen h2,
[data-theme="dark"] .selector .selector-available h2 {
  background-color: var(--color-silver-chalice);
}

/* INPUT TEXT-AREA SELECT dark mode */
[data-theme="dark"] select,
[data-theme="dark"] input:not(.btn),
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .select2-container,
[data-theme="dark"]
  .select2-container-multi
  .select2-choices
  .select2-search-field
  input,
[data-theme="dark"] .select2-container-multi .select2-choices,
[data-theme="dark"] .select2-drop-active,
[data-theme="dark"] .select2-choice,
[data-theme="dark"] .select2-choice .select2-search-choice-close + div,
[data-theme="dark"] .select2-dropdown-open .select2-choice,
[data-theme="dark"] .select2-results .select2-no-results,
[data-theme="dark"] .select2-results .select2-searching,
[data-theme="dark"] .select2-container--default .select2-selection--multiple,
[data-theme="dark"] .select2-container--default .select2-selection--single {
  background-color: var(--pod-background-neutre1-bloc);
  border-color: var(--pod-font-color);
  color: var(--pod-font-color);

  /* box-shadow: none; */
}

[data-theme="dark"] .select2-selection--multiple .select2-selection__choice {
  color: #000;
}

[data-theme="dark"]
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  color: var(--pod-font-color);
}

[data-theme="dark"] .select2-results__option {
  background-color: var(--pod-background-neutre1-bloc);
  color: var(--pod-font-color);
}

[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3f9ff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/*
.theme-switch-wrapper {
  display: flex;
  align-items: center;
}

.theme-switch-wrapper em {
  margin-left: 10px;
  font-size: 1rem;
}
*/

.slider {
  background-color: var(--pod-background-neutre1-bloc);
  cursor: pointer;
  display: flex;
  justify-content: space-around;
  inset: 0;
  position: absolute;
  transition: 0.4s;
  border-radius: 24px;
}

.slider:focus,
.slider:hover {
  box-shadow: 0 0 3px var(--pod-primary-lighten);
}

.slider::before {
  background-color: var(--bs-white);
  bottom: 2px;
  content: "";
  height: 20px;
  left: 2px;
  position: absolute;
  transition: 0.4s;
  width: 20px;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--pod-primary);
}

input:checked + .slider::before {
  transform: translateX(26px);
}

[data-theme="dark"] input.pod-multi-range {
  background-color: transparent;
}