.formulario {
  width: 100%;
}

// Estilos compartilhados

.formulario__datalist, // <= DESCONTINUADO
.formulario__textarea,
.formulario textarea,
.formulario__select,
.formulario select,
.formulario__input,
.formulario input[type="text"],
.formulario input[type="password"],
.formulario input[type="search"],
.formulario input[type="date"],
.formulario input[type="month"],
.formulario input[type="number"],
.formulario input[type="tel"],
.formulario input[type="time"],
.formulario input[type="url"],
.formulario input[type="file"],
.formulario input[type="week"],
.formulario input[type="email"] {
  @include borda-arredondada-padrao;
  @include transicao;
  width: 100%;
  font-family: $fonte-padrao;
  font-size: 16px;
  height: 40px;
  padding: 4px 8px;
  background-color: $cor-branca;
  border: 2px solid $cor-cinza-30;
  color: $cor-cinza-80;
  
  &:focus {
    outline: 0;
    border-color: $cor-info;
  }
  
  &:hover:not(:focus) {
    border-color: rgba($cor-info, 0.5);
  }
  
  &::placeholder {
    color: $cor-cinza-60;
  }
}

// Elemento: Label e Legend

%estilos-do-label {
  @include fonte-seminegrito;
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  color: $cor-cinza-80;
}

legend.formulario__label, // <= DESCONTINUADO
.formulario__label,
.formulario label,
.formulario__legend,
.formulario legend {
  @extend %estilos-do-label;
}

// Input: File

@mixin botao-input-file {
  @include transicao;
  @include borda-arredondada-padrao;
  @include fonte-negrito();
  background: $cor-info;
  height: 40px;
  border: 0;
  margin-right: 16px;
  padding: 0 16px;
  color: $cor-branca;
}

@mixin botao-input-file-hover {
  background: darken($cor-info, 10%);
  outline: 0;
}

.formulario__input[type="file"],
.formulario input[type="file"] {
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  
  &::-webkit-file-upload-button {
    @include botao-input-file;
  }
  
  &::-ms-browse {
    @include botao-input-file;
  }

  &:hover,
  &:focus {
    &::-webkit-file-upload-button {
      @include botao-input-file-hover;
    }
    &::-ms-browse {
      @include botao-input-file-hover;
    }
  }
}

// Input: Number

.formulario__input[type="number"],
.formulario input[type="number"] {
  -moz-appearance: textfield;
}

// Input: Month, Week, Date

.formulario__input[type="month"],
.formulario__input[type="week"],
.formulario__input[type="date"],
.formulario input[type="month"],
.formulario input[type="week"],
.formulario input[type="date"] {
  &::-webkit-inner-spin-button {
    display: none;
  }
}

// Inputs: Checkbox e Radio

