/* Author: VladMandic */

:root {
  --sd-primary-h: 180deg;
  --sd-primary-s: 60%;
  --sd-primary-l: 40%;
  --sd-body-font: 'NotoSans', sans-serif;
  --sd-text-font: 'NotoSans', sans-serif;
  --sd-button-font: 'NotoSans', sans-serif;
  --sd-main-accent-color:hsl(var(--sd-primary-h) 30% 40%);
  --sd-input-placeholder-text-color:hsl(var(--sd-primary-h) var(--sd-primary-s) 60%);
  --sd-secondary-color:hsl(0deg 0% 13%);
  --sd-main-background-color:hsl(0deg 0% 9%);
  --sd-input-height:36px;
  --sd-input-slider-height:0.4;
  --sd-input-icon-height:calc(var(--sd-input-height) - var(--sd-input-border-size) * 2);
  --sd-input-padding:4px 10px;
  --sd-input-line-height:24px;
  --sd-muted-color:hsl(50, 5%, 35%);
  --sd-label-color:hsl(50, 10%, 80%);
  --sd-input-text-color:hsl(0deg 0% 90%);
  --sd-input-border-size:0;
  --sd-input-background-color:hsl(var(--sd-primary-h) 0% 9);
  --sd-input-border-color:hsl(var(--sd-primary-h) 0% 0%);
  --sd-input-hover-text-color:hsl(50deg 10% 80%);
  --sd-panel-background-color:hsl(0deg 0% 13%);
  --sd-panel-border-color:hsl(0deg 0% 26%);
  --sd-panel-padding:4px;
  --sd-border-radius:4px;
  --sd-border-size:0;
  --sd-gap-size:2px;
  --sd-group-background-color:hsl(0deg 0% 13%);
  --sd-group-padding:2px;
  --sd-group-border-radius:0;
  --sd-group-border-size:0;
  --sd-group-border-color:hsl(0deg 0% 13%);
  --sd-group-gap:6px;
  --sd-extra-gap: calc(2*var(--sd-gap-size));
  --sd-outside-gap-size:8px;
  --sd-scrollbar-color: var(--sd-panel-border-color);
  --sd-outline-color: var(--sd-button-hover-color);
  --sd-outline-size: calc(var(--sd-border-size) * 0.8);
  --sd-button-normal-color:hsl(0deg 5% 18%);
  --sd-button-hover-color: hsl(var(--sd-primary-h) var(--sd-primary-s) 20%);
  --sd-button-selected-color: hsl(var(--sd-primary-h) var(--sd-primary-s) 30%);
  --sd-button-normal-text-color: var(--sd-input-text-color);
  --sd-button-hover-text-color: hsl(0deg 0% 80%);
  --sd-button-selected-text-color: hsl(0deg 0% 80%);
  color-scheme: dark;
}

.tab-nav {
  background-color: var(--sd-button-normal-color);
}

.group-col {
  gap: 2px !important;
}

.form {
  gap: 8px;
}

.extra-network-subdirs {
  gap: 2px;
  margin-left: -4px;
  margin-right: 8px;
}

.flexbox.row {
  margin-bottom: unset;
}

.gutter.gutter-horizontal, .gutter.gutter-vertical {
  background: transparent;
}

.accordion-vertical.expand {
  margin-right: 0;
}

*.gradio-gallery .preview img {
  background-color: var(--sd-group-background-color);
}

.empty {
  display: none !important;
}

.grid-wrap {
  background-color: unset;
}

.gradio-gallery .preview {
  background-color: unset;
}

.acc-button {
  background-color: unset;
  width: unset;
}

.gradio-row {
  padding-bottom: 1em !important;
}

.padding {
  margin-bottom: var(--sd-panel-padding) !important;
}

.tab-nav {
  resize: none !important;
}

#main-nav {
  margin-right: 2px !important;
}

.extra-network-subdirs>button,
.settings-tabs button {
  padding: 6px;
}

.locale-indicator {
  background-color: unset;
}

.gradio-textbox {
  padding: 0 !important;
}

.gradio-accordion {
  background-color: unset !important;
}

.settings-tabs .tab-nav {
  gap: var(--sd-gap-size);
  background-color: transparent;
}
.settings-tabs .tab-nav br {
  display: none;
}

button>.mask-icon,
button>span {
  height: 1.5em;
  min-width: 1.3em;
  line-height: 1.3em;
  margin: 0.2em;
  pointer-events: none;
  filter: drop-shadow(1px 1px 2px black);
}

.mask-icon {
  filter: blur(4px) !important;
}

.btn-generate button {
  color: hsl(145, 60%, 75%);
}

.icon-generate, .icon-loop, .icon-save {
  background-color: hsl(145, 60%, 75%) !important;
}
.icon-skip {
  background-color: hsl(50, 30%, 75%) !important;
}
.icon-pause, .icon-magic {
  background-color: hsl(50, 60%, 75%) !important;
}
.icon-stop, .icon-delete {
  background-color: hsl(0, 60%, 75%) !important;
}
.icon-enqueue, .icon-reprocess {
  background-color: hsl(145, 30%, 75%) !important;
}
.icon-skip, .icon-folder, .icon-info, .icon-paste, .refresh {
  background-color: hsl(195, 30%, 75%) !important;
}

.generate.active>.portal>button {
  filter: drop-shadow(2px 4px 6px black)
}

input[type="checkbox"], input[type="radio"] {
  cursor: pointer;
  min-height: 24px;
  max-height: 24px;
  font-size: 24px;
  appearance: none;
  mask-image: url(../html/svg/square.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--sd-muted-color);
  scale: 0.8;
}

input[type="checkbox"]:hover, input[type="radio"]:hover {
  /* Known bug with @eslint/css and @eslint/css-tree. Related to https://github.com/eslint/css/issues/246 */
  /* eslint-disable-next-line css/no-invalid-properties */
  background-color: var(--sd-button-selected-color);
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
  mask-image: url(../html/svg/square-xmark.svg);
}