.mdi.rotate270::before {
  transform: rotate(270deg);
}

/* Generic */
.comfyui-button {
  display: flex;
  align-items: center;
  gap: 0.5em;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  box-sizing: border-box;
  margin: 0;
  transition: box-shadow 0.1s;
}

.comfyui-button:active {
  box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
}

.comfyui-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.primary .comfyui-button,
.primary.comfyui-button {
  background-color: var(--primary-bg) !important;
  color: var(--primary-fg) !important;
}

.primary .comfyui-button:not(:disabled):hover,
.primary.comfyui-button:not(:disabled):hover {
  background-color: var(--primary-hover-bg) !important;
  color: var(--primary-hover-fg) !important;
}

/* Popup */
.comfyui-popup {
  position: absolute;
  left: var(--left);
  right: var(--right);
  top: var(--top);
  bottom: var(--bottom);
  z-index: 2000;
  max-height: calc(100vh - var(--limit) - 10px);
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.3);
}

.comfyui-popup:not(.open) {
  display: none;
}

.comfyui-popup.right.open {
  border-top-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  overflow: hidden;
}
/* Split button */
.comfyui-split-button {
  position: relative;
  display: flex;
}

.comfyui-split-primary {
  flex: auto;
}

.comfyui-split-primary .comfyui-button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 1px solid var(--comfy-menu-bg);
  width: 100%;
}

.comfyui-split-arrow .comfyui-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 2px;
  padding-right: 2px;
}

.comfyui-split-button-popup {
  white-space: nowrap;
  background-color: var(--content-bg);
  color: var(--content-fg);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.comfyui-split-button-popup.hover {
  z-index: 2001;
}
.comfyui-split-button-popup > .comfyui-button {
  border: none;
  background-color: transparent;
  color: var(--fg-color);
  padding: 8px 12px 8px 8px;
}

.comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
  background-color: var(--comfy-input-bg);
}

/* Button group */
.comfyui-button-group {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
}

.comfyui-button-group:empty {
  display: none;
}
.comfyui-button-group > .comfyui-button,
.comfyui-button-group > .comfyui-button-wrapper > .comfyui-button {
  padding: 4px 10px;
  border-radius: 0;
}

/* Menu */
.comfyui-menu .mdi::before {
  font-size: 18px;
}

.comfyui-menu .comfyui-button {
  background: var(--comfy-input-bg);
  color: var(--fg-color);
  white-space: nowrap;
}

.comfyui-menu .comfyui-button:not(:disabled):hover {
  background: var(--border-color);
  color: var(--content-fg);
}

.comfyui-menu .comfyui-split-button-popup > .comfyui-button {
  border-radius: 0;
  background-color: transparent;
}

.comfyui-menu .comfyui-split-button-popup > .comfyui-button:not(:disabled):hover {
  background-color: var(--comfy-input-bg);
}

.comfyui-menu .comfyui-split-button-popup.left {
  border-top-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.comfyui-menu .comfyui-button.popup-open {
  background-color: var(--content-bg);
  color: var(--content-fg);
}

.comfyui-menu-push {
  margin-left: -0.8em;
  flex: auto;
}

/** Send to workflow widget selection dialog */
.comfy-widget-selection-dialog {
  border: none;
}

.comfy-widget-selection-dialog div {
  color: var(--fg-color);
  font-family: Arial, Helvetica, sans-serif;
}

.comfy-widget-selection-dialog h2 {
  margin-top: 0;
}

.comfy-widget-selection-dialog section {
  width: fit-content;
  display: flex;
  flex-direction: column;
}

.comfy-widget-selection-item {
  display: flex;
  gap: 10px;
  align-items: center;
}

.comfy-widget-selection-item span {
  margin-right: auto;
}

.comfy-widget-selection-item span::before {
  content: '#' attr(data-id);
  opacity: 0.5;
  margin-right: 5px;
}

.comfy-modal .comfy-widget-selection-item button {
  font-size: 1em;
}

/***** Responsive *****/
.lg.comfyui-menu .lt-lg-show {
  display: none !important;
}
.comfyui-menu:not(.lg) .nlg-hide {
  display: none !important;
}
/** Large screen */
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-button span,
.lg.comfyui-menu>.comfyui-menu-mobile-collapse.comfyui-button span {
  display: none;
}
.lg.comfyui-menu>.comfyui-menu-mobile-collapse .comfyui-popup .comfyui-button span {
  display: unset;
}

/** Non large screen */
.lt-lg.comfyui-menu {
  flex-wrap: wrap;
}

.lt-lg.comfyui-menu > *:not(.comfyui-menu-mobile-collapse) {
  order: 1;
}

.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
  order: 9999;
  width: 100%;
}

.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse {
  order: -1;
}

.comfyui-body-bottom .lt-lg.comfyui-menu > .comfyui-menu-button {
  top: unset;
  bottom: 4px;
}

.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button-group {
  flex-wrap: wrap;
}

.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse.comfyui-button {
  padding: 10px;
}
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button,
.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-button-wrapper {
  width: 100%;
}

.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-popup {
  position: static;
  background-color: var(--comfy-input-bg);
  max-width: unset;
  max-height: 50vh;
  overflow: auto;
}

.lt-lg.comfyui-menu:not(.expanded) > .comfyui-menu-mobile-collapse {
  display: none;
}

.lt-lg .comfyui-menu-button {
  position: absolute;
  top: 4px;
  right: 8px;
}

.lt-lg.comfyui-menu > .comfyui-menu-mobile-collapse .comfyui-view-list-popup {
  border-radius: 0;
}

.lt-lg.comfyui-menu .comfyui-workflows-popup {
  width: 100vw;
}

/** Small */
.lt-md .comfyui-workflows-button-inner {
  width: unset !important;
}
.lt-md  .comfyui-workflows-label {
  display: none;
}

/** Extra small */
.lt-sm .comfyui-interrupt-button {
  margin-right: 45px;
}
.comfyui-body-bottom .lt-sm.comfyui-menu > .comfyui-menu-button{
  bottom: 41px;
}
