@use '../0-tools/vars' as *;

// Custom styling for Google Translate
// ====================================================== //

// Top-most element of the Google Translate menu
#google_translate_element {
  position: fixed;
  bottom: .25rem;
  right: .25rem!important;
  z-index: 99999;
}

// First child of translate element
.goog-te-gadget {
  font-family: Roboto, 'Open Sans', sans-serif!important;
  text-transform: uppercase;
  font-weight: 500;
  &:hover {
    color: $white;
  }
}

// Second child of translate element
.goog-te-gadget-simple  {
  background-color: rgba(255,255,255,0.85)!important;
  border: 1px solid rgba(0,0,0,0.95) !important;
  border-radius: 4px!important;
  cursor: pointer;
  display: inline-block;
  font-size: 1rem!important;
  height: 100%;
  line-height:2rem!important;
  margin-right: 5px;
  padding: 8px!important;
  transition: background-color .2s;
  white-space: nowrap;
  zoom: 1;
  &:hover { // Adds a hover effect
    background-color: rgba(0, 123, 255, 0.85)!important;
  }
  &:focus {
    background-color: rgba(0, 123, 255, 0.85)!important;
  }
}

// Adds a hover effect
.goog-te-gadget-simple:hover .VIpgJd-ZVi9od-xl07Ob-lTBxed {
  color: $white !important;
}

// Adds a nice icon from "Material Icons" icons
.VIpgJd-ZVi9od-xl07Ob-lTBxed {
  color: #000 !important;
  text-decoration: none !important;
    &:before {
    font-family: 'Material Icons'; // <https://fonts.google.com/icons?selected=Material+Icons>
    content: "\E927"; // G translate icon <https://fonts.google.com/icons?selected=Material+Icons&icon.query=translate>
    margin-right: 16px;
    font-size: 2rem;
    vertical-align: -10px;
    // width:32px!important;
  }
}

// Hide span that messes up layout
.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(5) {
  display:none;
}

// Use a nicer looking dropdown arrow/carrot than the default
.VIpgJd-ZVi9od-xl07Ob-lTBxed span:nth-child(3) {
  border:none!important;
  font-family: 'Material Icons';
  &:after {
    font-family: 'Material Icons';
    content: "\E5C5"; // <https://fonts.google.com/icons?selected=Material+Icons&icon.query=arrow>
    font-size: 1.5rem;
    vertical-align: -6px;
  }
}

.goog-te-gadget-icon {
    background-image: url(https://placehold.it/32)!important;
    background-position: 0px 0px;
    height: 32px!important;
    width: 32px!important;
    margin-right: 8px!important;
    //     OR
    display: none;
}

// ============ HIDE TOP BAR ============
.VIpgJd-ZVi9od-ORHb-OEVmcd.skiptranslate {display: none!important;}
body {top: 0px!important;}

/* ================================== *\
    Mediaqueries
\* ================================== */
@media (max-width: 667px) {
  #google_translate_element {
    bottom: .25rem;
    left: 16px!important;
    width: 100%!important;
    .goog-te-gadget {
      width:100%!important;
    }
    .skiptranslate {
      width:100%!important;
    }
    .goog-te-gadget-simple {
      width: calc(100% - 32px)!important;
      text-align: center;
    }
  }
}

// Prevent underlining when hovered
a.VIpgJd-ZVi9od-xl07Ob-lTBxed {
  text-decoration: none !important;
  &:hover {
    text-decoration: none !important;
  }
}

// Removes the blue border surrounding the entire translate menu (when opened)
.VIpgJd-ZVi9od-vH1Gmf {
  border: none !important;
}