@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@100;200;300;400;500;600;700;800;900&display=swap');

$typography-font-family: 'Noto Sans Thai', sans-serif !default;

$primary: var(--brand-1);
$secondary: var(--brand-2);
$accent: #9c27b0;

$dark: var(--gray-10);
$dark-page: var(--gray-11);

$positive: #00bd9d;
$negative: var(--red-8);
$info: var(--blue-6);
$warning: #ffc224;
$danger: var(--orange-7);

$disabled: var(--stone-4);
$input-border: var(--gray-2);

$separator-color: var(--border-color);
$separator-dark-color: var(--border-color);

.q-separator {
  transition: none;
}

.q-field__control {
  background: var(--surface-1);
  color: $primary;

  &:has(input:disabled) {
    background: var(--gray-1);
  }
}

.q-field--outlined .q-field__control {
  border-radius: var(--radius-2);

  &::before {
    transition: none;
    border-color: var(--border-color);
    border-radius: var(--radius-2);
  }

  &:hover::before {
    border-color: var(--border-color);
  }
}

.q-menu,
.q-card {
  box-shadow: var(--shadow-2) !important;
}

.q-dialog__backdrop {
  background-color: hsla(0 0% 60% / 0.4) !important;
}

.q-field--dense .q-field__label {
  font-family: 'Noto Sans Thai', sans-serif;
}

.q-field__inner {
  font-family: 'Noto Sans Thai', sans-serif;
}

div.fullscreen.q-drawer__backdrop {
  background-color: hsla(0 0% 60% / 0.4) !important;
}

.q-field--dense .q-field__label {
  font-family: 'Noto Sans Thai', sans-serif;
}

.q-field__inner {
  font-family: 'Noto Sans Thai', sans-serif;
}

.dp__menu.dp__menu_index.dp--menu-wrapper {
  font-family: 'Noto Sans Thai', sans-serif;
}

.dp__overlay_cell.dp__overlay_cell_pad {
  font-family: 'Noto Sans Thai', sans-serif;
}

.disabled,
.disabled *,
[disabled],
[disabled] * :not(:deep(.q-checkbox)) {
  color: hsl(var(--text-mute)) !important;
}

.bg-disabled {
  background: $disabled;
}

.text-disabled {
  color: $disabled;
}

.input-border,
.input-border *,
[input-border],
[input-border] * :not(:deep(.q-checkbox)) {
  color: hsl(var(--text-mute)) !important;
}

.bg-input-border {
  background: $input-border;
}

.text-input-border {
  color: $input-border;
}

.danger,
.danger *,
[danger],
[danger] * :not(:deep(.q-checkbox)) {
  color: (var(--danger)) !important;
}

.bg-danger {
  background: $danger;
}

.text-danger {
  color: $danger;
}

.q-field--outlined.q-field--readonly .q-field__control:before {
  border-color: transparent;
}

.q-field__native:not(textarea) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// q-tree
.q-tree__node-header.relative-position.row.no-wrap.items-center {
  padding-block: 0px;
}

.q-tree__node-header:before {
  color: hsl(var(--text-mute));
}

.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
    .clickable-node
  ):hover {
  background-color: hsla(var(--info-bg) / 0.1);
}

.q-tree__node-header.relative-position.row.no-wrap.items-center:has(
    .clickable-node.active-node
  ) {
  background-color: hsla(var(--info-bg) / 0.1);
}

.q-tree__node-header {
  padding-left: 0px !important;
}

.q-tree__node.relative-position.q-tree__node--child:not(:first-child)
  .q-tree__node-header:before {
  top: -32px !important;
}

.q-tree.q-tree--standard.text-transparent {
  color: hsl(var(--text-mute)) !important;
}

.q-field__control {
  align-items: center;
}