/* Dark mode styles */
.dark-mode {
   .bordered {
      border-color: $darkColor;
   }


   .item-piles-chat-card ul {
      color: #efefef;
   }

   .item-piles-chat-card li:nth-child(odd) {
      background-color: rgba(250,250,250,0.2);
   }

   .item-piles-chat-card li:nth-child(even) {
      background-color: rgba(250,250,250,0.05);
   }

   .application.actor {
      .nav-tabs-right {
         .nav-tab, .nav-tab-vert {
            background: url('../assets/img/grunge2.jpg');

            &.active {
               img {
                  filter: brightness(100%);
               }
            }
            // Hover effect for nav-tab images
            img {
               transition: filter 0.3s ease; // Smooth transition for the filter effect
            }

            &:hover img {
               filter: brightness(80%);
            }

            a {
               border-color: $darkColor;
            }
         }
      }

      .ability-scores {
         .ability {
            border-color: $darkColor;
         }
      }
   }

   .fantastic-depths {
      button {
         background: url('../assets/img/grungeyellow.jpg');
         color: $lighterColor;
         border: 1px solid #545140;
      }

      .window-content {
         color: $lighterColor;
         background: url('../assets/img/grunge2.jpg');

         .editor-container {
            margin: 0 4px;
            padding: 0 4px;
            border: $darkColor solid 1px;

            .editor-content {
               padding: 0 2px;
            }
         }

         .prosemirror-menu {
            padding: 2px;
         }

         .content-link {
            background: $darkerColor;
         }
         /*button {
            background: url('../assets/img/grungeyellow.jpg');
            color: $lighterColor;
            border: 1px solid #545140;
         }*/

         a:hover {
            text-shadow: $glowForDarkMode;
         }

         textarea {
            color: $lighterColor;
         }

         input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="time"], input[type="search"] {
            background: rgb(210, 200, 180, 0.1);
            color: $lighterColor;
         }

         input::placeholder {
            color: $lightColor;
         }

         select {
            background: $darkerColor;
            color: $lighterColor;

            option {
               background: $darkColor;
               color: $lighterColor;
            }
         }

         nav.sheet-tabs {
            margin: 4px 0;
            border-top: 1px solid $darkColor;
            border-bottom: 1px solid $darkColor;
         }

         .top-border {
            border-top: 1px solid $darkColor;
         }

         .bottom-border {
            border-bottom: 1px solid $darkColor;
         }

         .items-list {
            color: $lightColor;

            .item-controls, .item-controls-sm {
               .item-unequipped {
                  color: rgba(220, 220, 220, 0.1);
               }
            }

            .items-header {
               background: rgba(200, 200, 200, 0.1);
               border: $borderGrooveDk;
            }

            .items-footer {
               background: rgba(20, 20, 20, 0.7);
               border: $borderGrooveDk;
            }

            .item-prop {
               border-left: 1px solid $darkColor;
               border-right: 1px solid $darkColor;
            }

            .item {
               .item-name {
                  color: $lighterColor;
               }
            }
         }

         .rollable, .chatable, .open-sheet {
            &:hover,
            &:focus {
               color: $lighterColor;
               text-shadow: $glowForDarkMode;
            }
         }

         .rollable2, .chatable2, .open-sheet2 {
            &:hover,
            &:focus {
               color: $lighterColor;
               text-shadow: $glowForDarkMode;
            }
         }

         .inline-roll {
            background: rgba(0,0,0,0.1);
            color: $lighterColor;
         }
      }

      .summary {
         li {
            color: $lightColor;

            label {
               color: $lightColor;
            }
         }
      }
   }

   .chat-message {
      background: url('../assets/img/grungeyellow.jpg');
      color: $lighterColor !important;
      border: 1px solid #545140;

      .message-content {
         h1, h2, h3, h4, h5, h6 {
            color: $lighterColor;
         }
      }

      a.inline-roll {
         background: url('../assets/img/grunge2.jpg');
      }

      .content-link {
         background: url('../assets/img/grungeblue.jpg');
      }

      hr {
         border-top: none;
         border-bottom: 2px solid #645140;
      }

      .message-header, button {
         color: $lightColor;
      }

      .attack-info {
         color: #90b0e0;
      }

      .dice-formula, .dice-total {
         background: url('../assets/img/grunge2.jpg');
         border: 1px solid $darkColor;
         box-shadow: none;
      }

      .attack-fail, .roll-fail {
         color: #d85d48;
      }

      .attack-success, .roll-success {
         color: #7edb89;
      }

      .roll-info {
         color: #789ad0;
      }

      .warning {
         color: #deb56a;
      }

      .table-description {
         color: $lighterColor;
      }
   }
}
/* Light mode styles */
.light-mode {
   .application.actor {
      .nav-tabs-right {
         .nav-tab, .nav-tab-vert {
            background: url('../assets/img/parchment.jpg');

            &.active {
               img {
                  filter: brightness(5%);
               }
            }
            // Hover effect for nav-tab images
            img {
               transition: filter 0.3s ease; // Smooth transition for the filter effect
            }

            &:hover img {
               filter: brightness(40%);
            }

            a {
               border-color: $lightColor;
            }
         }
      }

      .ability-scores {
         .ability {
            border-color: $lightColor;
         }
      }
   }

   .fantastic-depths {
      .window-content {
         background: url('../assets/img/parchment.jpg');
         color: $darkerColor;

         .bordered {
            border-color: $lightColor;
         }

         .top-border {
            border-top: 1px solid $c-faint;
         }

         .bottom-border {
            border-bottom: 1px solid $c-faint;
         }

         .items-list {
            color: $darkColor;

            .item-controls, .item-controls-sm {
               .item-unequipped {
                  color: rgba(0, 0, 0, 0.2);
               }
            }

            .items-header {
               background: rgba(90, 100, 100, 0.2);
               border: $borderGroove;
            }

            .items-footer {
               background: rgba(170, 170, 170, 0.2);
               border: $borderGroove;
            }

            .item {
               .item-name {
                  color: $darkerColor;
               }
            }
         }

         .rollable, .chatable, .open-sheet {
            &:hover,
            &:focus {
               color: $darkerColor;
               text-shadow: 0 0 10px $shadowColor;
            }
         }

         .rollable2, .chatable2, .open-sheet2 {
            &:hover,
            &:focus {
               color: $darkerColor;
               text-shadow: 0 0 10px $shadowColor;
            }
         }
      }

      .summary {
         li {
            color: $darkColor;

            label {
               color: $darkColor;
            }
         }
      }
   }

   .chat-message {
      color: $darkerColor !important;

      .attack-fail, .roll-fail {
         color: #602010;
      }

      .attack-success, .roll-success {
         color: #106020;
      }

      .attack-info {
         color: #3b4a55;
      }

      .damage {
         font-weight: bold;
      }

      .roll-info {
         color: #101030;
      }

      .warning {
         color: #702010;
      }
   }
}
