//themes css

// Joy Theme
html[layout="joy"] {
  --primary-hs: 210, 97%; // template primary color // #024f9d
  --primary: hsl(var(--primary-hs), 31%);
  --df-common-bg: var(--df-e9e8d9);
}

// Green Theme
html[data-theme="Green"] {
  --primary-hs: 148, 100%; // template primary color // #008a40
  --primary: hsl(var(--primary-hs), 27%);
  --df-common-bg: var(--primary-100);
  --df-body-bg: var(--primary-0); // body bg

  img {
    filter: unset;
  }
}

// Orange Theme
html[data-theme="Orange"] {
  --primary-hs: 32, 91%; // template primary color // #e57f0b
  --primary: hsl(var(--primary-hs), 47%);
  --df-common-bg: var(--primary-100);
  --df-body-bg: var(--primary-0); // body bg

  .category-card .category-card-main .eye-icon,
  .bookmark-icon {
    filter: invert(1);
  }
}

// Dark Mode
html[data-theme="Darkmode"],
html[data-theme="JOYFUL"][data-mode="DARKMODE"] {
  // Dark Theme color variation
  --primary-hs: 49, 100%; // template primary color // #ffd829
  --primary: hsl(var(--primary-hs), 58%);

  //common variables
  --df-333: #333;
  --df-222: #222;
  --text-color: var(--white);
  --df-background: var(--df-222);
  --df-common-bg: var(--df-222);

  //declared variables
  --df-body-bg: var(--black); // body bg
  --df-card-bg: var(--df-333);
  --df-related-card-bg: var(--df-333);
  --df-sidebar-menu-text: var(--gray-300);
  --df-sidebar-menu-active-bg: var(--df-333);
  --df-tab-text: var(--text-color);
  --df-btn-default-color: var(--black);
  --df-tag-bg: var(--black);

  --open-btn-bg: var(--df-222);
  --open-btn-color: var(--white);

  lib-lib-entry {
    .df-header img {
      filter: unset !important;
    }

    .discussion-forum-content .discuss-right-panel {
      background: var(--df-common-bg);
      padding: 1rem;
    }

    .df-cancel-btn:hover,
    .df-cancel-btn:active {
      color: var(--black);
      background-color: var(--primary-800);
    }

    img {
      filter: invert(1);
    }

    .tag-empty-container .tag-empty-label,
    .tag-empty-container .tag-empty-text {
      color: var(--white) !important;
    }
    .df-dimmer-alert-modal .df-alert-modal .df-alert-modal-buttons {
      border-top: none;
    }
    .df-dimmer-alert-modal .df-alert-modal .df-alert-modal-header {
      color: #000;
    }
    dt-app-loader-container,
    .dt-app-loader-container .df-dimmer-alert-modal .df-alert-modal,
    df-alert-modal-buttons {
      background: #333;
    }
  }
}

//specific classes for joy theme
html[layout="joy"] {
  lib-lib-entry {
    .df-header {
      border-radius: 1.5rem;
    }

    .discussion-forum-content .discuss-right-panel {
      border-radius: 1.5rem;
      background: var(--df-common-bg);
      padding: 1rem;
    }

    .df-btn {
      border-radius: 1.5rem;
      box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2),
        0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
      border: 0;
    }

    .df-btn-normal {
      height: 2.5rem;
      padding: 0.5rem 1.5rem;
    }
    .recent-tabs .tabs-content .tabs-filter .filter-option {
      border-radius: 0.375rem;
    }
  }
}