@charset "UTF-8";
/********
 * GRID *
 ********/
/**
 * Imprime as configurações das colunas baseadas num grid Flexbox
 * @param $container_selector<string> Seletor css do container
 * @param $item_selector<string> Seletor css do item
 * @param $breakpoint<string> Breakpoint a ser contruido
 * @param $cols<string> Quantidade de colunas do breakpoint
 */
/**
 * Gera uma lista de atributoes e suas propriedades
 * @param $attr <string> Nome do attributo
 * @param $items <{key: value}[]> Lista de atributos que devem ser gerados
 * @param $sufix <string> Sufixo do seletor de attributo
 * @example
 * @include generate-attribute('theme', ('example': ('padding': '10px')), '&')
 *
 * &[theme='example'] { padding: 10px; }
 */
dwui-input-text,
dwui-select,
dwui-list-checkbox,
dwui-input-file,
dwui-input-field,
dwui-input-textarea,
dwui-select-search,
dwui-input-file-base {
  align-items: start;
  display: flex;
  flex-direction: column;
  justify-content: start;
}
dwui-input-text > label,
dwui-select > label,
dwui-list-checkbox > label,
dwui-input-file > label,
dwui-input-field > label,
dwui-input-textarea > label,
dwui-select-search > label,
dwui-input-file-base > label {
  color: var(--form-label-color);
  z-index: 2;
}
dwui-input-text > label sup,
dwui-select > label sup,
dwui-list-checkbox > label sup,
dwui-input-file > label sup,
dwui-input-field > label sup,
dwui-input-textarea > label sup,
dwui-select-search > label sup,
dwui-input-file-base > label sup {
  color: var(--form-label-required-color, var(--color-danger));
}
dwui-input-text p,
dwui-select p,
dwui-list-checkbox p,
dwui-input-file p,
dwui-input-field p,
dwui-input-textarea p,
dwui-select-search p,
dwui-input-file-base p {
  color: var(--input-message-color, var(--color-neutral-30));
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 0.875rem;
  line-height: 1.2;
}
dwui-input-text .input,
dwui-select .input,
dwui-list-checkbox .input,
dwui-input-file .input,
dwui-input-field .input,
dwui-input-textarea .input,
dwui-select-search .input,
dwui-input-file-base .input {
  position: relative;
  width: 100%;
}
dwui-input-text .input .text,
dwui-input-text .input .select,
dwui-select .input .text,
dwui-select .input .select,
dwui-list-checkbox .input .text,
dwui-list-checkbox .input .select,
dwui-input-file .input .text,
dwui-input-file .input .select,
dwui-input-field .input .text,
dwui-input-field .input .select,
dwui-input-textarea .input .text,
dwui-input-textarea .input .select,
dwui-select-search .input .text,
dwui-select-search .input .select,
dwui-input-file-base .input .text,
dwui-input-file-base .input .select {
  appearance: none;
  border: none;
  box-shadow: 0 -1px 0 var(--form-input-outline-color, var(--color-neutral-70)) inset;
  height: 40px;
  outline: none;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-neutral-10);
  /* // DESCOMENTE PARA ATIVAR ACESSIBILIDADE
  &:focus-within {
    outline: var(--form-input-outline-color, var(--color-warning)) dashed 1px;
  }
  */
}
dwui-input-text .input .text:not([type=checkbox]), dwui-input-text .input .text:not([type=radio]),
dwui-input-text .input .select:not([type=checkbox]),
dwui-input-text .input .select:not([type=radio]),
dwui-select .input .text:not([type=checkbox]),
dwui-select .input .text:not([type=radio]),
dwui-select .input .select:not([type=checkbox]),
dwui-select .input .select:not([type=radio]),
dwui-list-checkbox .input .text:not([type=checkbox]),
dwui-list-checkbox .input .text:not([type=radio]),
dwui-list-checkbox .input .select:not([type=checkbox]),
dwui-list-checkbox .input .select:not([type=radio]),
dwui-input-file .input .text:not([type=checkbox]),
dwui-input-file .input .text:not([type=radio]),
dwui-input-file .input .select:not([type=checkbox]),
dwui-input-file .input .select:not([type=radio]),
dwui-input-field .input .text:not([type=checkbox]),
dwui-input-field .input .text:not([type=radio]),
dwui-input-field .input .select:not([type=checkbox]),
dwui-input-field .input .select:not([type=radio]),
dwui-input-textarea .input .text:not([type=checkbox]),
dwui-input-textarea .input .text:not([type=radio]),
dwui-input-textarea .input .select:not([type=checkbox]),
dwui-input-textarea .input .select:not([type=radio]),
dwui-select-search .input .text:not([type=checkbox]),
dwui-select-search .input .text:not([type=radio]),
dwui-select-search .input .select:not([type=checkbox]),
dwui-select-search .input .select:not([type=radio]),
dwui-input-file-base .input .text:not([type=checkbox]),
dwui-input-file-base .input .text:not([type=radio]),
dwui-input-file-base .input .select:not([type=checkbox]),
dwui-input-file-base .input .select:not([type=radio]) {
  width: 100%;
}
dwui-input-text .input .field,
dwui-select .input .field,
dwui-list-checkbox .input .field,
dwui-input-file .input .field,
dwui-input-field .input .field,
dwui-input-textarea .input .field,
dwui-select-search .input .field,
dwui-input-file-base .input .field {
  appearance: none;
  border: none;
  padding: 8px 8px 8px 40px;
  border: 1px solid var(--form-input-outline-color, var(--color-neutral-20));
  width: 100%;
  height: 40px;
  outline: none;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-neutral-10);
  border-radius: 8px;
  /* // DESCOMENTE PARA ATIVAR ACESSIBILIDADE
  &:focus-within {
    outline: var(--form-input-outline-color, var(--color-warning)) dashed 1px;
  }
  */
}
dwui-input-text .input .field:focus,
dwui-select .input .field:focus,
dwui-list-checkbox .input .field:focus,
dwui-input-file .input .field:focus,
dwui-input-field .input .field:focus,
dwui-input-textarea .input .field:focus,
dwui-select-search .input .field:focus,
dwui-input-file-base .input .field:focus {
  border-color: var(--form-input-outline-focus-color, var(--color-neutral-10));
}
dwui-input-text .input:has(.text)::after,
dwui-select .input:has(.text)::after,
dwui-list-checkbox .input:has(.text)::after,
dwui-input-file .input:has(.text)::after,
dwui-input-field .input:has(.text)::after,
dwui-input-textarea .input:has(.text)::after,
dwui-select-search .input:has(.text)::after,
dwui-input-file-base .input:has(.text)::after {
  background-color: var(--form-input-bar, var(--color-brand-primary));
  bottom: 0px;
  content: "";
  height: 2px;
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0);
  transition: 0.4s ease-in-out;
}
dwui-input-text .input:has(.field) dwui-icon,
dwui-select .input:has(.field) dwui-icon,
dwui-list-checkbox .input:has(.field) dwui-icon,
dwui-input-file .input:has(.field) dwui-icon,
dwui-input-field .input:has(.field) dwui-icon,
dwui-input-textarea .input:has(.field) dwui-icon,
dwui-select-search .input:has(.field) dwui-icon,
dwui-input-file-base .input:has(.field) dwui-icon {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 1.5rem;
}
dwui-input-text:not(.filled):not(.active) .input:after,
dwui-select:not(.filled):not(.active) .input:after,
dwui-list-checkbox:not(.filled):not(.active) .input:after,
dwui-input-file:not(.filled):not(.active) .input:after,
dwui-input-field:not(.filled):not(.active) .input:after,
dwui-input-textarea:not(.filled):not(.active) .input:after,
dwui-select-search:not(.filled):not(.active) .input:after,
dwui-input-file-base:not(.filled):not(.active) .input:after {
  width: 0;
}
dwui-input-text.dirty:has(:invalid), dwui-input-text.dirty.invalid,
dwui-select.dirty:has(:invalid),
dwui-select.dirty.invalid,
dwui-list-checkbox.dirty:has(:invalid),
dwui-list-checkbox.dirty.invalid,
dwui-input-file.dirty:has(:invalid),
dwui-input-file.dirty.invalid,
dwui-input-field.dirty:has(:invalid),
dwui-input-field.dirty.invalid,
dwui-input-textarea.dirty:has(:invalid),
dwui-input-textarea.dirty.invalid,
dwui-select-search.dirty:has(:invalid),
dwui-select-search.dirty.invalid,
dwui-input-file-base.dirty:has(:invalid),
dwui-input-file-base.dirty.invalid {
  --form-label-color: var(--color-danger);
  --form-input-bar: var(--color-danger);
  --form-input-outline-color: var(--color-danger);
  --input-message-color: var(--color-danger);
}
dwui-input-text.filled .input:after, dwui-input-text.active .input:after,
dwui-select.filled .input:after,
dwui-select.active .input:after,
dwui-list-checkbox.filled .input:after,
dwui-list-checkbox.active .input:after,
dwui-input-file.filled .input:after,
dwui-input-file.active .input:after,
dwui-input-field.filled .input:after,
dwui-input-field.active .input:after,
dwui-input-textarea.filled .input:after,
dwui-input-textarea.active .input:after,
dwui-select-search.filled .input:after,
dwui-select-search.active .input:after,
dwui-input-file-base.filled .input:after,
dwui-input-file-base.active .input:after {
  width: 100%;
}
dwui-input-text[disabled=true], dwui-input-text:has(input[readonly]),
dwui-select[disabled=true],
dwui-select:has(input[readonly]),
dwui-list-checkbox[disabled=true],
dwui-list-checkbox:has(input[readonly]),
dwui-input-file[disabled=true],
dwui-input-file:has(input[readonly]),
dwui-input-field[disabled=true],
dwui-input-field:has(input[readonly]),
dwui-input-textarea[disabled=true],
dwui-input-textarea:has(input[readonly]),
dwui-select-search[disabled=true],
dwui-select-search:has(input[readonly]),
dwui-input-file-base[disabled=true],
dwui-input-file-base:has(input[readonly]) {
  --form-input-bar: var(--color-neutral-80);
  --form-label-color: var(--color-neutral-60);
  --form-label-required-color: var(--color-neutral-60);
}
dwui-input-text[disabled=true] .input .text, dwui-input-text:has(input[readonly]) .input .text,
dwui-select[disabled=true] .input .text,
dwui-select:has(input[readonly]) .input .text,
dwui-list-checkbox[disabled=true] .input .text,
dwui-list-checkbox:has(input[readonly]) .input .text,
dwui-input-file[disabled=true] .input .text,
dwui-input-file:has(input[readonly]) .input .text,
dwui-input-field[disabled=true] .input .text,
dwui-input-field:has(input[readonly]) .input .text,
dwui-input-textarea[disabled=true] .input .text,
dwui-input-textarea:has(input[readonly]) .input .text,
dwui-select-search[disabled=true] .input .text,
dwui-select-search:has(input[readonly]) .input .text,
dwui-input-file-base[disabled=true] .input .text,
dwui-input-file-base:has(input[readonly]) .input .text {
  color: var(--color-neutral-60);
  background-color: transparent;
}

