.#{$n}-app {
  @media (hover: hover) {
    .#{$n}-button.#{$n}-collapse-button,
    .#{$n}-modal__enlarge,
    .#{$n}-modal__close {
      transition: background-color $transition;

      &:hover {
        background-color: $interaction-dark;
      }

      path {
        transition: fill $transition;
      }

      &:hover .#{$n}-icon svg path {
        fill: $white;
      }
    }

    .#{$n}-button {
      transition:
        color $transition,
        background-color $transition;
    }

    .#{$n}-button--primary:not([aria-disabled='true']) {
      &:hover {
        background-color: $interaction-dark;
      }
    }

    .#{$n}-button--secondary:not([aria-disabled='true']),
    .#{$n}-button--tertiary:not([aria-disabled='true']) {
      &:hover {
        color: $interaction-dark;
      }
    }

    .#{$n}-choice-prompt__item--secondary .#{$n}-button {
      &:hover {
        background-color: initial;
        color: $interaction-dark;
      }
    }

    .#{$n}-message__body :is(a, [role='button']) {
      transition:
        background-color $transition,
        color $transition;

      &:hover {
        text-decoration: none;
      }
    }

    .#{$n}-conversation__item--source-agent
      .#{$n}-message__body
      .#{$n}-download-link:hover {
      color: $interaction-dark;
    }

    .#{$n}-download-link:hover {
      background-color: $interaction;
    }

    .#{$n}-download-link:hover .#{$n}-file-download {
      color: $white;
    }

    .#{$n}-download-link:hover .#{$n}-icon svg path {
      fill: $white;
    }

    .#{$n}-message--type-upload .#{$n}-icon svg path {
      transition: fill $transition;
    }

    .#{$n}-conversation__item--source-agent
      .#{$n}-download.#{$n}-download-link:hover
      .#{$n}-icon
      path {
      fill: $white;
    }

    .#{$n}-input__text {
      transition:
        padding $transition,
        border $transition;

      &:hover {
        border-color: $interaction-dark;
      }
    }

    .#{$n}-input__submit:not([aria-disabled='true']):hover .#{$n}-icon path {
      fill: $interaction-dark;
    }

    .#{$n}-card__content.#{$n}-card__content .#{$n}-button.#{$n}-button:hover {
      color: $white;
    }

    .#{$n}-carousel__controls .#{$n}-button .#{$n}-icon svg path {
      transition: fill $transition;
    }

    .#{$n}-carousel__controls .#{$n}-button:hover .#{$n}-icon svg path {
      fill: $interaction-dark;
    }

    .#{$n}-carousel-pagination__button::before {
      transition: background-color $transition;
    }

    .#{$n}-carousel-pagination__button:hover::before {
      background-color: $interaction-dark;
    }

    .#{$n}-upload-toggle path {
      transition: fill $transition;
    }

    .#{$n}-upload-toggle:hover path {
      background-color: $interaction-dark;
    }

    .#{$n}-upload__label {
      transition: color $transition;

      &:hover {
        color: $interaction-dark;
      }
    }

    .#{$n}-options__menu__item:not([aria-disabled='true']) {
      transition: color $transition;

      &:hover {
        color: $interaction-dark;
      }
    }

    .#{$n}-options__close {
      transition: color $transition;

      &:hover {
        color: $interaction-dark;
      }
    }

    .#{$n}-transcript__input,
    .#{$n}-input__select {
      transition: border $transition;

      &:hover {
        border-color: $interaction-dark;
      }
    }

    .#{$n}-translation-options__item:hover {
      color: $interaction-dark;
    }

    .#{$n}-collapsed-chat__close {
      .#{$n}-icon path {
        transition: fill $transition;
      }

      &:hover {
        .#{$n}-icon path {
          fill: $interaction-dark;
        }
      }
    }
  }
}