@mixin textfield-dark {
  // code
  .page {
    & .row {
      & .c100 {
        background-color: $md-dark-surface;
        & .textfield {
          & .chip-cont {
            & .chip {
              background-color: $md-dark-surface;
              & label {
                color: $md-dark-text-primary;
              }
              & span {
                color: $md-dark-text-primary !important;
              }
            }
          }
          & .indicador {
            background-color: $md-dark-text-primary;
          }
        }
        & .card {
          background-color: $md-dark-surface;
          & .row {
            & .c25 {
              & .textfield {
                & .elem {
                  background-color: $md-dark-surface;
                  color: $md-dark-text-primary !important;
                  caret-color: $md-dark-text-primary;
                  &::-webkit-calendar-picker-indicator {
                    filter: invert(1);
                    opacity: 1;
                  }
                }
                &::after {
                  filter: invert(1);
                }
                & .chip-cont {
                  & .chip {
                    & span {
                      filter: invert(1);
                    }
                  }
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
      }
      & .c50 {
        & .card {
          & .row {
            & .c100 {
              background-color: $md-dark-surface;
              & .textfield {
                & .elem {
                  background-color: $md-dark-surface;
                  caret-color: $md-dark-text-primary;
                  color: $md-dark-text-primary !important;
                }
                & .label {
                  color: darken($md-dark-text-primary, 50%) !important;;
                }
                & .chip-cont {
                  & .chip {
                    & span {
                      filter: invert(1);
                    }
                  }
                }
                &::after {
                  filter: invert(1);
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
              & .quick-form {
                background-color: $md-dark-primary !important;
                @include interaction-dark-primary;
              }
            }
            &::after {
              filter: invert(1);
            }
            & .c50 {
              & .textfield {
                & input[type="time"]::-webkit-calendar-picker-indicator {
                  filter: invert(1);
                  cursor: pointer;
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
                & .indicador,
                .label {
                  color: darken($md-dark-text-primary, 50%) !important;
                }
                & .elem {
                  background-color: $md-dark-surface;
                  color: $md-dark-text-primary;
                  @include interaction-dark-surface;
                }
                &::after {
                  filter: invert(1);
                }
                & .chip-cont {
                  & .chip {
                    background-color: $md-dark-surface;
                    & label {
                      color: darken($md-dark-text-primary, 50%) !important;
                    }
                    & span {
                      filter: invert(1);
                    }
                  }
                }
              }
            }
          }
        }
        & .row {
          & .c50 {
            & .card-cont {
              & .textfield {
                background-color: $md-dark-background;
                & .elem {
                  color: $md-dark-text-primary !important;
                  caret-color: $md-dark-text-primary;
                }
                & .label {
                  color: darken($md-dark-text-primary, 50%) !important;
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
        & .card-cont {
          & .textfield {
            & .elem {
              color: $md-dark-text-primary !important;
              caret-color: $md-dark-text-primary;
            }
            & .label {
              color: darken($md-dark-text-primary, 50%) !important;
            }
            & .indicador {
              background-color: $md-dark-text-primary;
            }
          }
        }
      }
      & .row {
        & .card-cont {
          & .textfield {
            & .elem {
              color: $md-dark-text-primary !important;
              caret-color: $md-dark-text-primary;
            }
            & .label {
              color: darken($md-dark-text-primary, 50%) !important;
            }
            & .indicador {
              background-color: $md-dark-text-primary;
            }
          }
        }
      }
      & .card-cont {
        & .textfield {
          & .elem {
            color: $md-dark-text-primary !important;
          }
          & .label {
            color: darken($md-dark-text-primary, 50%) !important;
          }
        }
      }
    }
    & #sale-email {
      background-color: $md-dark-background !important;
    }
    & .card {
      background-color: $md-dark-surface !important;
      & .textfield {
        & textarea {
          background-color: $md-dark-surface;
          color: $md-dark-text-primary !important;
          caret-color: $md-dark-text-primary;
          &::placeholder {
            color: $md-dark-text-primary !important;
          }
        }
        & .label {
          color: darken($md-dark-text-primary, 50%) !important;
        }
        & .indicador {
          background-color: $md-dark-text-primary;
        }
      }
      & .row {
        & .textfield {
          & .elem {
            background-color: $md-dark-surface;
            color: $md-dark-text-primary !important;
            caret-color: $md-dark-text-primary;
            &::placeholder {
              color: $md-dark-text-primary !important;
            }
          }
          & .label {
            color: darken($md-dark-text-primary, 50%) !important;
          }
          & .trailing {
            & svg {
              fill: $md-dark-text-primary !important;
            }
          }
          & .indicador {
            background-color: $md-dark-text-primary;
          }
        }
      }
    }
    & .card-cont {
      & .multitable {
        & .cont {
          & .line {
            & .row {
              & .c25 {
                & .textfield {
                  & .elem {
                    background-color: $md-dark-surface;
                    color: $md-dark-text-primary !important;
                    caret-color: $md-dark-text-primary;
                  }
                  &::after {
                    filter: invert(1);
                  }
                  & .label {
                    color: darken($md-dark-text-primary, 50%) !important;
                  }
                  & .indicador {
                    background-color: $md-dark-text-primary;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  //Email
  .page {
    & .row {
      & .c50 {
        & .row {
          & .c50 {
            & .card {
              background-color: $md-dark-background;
            }
            & .card-cont {
              & .textfield {
                & .elem {
                  background-color: $md-dark-background;
                  caret-color: $md-dark-text-primary;
                  color: $md-dark-text-primary !important;
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
        & .card {
          & .row {
            & .c75 {
              & .textfield {
                & .elem {
                  background-color: $md-dark-surface;
                  color: $md-dark-text-primary;
                  caret-color: $md-dark-text-primary;
                }
                & .trailing {
                  & svg {
                    fill: $md-dark-text-primary;
                  }
                }
                & .label {
                  color: darken($md-dark-text-primary, 50%) !important;
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
      }
    }
  }

  // Date
  .page {
    & .row {
      & .c50 {
        & .card-transparent {
          background-color: $md-dark-background;
          & .font-card-title {
            color: darken($md-dark-text-primary, 50%) !important;
          }
        }
        & .card {
          background-color: $md-dark-surface;
          & .row {
            & .c50 {
              & .textfield {
                input[type="date"]::-webkit-calendar-picker-indicator {
                  filter: invert(1);
                  cursor: pointer;
                }
                & .trailing {
                  & svg {
                    fill: $md-dark-on-surface;
                  }
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
      }
    }
  }

  // Items
  .page {
    & .mt-8 {
      & .font-card-title {
        color: darken($md-dark-text-primary, 50%) !important;
      }
      & .multitable {
        & .cont {
          & .line {
            & .multitable-grid-purchase {
              & .multitable-flex-purchase {
                & .row {
                  & .c66 {
                    & .textfield {
                      background-color: $md-dark-surface;
                      & .elem {
                        background-color: $md-dark-surface;
                        color: $md-dark-text-primary;
                        caret-color: $md-dark-text-primary;
                      }
                      & .chip-cont {
                        & .chip {
                          background-color: $md-dark-surface !important;
                          & label {
                            color: darken($md-dark-text-primary, 50%) !important;
                          }
                          & span {
                            filter: invert(1);
                          }
                        }
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                  &::after {
                    filter: invert(1);
                  }
                  & .c33 {
                    & .textfield {
                      & .elem {
                        background-color: $md-dark-surface;
                        caret-color: $md-dark-text-primary;
                        color: $md-dark-text-primary;
                      }
                      & .chip-cont {
                        & .chip {
                          background-color: $md-dark-surface;
                          & label {
                            color: darken($md-dark-text-primary, 50%) !important;
                          }
                          & span {
                            filter: invert(1);
                          }
                        }
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                }
                & .mx-5 {
                  & .textfield {
                    & input {
                      color: $md-dark-text-primary !important;
                      background-color: $md-dark-surface;
                      caret-color: $md-dark-text-primary;
                    }
                    & input::placeholder {
                      color: $md-dark-text-primary !important;
                    }
                    &::after {
                      filter: invert(1);
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                  &::after {
                    filter: invert(1);
                  }
                }
              }
            }
            & .removeLine,
            & .btn-item-info {
              @include interaction-dark-primary;
              &::before {
                filter: invert(1) !important;
              }
            }
            & .row .c25 .textfield .chip-cont .chip {
              background: $md-dark-surface !important;
              & label {
                color: $md-dark-text-primary;
              }
              & span {
                filter: invert(1);
              }
            }
            & .row .c25 .textfield {
              &::after {
                filter: invert(1) !important;
              }
            }
          }
          & .mt-purchase-restriction {
            background-color: $md-dark-error-2 !important;
            & .multitable-grid-purchase {
              & .multitable-flex-purchase {
                & .row {
                  & .c66 {
                    & .textfield {
                      background-color: $md-dark-error-2 !important;
                      & .elem {
                        background-color: $md-dark-error-2 !important;
                        color: $md-dark-text-primary !important;
                        caret-color: $md-dark-text-primary;
                      }
                      background-color: $md-dark-error-2 !important;
                      & .chip-cont {
                        background-color: $md-dark-error-2 !important;
                        & .chip {
                          background-color: $md-dark-error-2 !important;
                          & label {
                            color: darken($md-dark-text-primary, 50%) !important;
                          }
                        }
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                  & .c33 {
                    & .textfield {
                      background-color: $md-dark-error-2 !important;
                      & .elem {
                        background-color: $md-dark-error-2 !important;
                        caret-color: $md-dark-text-primary;
                        color: $md-dark-text-primary;
                      }
                      & .chip-cont {
                        background-color: $md-dark-error-2 !important;
                        & .chip {
                          background-color: $md-dark-error-2 !important;
                          & label {
                            background-color: $md-dark-error-2 !important;
                            color: darken($md-dark-text-primary, 50%) !important;
                          }
                        }
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                }
                & .mx-5 {
                  & .textfield {
                    & input {
                      background-color: $md-dark-error-2 !important;
                      color: $md-dark-text-primary !important;
                      caret-color: $md-dark-text-primary;
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                    & input::placeholder {
                      color: $md-dark-text-primary !important;
                    }
                    &::after {
                      filter: invert(1);
                    }
                  }
                }
              }
            }
          }
        }
        & .cont-bottom {
          & .line {
            & .multitable-grid-purchase {
              & .multitable-flex-purchase {
                & .mx-title-5 {
                  & .textfield {
                    background-color: $md-dark-background;
                    & input {
                      color: $md-dark-text-primary !important;
                      background-color: $md-dark-background;
                      caret-color: $md-dark-text-primary;
                    }
                    &::after {
                      filter: invert(1);
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                }
              }
            }
            & .row {
              & .c25 {
                & .textfield {
                  & input {
                    color: $md-dark-text-primary !important;
                    background-color: $md-dark-background;
                    caret-color: $md-dark-text-primary;
                  }
                  & .indicador {
                    background-color: $md-dark-text-primary;
                  }
                  & .indicador {
                    background-color: $md-dark-text-primary;
                  }
                }
                &::after {
                  filter: invert(1);
                }
              }
              &::after {
                filter: invert(1);
              }
            }
          }
          & .row {
            &::after {
              filter: invert(1);
            }
            & .c25 {
              & .textfield {
                &::after {
                  filter: invert(1);
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
        & .btn {
          background-color: $md-dark-primary;
        }
        & .btn-container {
          & .btn-quick-form {
            border-color: $md-dark-text-primary;
            color: $md-dark-text-primary;
            @include interaction-dark-primary;
          }
        }
      }
      & .row {
        & .c75 {
          & .row {
            & .c33 {
              & .textfield {
                & input {
                  background-color: $md-dark-background;
                  color:$md-dark-text-primary !important;
                  caret-color: $md-dark-text-primary;
                }
                & .label {
                  color: darken($md-dark-text-primary, 50%) !important;
                }
                &::after {
                  filter: invert(1);
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
            & .c14 {
              & .card {
                background-color: #121212;
              }
            }
          }
        }
      }
    }
    & .pl-28 {
      & .row {
        & .c25 {
          & .font-caption {
            color: darken($md-dark-text-primary, 50%) !important;
          }
        }
      }
      & .multitable-grid-purchase {
        & .multitable-flex-purchase {
          & .mx-title-3 {
            & .font-caption {
              color: darken($md-dark-text-primary, 50%) !important;
            }
          }
          & .mx-title-7 {
            & .font-caption {
              color: darken($md-dark-text-primary, 50%) !important;
            }
          }
          & .mx-title-5 {
            & .font-caption {
              color: darken($md-dark-text-primary, 50%) !important;
            }
          }
        }
      }
    }
    & div {
      & .row {
        & .c75 {
          & .row {
            & .c25 {
              & .textfield {
                & .elem {
                  color: $md-dark-text-primary !important;
                  caret-color: $md-dark-text-primary;
                }
                & .label {
                  color: darken($md-dark-text-primary, 50%) !important;
                }
                &::after {
                  filter: invert(1);
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
      }
      & .multitable {
        & .cont {
          & .line {
            background-color: $md-dark-surface !important;
            & .row {
              & .itemname {
                & .row {
                  & .c100 {
                    & .textfield {
                      background-color: $md-dark-surface;
                      & .elem {
                        background-color: $md-dark-surface;
                        caret-color: $md-dark-text-primary;
                      }
                      & .chip-cont {
                        background-color: $md-dark-surface;
                        & .chip {
                          & span {
                            filter: invert(1);
                          }
                        }
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                }
              }
              & .itemdetail {
                & .row {
                  & .c25 {
                    & .textfield {
                      & .elem {
                        background-color: $md-dark-surface;
                        caret-color: $md-dark-text-primary;
                        &::placeholder {
                          color: $md-dark-text-primary !important;
                        }
                      }
                      &::after {
                        filter: invert(1);
                      }
                      & .indicador {
                        background-color: $md-dark-text-primary;
                      }
                    }
                  }
                }
              }
            }
            & .removeLine,
            & .btn-item-info {
              @include interaction-dark-surface;
              &::before {
                filter: invert(1) !important;
              }
            }
          }
        }
        & .cont-bottom {
          & .line {
            & .row {
              & .c16 {
                & .textfield {
                  background-color: $md-dark-surface;
                  & .elem {
                    background-color: $md-dark-surface;
                    color: $md-dark-text-primary;
                    caret-color: $md-dark-text-primary;
                  }
                  &::after {
                    filter: invert(1);
                  }
                  & .indicador {
                    background-color: $md-dark-text-primary;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  // Invoice
  .page {
    & .fullcont {
      & .page {
        & .font-card-title {
          color: darken($md-dark-text-primary, 50%) !important;
        }
        & .multitable {
          & .cont {
            & .line {
              & .row {
                & .c14 {
                  & .textfield {
                    & .elem {
                      color: $md-dark-text-primary;
                      caret-color: $md-dark-text-primary;
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                }
              }
            }
          }
        }

        & .row {
          & .c50 {
            & .card {
              & .row {
                & .c50 {
                  & .textfield {
                    & .elem {
                      color: $md-dark-text-primary;
                      caret-color: $md-dark-text-primary;
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    & .multitable {
      & .cont {
        & .line {
          & .row {
            & .c50 {
              & .row {
                & .c33 {
                  & .textfield {
                    & .elem {
                      background-color: $md-dark-surface;
                      color: $md-dark-text-primary !important;
                      caret-color: $md-dark-text-primary;
                      &::placeholder {
                        color: $md-dark-text-primary !important;
                      }
                    }
                    &::after {
                      filter: invert(1);
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                }
                & .c75 {
                  & .textfield {
                    background-color: $md-dark-surface;
                    & .elem {
                      background-color: $md-dark-surface;
                      color: $md-dark-text-primary !important;
                      &::placeholder {
                        color: $md-dark-text-primary !important;
                      }
                    }
                    & .chip-cont {
                      & .chip {
                        background-color: $md-dark-surface;
                        & label {
                          color: darken($md-dark-text-primary, 50%) !important;
                        }
                        & span {
                          filter: invert(1);
                        }
                      }
                    }
                    &::after {
                      filter: invert(1);
                    }
                  }
                  &::after {
                    filter: invert(1);
                  }
                }
                & .c14 {
                  & .textfield {
                    &::after {
                      filter: invert(1);
                    }
                    & .indicador {
                      background-color: $md-dark-text-primary;
                    }
                  }
                }
              }
            }
            & .c14 {
              & .textfield {
                & .elem {
                  color: $md-dark-text-primary !important;
                  background-color: $md-dark-surface;
                  caret-color: $md-dark-text-primary;
                  &::placeholder {
                    color: $md-dark-text-primary !important;
                  }
                }
                &::after {
                  filter: invert(1);
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
            & .c33 {
              & .textfield {
                background-color: $md-dark-surface;
                & .elem {
                  color: $md-dark-text-primary !important;
                  background-color: $md-dark-surface;
                  caret-color: $md-dark-text-primary;
                  &::placeholder {
                    color: $md-dark-text-primary !important;
                  }
                }
                & .chip-cont {
                  background: $md-dark-surface !important;
                  & .chip {
                    background: $md-dark-surface !important;
                    & label {
                      background-color: $md-dark-surface !important;
                      color: darken($md-dark-text-primary, 50%) !important;
                    }
                    & span {
                      filter: invert(1);
                    }
                  }
                }
                & .indicador {
                  background-color: $md-dark-text-primary;
                }
              }
            }
          }
        }
      }
    }
  }

  // info
  .page {
    & .card {
      & .row {
        & .c100 {
          & .textfield {
            background-color: $md-dark-surface;
            & .elem {
              background-color: $md-dark-surface;
              color: $md-dark-text-primary !important;
              caret-color: $md-dark-text-primary;
            }
            & .label {
              color: darken($md-dark-text-primary, 50%) !important;
            }
            & .trailing {
              & svg {
                fill: $md-dark-text-primary !important;
              }
            }
            & .indicador {
              background-color: $md-dark-text-primary;
            }
          }
        }
      }
    }
    & .row {
      & .c100 {
        & .card {
          & .textfield {
            & .elem {
              color: $md-dark-text-primary !important;
              background-color: $md-dark-surface;
              caret-color: $md-dark-text-primary;
            }
            & .trailing {
              & svg {
                fill: $md-dark-text-primary !important;
              }
            }
            & .label {
              color: darken($md-dark-text-primary, 50%) !important;
            }
            & .indicador {
              background-color: $md-dark-text-primary;
            }
          }
        }
      }
    }
  }

  // change
  .page {
    & .change {
      background-color: transparent;
      & title {
        color: darken($md-dark-text-primary, 50%) !important;
      }
      & time {
        color: darken($md-dark-text-primary, 50%) !important;
      }

      & entry {
        background-color: $md-dark-surface;
        & .row {
          & .c33 {
            color: darken($md-dark-text-primary, 50%) !important;
          }
        }
      }

      & cont {
        & cont {
          & user {
            & title {
              color: darken($md-dark-text-primary, 50%) !important;
            }
            & time {
              color: darken($md-dark-text-primary, 50%) !important;
            }
          }
          & entry {
            & .row {
              & .c33 {
                color: $md-dark-text-primary;
              }
              & .c16 {
                color: $md-dark-text-primary;
              }
              &::after {
                filter: invert(1);
              }
            }
          }
          & cont {
            & cont {
              & user {
                & title,
                time {
                  color: $md-dark-text-primary;
                }
              }
              & entry {
                & .row {
                  & .c33 {
                    color: $md-dark-text-primary;
                  }
                  &::after {
                    filter: invert(1);
                  }
                  & .c16 {
                    color: $md-dark-text-primary;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  //file
  .page {
    & .header {
      background-color: $md-dark-surface !important;
      & .icon {
        @include interaction-dark-surface;
        & svg {
          fill: $md-dark-text-primary !important;
        }
        & label {
          color: $md-dark-text-primary;
        }
      }
      & .path {
        & label {
          @include interaction-dark-surface;
          color: $md-dark-text-primary;
          &::before {
            filter: invert(1);
          }
        }
      }
    }
    & .file {
      & .body {
        background-color: $md-dark-surface !important;
        & .cont-empty {
          & svg {
            fill: $md-dark-text-primary !important;
          }
          & label {
            color: darken($md-dark-text-primary, 50%) !important;
          }
          background-color: $md-dark-surface !important;
          border: 1px dotted $md-dark-text-primary !important;
          @include interaction-dark-surface;
          & .infoContainer {
            & .textContainer {
              & .labelContainer {
                color: darken($md-dark-text-primary, 50%) !important;
              }
              & span {
                color: darken($md-dark-text-primary, 50%) !important;
              }
            }
          }
        }
        & .cont {
          background-color: $md-dark-divider !important;
          & .des {
            background-color: $md-dark-divider !important;
            & .fileFolderLabel {
              color: $md-dark-text-primary;
            }
          }
          & .check {
            border: 2px solid $md-dark-primary !important;
            @include interaction-dark-primary;
            & svg {
              fill: $md-dark-primary;
            }
          }
        }
      }
    }
  }

  //avatar {
  .page {
    & .avatar {
      &::after {
        background-color: $md-dark-primary !important;
        @include interaction-dark-surface;
      }
    }
  }

  //link

  // Autocomplete Selector
  .autocompleteSelector-show {
    background-color: $md-dark-surface !important;
    & label {
      color: darken($md-dark-text-primary, 50%) !important;
      @include interaction-dark-surface;
    }
  }

  .textfield {
    & > .elem {
      & + .indicador {
        background-color: $md-dark-text-primary !important;
      }
    }
  }
}