@mixin dt-dark {
  .dt {
    & .header {
      & .title {
        color: darken($md-dark-text-primary, 30%) !important;
      }
      background-color: transparent !important;
      & .filter {
        @include interaction-dark-surface;
      }
      & .more {
        @include interaction-dark-surface;
      }
      & .searchDiv {
        & .searchInput {
          &::placeholder {
            color: $md-dark-text-primary;
            opacity: 0.75 !important;
          }
        }
        & .icon {
          & svg {
            fill: $md-dark-text-primary;
            opacity: 0.75 !important;
          }
        }
      }
    }

    & .filterCont {
      & .row {
        background-color: $md-dark-surface;
        @include interaction-dark-surface;
        & .c50 {
          & .textfield {
            background-color: $md-dark-surface;
            @include interaction-dark-surface;
            & .elem {
              background-color: $md-dark-surface;
              @include interaction-dark-surface;
              &::placeholder {
                color: $md-dark-text-primary;
              }
            }
            & .trailing {
              & svg {
                fill: $md-dark-text-primary;
              }
            }
          }
        }
      }
    }

    & table {
      background-color: $md-dark-background;
      & thead {
        & tr {
          opacity: 1 !important;
          background-color: $md-dark-background;
          & th {
            opacity: 1 !important;
            background-color: $md-dark-background;
            color: $md-dark-text-primary;
            @include interaction-dark-surface;
            & label {
              opacity: 0.75 !important;
              color: $md-dark-text-primary;
            }
            & span {
              opacity: 0.5 !important;
              color: $md-dark-text-primary;
            }
            &::before {
              filter: invert(1);
            }
          }
        }
      }
      & tbody {
        & tr {
          background-color: $md-dark-surface;
          & td {
            @include interaction-dark-surface;
            & .checkAll:checked {
              background-color: $md-dark-surface;
              border-color: $md-dark-text-primary;
            }
            & label {
              color: $md-dark-text-primary;
            }
            & span {
              color: $md-dark-text-primary;
              opacity: 0.5 !important;
            }
          }
        }

        & .highlightTr {
          background-color: $md-dark-secondary !important;
          & td {
            @include interaction-dark-secondary;
            & .checkAll:checked {
              background-color: $md-dark-secondary !important;
            }
          }
        }
      }
    }

    & .footer {
      @include interaction-dark-surface;
      & label {
        color: $md-dark-text-primary;
        @include interaction-dark-primary-text;
      }
    }

    & > table {
      & tr {
        opacity: 1 !important;
      }
    }
  }
}