.switch {
  appearance: none;
  background-color: #e4e4e7;
  border-color: transparent;
  border-radius: 9999px;
  border-width: 2px;
  block-size: 1.25rem;
  inline-size: 2.25rem;
  transition: background-color 150ms;

  &:checked {
    background-color: #18181b;
  }

  &:checked::before {
    margin-inline-start: 1rem;
  }

  &::before {
    aspect-ratio: 1;
    background-color: #ffffff;
    block-size: 100%;
    border-radius: 9999px;
    content: "";
    display: block;
    transition: margin 150ms;
  }

  &:focus-visible {
    outline: 2px solid #93c5fd;
  }

  &:disabled {
    cursor: not-allowed; 
    opacity: 0.5;
  }
}

/* Nova estilização baseada no Figma */
.switch--estilizado {
  appearance: none;
  background-color: #EAEBEC;
  border: 3px solid transparent;
  border-radius: 9999px;
  block-size: 1.25rem;
  inline-size: 2.25rem;
  transition: background-color 150ms;
  cursor: pointer;

  box-shadow: 0 0 0 1px #00000033;

  &::before {
    content: "";
    display: block;
    background-color: #27292B;
    aspect-ratio: 1;
    block-size: 100%;
    border-radius: 9999px;
    transition: margin 150ms, background-color 150ms;
  }

  &:checked {
    background-color: #03AEFC;
    box-shadow: none;
  }

  &:checked::before {
    margin-inline-start: 1rem;
    background-color: #ffffff;
  }

  &:focus-visible {
    outline: 2px solid #03AEFC;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

/* ERRO: fundo vermelho */
.field_with_errors .switch--estilizado:checked {
  background-color: #DC2626;
}