/**
 * Custom styling for the Google Translate widget
 *
 * This stylesheet enhances the appearance of the Google Translate widget by:
 * - Removing default borders
 * - Hiding unnecessary icons
 * - Incorporating custom icons and colors
 * - Adding responsive behavior
 *
 * Implementation:
 * - Widget container added via sliver-only.html.twig
 * - Initialized through google_translate_element ID
 * - Controlled by agencytemplatev4/js/google-translate-init.js
 */

#google_translate_element {
  text-align: right;
}

.goog-te-gadget-simple {
  display: block !important;
  border: none !important;
  background: unset !important;
}

/* remove the Google Translate icon */
.goog-te-gadget-simple .goog-te-gadget-icon {
  display: none !important;
}

.goog-te-gadget img {
  display: inline-block;
  vertical-align: middle;
}

.goog-te-gadget-simple > span {
  display: flex;
  align-items: center;
}

/* adds a new globe icon to the Google Translate widget */
.goog-te-gadget-simple > span::before {
  content: ' ';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  background-image: url('../images/globe-white.svg');
  background-size: cover;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.goog-te-gadget a {
  text-decoration: none !important;

  &:hover {
    > span {
      text-decoration: underline !important;
    }
  }
}

/* Style for the language dropdown */
.goog-te-gadget-simple a span {
  font-family: inherit !important;
  color: white !important;
  font-size: 1rem !important;
  vertical-align: middle;
  margin-inline-end: 5px;
  border: 0 !important;
}

/* Remove the default arrow icon and add a custom one */
.goog-te-gadget-simple a span[aria-hidden='true'] {
  position: relative;
  font-size: 0 !important;

  &::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-right: 3px solid;
    border-bottom: 3px solid;
    transform: translateY(-45%) rotate(45deg);
    transform-origin: 25% 75%;
    vertical-align: middle;
  }
}

/* Add responsive adjustments */
@media screen and (max-width: 768px) {
  #google_translate_element {
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .goog-te-gadget-simple > span {
    justify-content: center;
  }
}