@layer components {
  /*
   * Highlighted text
   */
  
  .translated-text {
    background-color: rgb(var(--rgb-amber) / 0.24);
    border-radius: 2px;
    color: var(--color-amber-darker);
    cursor: pointer;
    transition: 0.2s ease;
  
    &:after {
      content: "\f057";
      font-family: "Font Awesome 5 Pro";
      font-size: 0.75rem;
      font-weight: 600;
      padding: 0 0.125rem;
    }
  
    &:hover {
      background-color: rgb(var(--rgb-amber) / 0.12);
      text-decoration: none;
    }
  }
  
  .selected-fluent-text {
    font-weight: bolder;
    cursor: pointer;
  }
}