@mixin tld-translate-accent-colors($accent) {
  $accent: var(--accent);

  .tld-translate {
    /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
    button[color="accent"]:not(.mat-button-disabled) svg,
    mat-icon[color="accent"] svg {
      fill: $accent;
    }
  }

  .accent-outline {
    border: 1px solid $accent  !important;
  }

  .accent-color {
    color: $accent  !important;
  }

  .accent-bg-color {
    background-color: $accent  !important;
  }

  // language-title styles should be outside of .tld-translate because language menu gets added to body and otherwise styles would not be applied.
  .language-title:not(.no-highlight),
  .tld-list-title {
    &:hover:not([disabled]) {
      color: $accent;
    }
  }

  .tld-language-list-element.active {
    .language-title {
      color: $accent;
    }
  }

  .tld-lang-list:not(.single-element-list) {
    .active {
      .language-title:after {
        background: $accent;
      }
    }
  }

  .border-accent {
    border-color: $accent  !important;
  }
}