dwui-input-file,
dwui-input-file-base {
  display: flex;
  flex-direction: column;
}
dwui-input-file input,
dwui-input-file-base input {
  display: none;
}
dwui-input-file .input,
dwui-input-file-base .input {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
dwui-input-file .label-wrapper,
dwui-input-file-base .label-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}
dwui-input-file .label-wrapper dwui-icon,
dwui-input-file-base .label-wrapper dwui-icon {
  font-size: 1.5rem;
}
dwui-input-file .file-label,
dwui-input-file-base .file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 16px;
  appearance: none;
  background-color: var(--color-neutral-100);
  border-radius: 8px;
  border: 1px solid var(--form-label-color, var(--color-neutral-20));
  box-shadow: var(--elevation-md);
  color: var(--color-neutral-10);
  font-size: 1rem;
  cursor: pointer;
}
dwui-input-file .file-label:hover,
dwui-input-file-base .file-label:hover {
  background-color: var(--color-neutral-80);
}
dwui-input-file .file-label:active,
dwui-input-file-base .file-label:active {
  box-shadow: none;
  background-color: var(--color-neutral-100);
}
dwui-input-file .file-label dwui-icon,
dwui-input-file-base .file-label dwui-icon {
  font-size: 1.5rem;
}
dwui-input-file:has(input:disabled) .file-label,
dwui-input-file-base:has(input:disabled) .file-label {
  background-color: var(--color-neutral-90);
  border-color: var(--color-neutral-60);
  color: var(--color-neutral-60);
  box-shadow: none;
  cursor: default;
}