// -----------------------------------------
// Items Lists
// -----------------------------------------
.items-list {
   margin: 0 !important;
   padding: 0 !important;
   list-style: none;
   overflow-y: auto;
   scrollbar-width: thin;

   .warning-bkgd {
      background: rgba(150, 20, 20, 0.15);
   }
   // Child lists
   .item-list {
      list-style: none;
      margin: 0;
      padding: 0;
   }
   // Item Name
   .item-name {
      flex: 2;
      margin: 0;
      overflow: hidden;
      font-size: 14px;
      text-align: left;
      display: flex;
      align-items: center;

      h3, h4 {
         margin: 0;
         white-space: nowrap;
         overflow-x: hidden;
      }
   }
   // Control Buttons
   .item-controls, .item-controls2 {
      display: flex;
      justify-content: flex-end;

      a {
         font-size: 10px;
         text-align: center;
         margin: 0 4px;
      }

      i {
         font-size: 12px;
      }
   }

   .item-controls {
      flex: 0 0 70px;
   }

   .item-controls2 {
      flex: 0 0 46px;
   }

   .item-controls-sm {
      display: flex;
      flex: 0 0 50px;
      justify-content: flex-end;

      a {
         font-size: 8px;
         text-align: center;
         margin: 0 5px;
      }

      i {
         font-size: 10px;
      }
   }
   // Individual Item
   .item {
      padding: 0; // to align with the header border

      &:last-child {
         border-bottom: none;
      }

      .contained {
         padding-left: 10px;
      }

      .contained2 {
         padding-left: 20px;
      }

      .contained3 {
         padding-left: 30px;
      }

      .item-name {
         img {
            border: none;
         }

         .item-image {
            flex: 0 0 30px;
            height: 30px;
            background-size: 85%; /* Ensures the d20 icon is properly sized */
            background-repeat: no-repeat;
            background-position: 0 0;
            border: none;
            margin-right: 2px;
            position: relative;
            top: 2px;
         }

         .rollable:hover img, .chatable:hover img {
            opacity: 0; /* Or use display: none; */
         }

         .rollable2:hover img, .chatable2:hover img {
            opacity: 0; /* Or use display: none; */
         }

         .rollable2:hover {
            background-image: url('/icons/svg/d20-highlight.svg');
         }

         .chatable2:hover {
            background-image: url('/icons/svg/book.svg');
         }

         .rollable:hover {
            background-image: url('/icons/svg/d20-highlight.svg');
         }

         .chatable:hover {
            background-image: url('/icons/svg/book.svg');
         }
      }

      input {
         text-align: center;
      }

      input, select {
         padding: 0 4px;
         width: calc(100% - 3px);
         height: 22px;
      }

      .item-description {
         margin: -3px 0 4px 0;
         padding: 0 8px;
         display: block;
         flex: auto;
         text-align: justify;
      }

      .desc-collapsed {
         display: none;
         height: 0;
         padding: 0;
         margin: 0;
         transition: height 0.1s ease-in, padding 0.1s ease-in;
      }
   }

   .item-40px {
      width: 40px;
      max-width: 40px;
   }

   .item-50px {
      width: 50px;
      max-width: 50px;
   }

   .item-60px {
      width: 60px;
      max-width: 60px;
   }

   .item-80px {
      width: 80px;
      max-width: 80px;
   }

   .item-100px {
      width: 100px;
      max-width: 100px;
   }

   .item-prop {
      text-align: center;
      border-left: 1px solid #c9c7b8;
      border-right: 1px solid #c9c7b8;
      font-size: 12px;
      height: 26px;
      line-height: 26px;
      align-items: center;
      overflow: hidden;
   }
   // Section Header
   .items-header {
      height: auto;
      margin: 2px 0;
      padding: 3px 1px;
      align-items: center;
      font-weight: bold;

      input{
         height:18px;
      }

      > * {
         font-size: 12px;
         text-align: center;
      }

      .align-left {
         text-align: left;
         padding-left: 6px;
      }

      .item-name {
         padding-left: 3px;
         text-align: left;
      }
   }

   .items-footer {
      height: 26px;
      margin: 2px 0;
      padding: 0;
      align-items: center;
      font-weight: bold;

      > * {
         font-size: 12px;
         text-align: center;
      }

      .align-left {
         text-align: left;
      }

      .item-name {
         padding-left: 3px;
         text-align: left;
      }
   }

   .consumable-counter, .charges-counter {
      height: 16px;
      display: flex;
      flex-wrap: wrap;
      line-height: 14px;

      label {
         flex: 0 30px;
         font-size: 11px;
         text-indent: 3px;
      }

      .full-mark,
      .empty-mark {
         cursor: pointer;
         flex: 0 8px;
         margin: 0 1px;
         box-shadow: inset 0 0 3px $colorTan;
         height: 12px;

         &:hover {
            background: $colorTan;
         }
      }

      .full-mark {
         background: #808080;
         border: 1px inset $colorTan;
      }
   }
}

// Example style for fade (can be removed if not needed).
.item-formula {
   flex: 0 0 200px;
   padding: 0 8px;
}

.item-info {
   text-align: center;
}
