/* Vertical UI */
.comfy-menu, .side-bar-panel {
  #crystools-monitors-root {
    /*background-color: red;*/
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
    background-color: var(--comfy-menu-bg);
    border-radius: 6px;
    border: 1px solid var(--border-color);
    display: flex;
    width: 100%;
    flex-direction: column;
    margin: 7px;
    padding: 5px 0;
    cursor: crosshair;

    /* MONITORS */

    .crystools-monitor {
      margin: 1px 10px;
      height: 12px;
      display: flex;
      align-items: center;

      .crystools-text {
        width: 40px;
        font-size: 10px;
        text-align: right;
        margin-right: 3px;

        &:hover {
          font-weight: 600;
          color: var(--input-text);
        }
      }

      .crystools-label {
        &:hover {
          font-weight: 700;
          color: var(--input-text);
        }
      }
    }

    .crystools-content {
      flex-grow: 1;
      position: relative;
      background-color: var(--content-hover-bg)
    }

    .crystools-slider {
      position: absolute;
      height: 100%;
      width: 0;
      box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
    }

    .crystools-label {
      position: relative;
      color: var(--input-text);
      font-size: 10px;
    }
  }

  /* PROGRESS BAR */

  #crystools-progressBar-root {
    cursor: pointer;
    margin: 0 12px 4px;
    height: 18px;
    position: relative;
    border-radius: 3px;
    width: 100%;
    background-color: var(--comfy-input-bg);

    .crystools-slider {
      position: absolute;
      height: 100%;
      width: 50%;
      transition: width 0.2s;
      background-color: green;
      box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.3);
    }

    .crystools-label {
      position: absolute;
      margin: auto 0;
      width: 100%;
      color: var(--input-text);
      font-size: 14px;
    }
  }
}

/* side-bar-panel */
.side-bar-panel {
  #crystools-monitors-root {
    width: 230px;
    margin-left: auto;
    margin-right: auto;
  }
}

.comfyui-queue-button {
  /*width: unset !important;*/
}

/* Horizontal UI */
#crystools-monitors-root {
  /*background-color: red;*/
  /*display: none;*/
  flex-direction: row;
  /*flex-grow: 5;*/
  justify-content: flex-end;
  /*flex: auto;*/
  flex-shrink: 1;
  /*min-width: max-content;*/
  /*height: 100%;*/
  /*  max-width: 40vw;*/
  /*  min-width: 10vw;*/
  /*gap: 5px;*/
  /*margin: 0 auto;*/
  /*align-items: center;*/
  /*align-self: center;*/
  /*width: min-content;*/
  /*width: 100%;*/
  cursor: crosshair;
  /*margin: 4px 0;*/
  display: flex; /* by progress bar base */
  flex-wrap: wrap;
  /*flex-direction: row;*/
  /*justify-content: flex-end;*/
  /*align-items: center;*/
  gap: 5px;
  align-self: center;

  .crystools-monitor {
    background-color: var(--comfy-input-bg);
    position: relative;
    align-items: center;
    flex-direction: row;
    /*width: 60px;*/
    /*height: 100%;*/

    .crystools-text {
      font-size: 10px;
      text-align: right;
      margin-left: 3px;
      position: absolute;
      font-weight: 100;
      bottom: 2px;
      z-index: 10;

      /*&:hover {*/
      /*  font-weight: 600;*/
      /*  color: var(--input-text);*/
      /*}*/
    }

    /*.crystools-label {*/
    /*  &:hover {*/
    /*    font-weight: 800;*/
    /*    color: var(--input-text);*/
    /*  }*/
    /*}*/
  }

  .crystools-content {
    position: relative;
  }

  .crystools-slider {
    position: absolute;
    height: 100%;
    width: 0;
    box-shadow: inset 2px 2px 10px rgba(0, 0, 0, 0.2);
  }

  .crystools-label {
    position: relative;
    width: 100%;
    color: var(--input-text);
    font-weight: 500;
    font-size: 11px;
    right: 2px;
    top: 2px;
    text-align: right;
  }
}