%estilos-do-checkbox-e-radio {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-print-color-adjust: exact;
  appearance: none;
  box-shadow: none;
  display: inline-block;
  height: 20px;
  width: 20px;
  vertical-align: middle;
  color: $cor-info;
  border: 2px solid $cor-cinza-40;
  border-radius: 5px;
  background-color: $cor-cinza-05;
  background-origin: border-box;
  user-select: none;
  print-color-adjust: exact;
  flex-shrink: 0;
  margin: 0 8px 0 0;
  padding: 0;
  cursor: pointer; 

  &:hover:not(:checked) {
    border: 2px solid $cor-info;
    background: $cor-cinza-10;
  }

  &:focus {
    border: 2px solid $cor-info;
    outline: none;
  }

  &:checked {
    background-color: currentColor;
    border: 2px solid currentColor;
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><path d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/></svg>");
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

%estilos-do-radio {
  border-radius: 100%;

  &:checked {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='3'/></svg>");
  }
}

%label-radio-checkbox {
  @include fonte-regular;
  margin-bottom: 0;
  cursor: pointer;
}

.formulario__checkbox-container,
.formulario__radio-container,
label.formulario__checkbox-container,
label.formulario__radio-container {
  @extend %estilos-do-label;
  @include fonte-regular;
  display: flex;
  align-items: center;
  width: fit-content;
  cursor: pointer;

  label {
    @extend %label-radio-checkbox;
  }

  input[type="checkbox"],
  input[type="radio"] {
    @extend %estilos-do-checkbox-e-radio;
  }

  input[type="radio"] {
    @extend %estilos-do-radio;
  }
}

.formulario__checkbox-marcador,
.formulario__radio-marcador {
  @extend %estilos-do-checkbox-e-radio;
  
  & ~ .formulario__label {
    @extend %label-radio-checkbox;
    cursor: pointer;
  }
}

.formulario__radio-marcador {
  @extend %estilos-do-radio;
}

.formulario__container-de-inputs {
  @include borda-arredondada-padrao;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  padding: 16px;
  border: 2px solid $cor-cinza-10;
  background-color: $cor-cinza-05;

  & > * {
    margin: 8px;
  }

  @include quebra-maior-que-telefone {
    height: 40px;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
  }

  .u-exibir-em-linha-flexivel {
    label {
      margin-bottom: 0;
    }
  }
}

// Input: Checkbox e Radio (DESCONTINUADO)

.formulario__input-checkbox,
.formulario__input-radio {
  display: flex !important;
  align-items: center;
  position: relative;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: 500 !important;

  input {
    position: absolute;
    top: 0;
    opacity: 0;
    cursor: pointer;
    width: 0px;
    height: 0px;
  }

  .formulario__marcador {
    position: absolute;
    top: 0;
    left: 0;
    background-color: $cor-cinza-05;
    border: 2px solid $cor-cinza-30;

    &:focus {
      border: 2px solid $cor-info;
    }

    &:after {
      content: "";
      position: absolute;
      display: none;
      height: 8px;
      box-sizing: content-box;
    }
  }

  input:focus ~ .formulario__marcador {
    border: 2px solid $cor-info;
  }

  &:hover input ~ .formulario__marcador {
    background-color: $cor-cinza-20;
  }

  input:checked ~ .formulario__marcador {
    background-color: $cor-cinza-20;
  }

  input:checked ~ .formulario__marcador:after {
    display: block;
  }
}

.formulario__input-checkbox,
.formulario .formulario__input-checkbox {
  margin-right: 10px;
  padding-left: 26px !important;

  .formulario__marcador {
    border-radius: 5px;
    height: 20px;
    width: 20px;
    top: 1px;
    &:after {
      top: 1px;
      left: 5px;
      width: 4px;
      border: solid $cor-info;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }
  }
}

.formulario__input-radio {
  width: auto;
  padding-left: 24px !important;
  margin-right: 12px;

  .formulario__marcador {
    border-radius: 50%;
    height: 18px;
    width: 18px;
    margin-top: 2px;
    &:after {
      top: 3px;
      left: 3px;
      width: 8px;
      background: $cor-info;
      border-radius: 50%;
    }
  }
}

// Elemento: Textarea

textarea.formulario__input, // <= DESCONTINUADO
.formulario textarea,
.formulario__textarea {
  padding: 8px;
  height: auto;
}

// Elemento: Select e Datalist

select.formulario__input, // <= DESCONTINUADO
.formulario__datalist, // <= DESCONTINUADO
.formulario select,
.formulario__select,
.formulario input[list],
.formulario__input[list] {
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIxIiBoZWlnaHQ9IjE5MSIgdmlld0JveD0iMCAwIDMyMSAxOTEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xNTEuNTI1IDE4Ny4xMjVMMy41MjUgNDAuMzI1Qy0xLjE3NSAzNS42MjUgLTEuMTc1IDI4LjAyNSAzLjUyNSAyMy4zMjVMMjMuMzI1IDMuNTI1QzI4LjAyNSAtMS4xNzUgMzUuNjI1IC0xLjE3NSA0MC4zMjUgMy41MjVMMTYwLjAyNSAxMjIuMDI1TDI3OS43MjUgMy41MjVDMjg0LjQyNSAtMS4xNzUgMjkyLjAyNSAtMS4xNzUgMjk2LjcyNSAzLjUyNUwzMTYuNTI1IDIzLjMyNUMzMjEuMjI1IDI4LjAyNSAzMjEuMjI1IDM1LjYyNSAzMTYuNTI1IDQwLjMyNUwxNjguNTI1IDE4Ny4xMjVDMTYzLjgyNSAxOTEuODI1IDE1Ni4yMjUgMTkxLjgyNSAxNTEuNTI1IDE4Ny4xMjVaIiBmaWxsPSIjNjE2MTYxIi8+Cjwvc3ZnPgo=") $cor-branca no-repeat;
  background-position: right 13px bottom 50%;
  background-size: 14px;
  padding-right: 40px;
}

.formulario__datalist, // <= DESCONTINUADO
.formulario input[list],
.formulario__input[list] {
  &::-webkit-calendar-picker-indicator {
    display: none;
  }
}

// Elemento: Fieldset

.formulario__grupo-de-inputs, // <= DESCONTINUADO 
.formulario__fieldset,
.formulario fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

// Elementos desabilitados

%elementos-do-formulario-desabilitados {
  cursor: not-allowed;
  border-color: $cor-cinza-30 !important;
  background-color: $cor-cinza-20 !important;
}

%estilos-radio-marcador-desabilitado {
  @extend %elementos-do-formulario-desabilitados;
  
  &:checked {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' style='fill: %23666' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='3'/></svg>");
  }
}

%estilos-checkbox-marcador-desabilitado {
  @extend %elementos-do-formulario-desabilitados;

  &:checked {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23666' xmlns='http://www.w3.org/2000/svg'><path d='M5.707 7.293a1 1 0 0 0-1.414 1.414l2 2a1 1 0 0 0 1.414 0l4-4a1 1 0 0 0-1.414-1.414L7 8.586 5.707 7.293z'/></svg>");
  }
}

@mixin estilos-radio-checkbox-desabilitado($tipo-do-input) {
  cursor: not-allowed;

  input[type="#{$tipo-do-input}"]:disabled {
    @extend %estilos-#{$tipo-do-input}-marcador-desabilitado;
  }

  label {
    cursor: not-allowed;
  }
}

@mixin estilos-radio-checkbox-marcador-desabilitado($tipo-do-input) {
  @extend %estilos-#{$tipo-do-input}-marcador-desabilitado;

  & + label {
    cursor: not-allowed;
  }
}

.formulario__input_desabilitado, // <= DESCONTINUADO
.formulario__datalist:disabled, // <= DESCONTINUADO
.formulario__textarea:disabled,
.formulario textarea:disabled,
.formulario__select:disabled,
.formulario select:disabled,
.formulario__input:disabled,
.formulario input:disabled {
  @extend %elementos-do-formulario-desabilitados;
}

.formulario__radio-container_desabilitado {
  @include estilos-radio-checkbox-desabilitado('radio');
}

.formulario__radio-marcador:disabled {
  @include estilos-radio-checkbox-marcador-desabilitado('radio');
}

.formulario__checkbox-container_desabilitado {
  @include estilos-radio-checkbox-desabilitado('checkbox');
}

.formulario__checkbox-marcador:disabled {
  @include estilos-radio-checkbox-marcador-desabilitado('checkbox');
}

// Modificadores para inputs checkbox e radio em linha

.formulario__input-radio_em-linha, // <= DESCONTINUADO
.formulario__input-checkbox_em-linha, // <= DESCONTINUADO
.formulario__radio-container_em-linha,
.formulario__checkbox-container_em-linha {
  display: inline-flex !important;
  width: auto;
  margin-right: 16px;
}

// Modificadores para inputs checkbox e radio desabilitados

.formulario__input-checkbox_desabilitado,
.formulario__input-radio_desabilitado {
  color: $cor-cinza-50;
  & input ~ .formulario__marcador {
    background-color: $cor-cinza-20;
  }

  &:hover input ~ .formulario__marcador {
    background-color: $cor-cinza-20;
  }
}

// Mensagens de formulário

$cores-input: (erro, $cor-erro), (sucesso, $cor-sucesso), (atencao, $cor-atencao);

@each $nome, $cor in $cores-input {
  .formulario__input_#{$nome} {
    border-color: rgba($cor, 0.5) !important;
    &:focus {
      border-color: rgba($cor, 1) !important;
    }
  }

  .formulario__mensagem {
    display: none;
    margin: 0;
    padding: 0;
    position: relative;
    bottom: 4px;
    font-size: 15px;
    margin-top: 8px;
  }
  
  .formulario__mensagem_#{$nome} {
    display: flex !important;
    color: $cor;
  }

  .formulario__mensagem-icone {
    margin: 4px 8px 0 0;
  }
}

// Identificador de campo obrigatório

.formulario__obrigatorio {
  color: $cor-erro;
  font-size: 8px;
  vertical-align: middle;
  margin-left: 2px;
}

// Estilos de campos com autofill
// Quando o navegador autocompleta uma informação
// os campos terão a aparência declarada abaixo

.formulario {
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus input:-webkit-autofill,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-text-fill-color: $cor-preta;
    -webkit-box-shadow: 0 0 0px 1000px $cor-branca inset;
    box-shadow: 0 0 0px 1000px $cor-branca inset;
  }
}

// Inputs com ícone

%formulario-input-com-icone {
  position: relative;

  .formulario__icone-do-input {
    @include transicao;
    pointer-events: none;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: calc(100% - 4px);
    margin: 2px;
    font-size: 16px;
    color: var(--cor-secundaria);
  }
}

.formulario__input-com-icone-para-esquerda {
  @extend %formulario-input-com-icone;
  input, select {
    padding-left: 40px !important;
  }
  .formulario__icone-do-input {
    left: 0;
  }
}

.formulario__input-com-icone-para-direita {
  @extend %formulario-input-com-icone;
  input {
    padding-right: 40px !important;
  }
  .formulario__icone-do-input {
    right: 0;
  }
}