:root {
  --toolbar-background-color: #333331;
  --toolbar-button-background-color: #333331;
  --toolbar-button-color: #979796;
  --toolbar-button-hover-color: #f0e620;
  --toolbar-menu-item-color: var(--toolbar-background-color);
  --toolbar-menu-item-hover-color: #f4f4f4;
  --toolbar-menu-item-border-color: #eaeaea;
  --toolbar-button-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' %3E%3Cpath fill='%23979796' d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41Z'/%3E%3C/svg%3E");
}

.spr-translate-toolbar {
  position: relative;
  z-index: 211;
  display: flex;
  justify-content: space-between;
  color: var(--color-white);
  background-color: var(--toolbar-background-color);
  padding-inline: 1rem;

  &.show {
    display: flex;
  }
}

.spr-translate-toolbar__dropdown {
  position: relative;
}

.spr-translate-toolbar__button {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  cursor: pointer;
  text-transform: uppercase;
  color: var(--toolbar-button-color);
  border: none;
  outline-offset: -0.125rem;
  background-color: var(--toolbar-button-background-color);
  font-size: 0.75rem;
  gap: 1rem;
  padding-block: 0.75rem;
  padding-inline: 0 1.5rem;

  &::after {
    position: absolute;
    top: 50%;
    right: 0;
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    content: "";
    transform: translateY(-50%);
    background-image: var(--toolbar-button-arrow);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 1.5rem;
  }

  &:hover,
  &.is-open {
    color: var(--toolbar-button-hover-color);

    &::after {
      transform: translateY(-50%) rotate(180deg);
    }
  }

  & > * {
    pointer-events: none;
  }
}

.spr-translate-toolbar__button img {
  max-width: 7.25rem;
}

.spr-translate-toolbar__list {
  position: absolute;
  z-index: 1000;
  top: 100%;
  left: 0;
  display: none;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--color-white);
  box-shadow: 0 2px 3px rgba(51, 51, 49, 0.2);

  &.is-open {
    display: flex;
  }
}

.spr-translate-toolbar__list li:last-child {
  border-top: 0.0625rem solid var(--toolbar-menu-item-border-color);
}

.spr-translate-toolbar__list li a {
  display: block;
  padding: 0.625rem 1rem;
  text-align: right;
  text-decoration: none;
  color: var(--toolbar-menu-item-color);
  font-size: 0.875rem;

  &:hover {
    background-color: var(--toolbar-menu-item-hover-color);
  }
}

/* PWA Override */

body.site--is-pwa .spr-translate-toolbar,
body.site--is-pwa .spr-translate-toolbar.show {
  display: none;
}