.page-select--page,
.page-select--page-name,
.page-select--page-urlname {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.page-select--page {
  /* Need to redefine these variables here with the defaults from Alchemy,
   * because they are not available if you only load this file.
   */
  --size-1: var(--spacing-0, 2px);
  --size-2: var(--spacing-1, 4px);
  --size-3: var(--spacing-2, 8px);
  --small-font-size: var(--font-size_small, 10px);
  --grey: var(--color-grey_light, hsl(0deg, 0%, 94%));
  --color: var(--text-color, hsla(224deg, 23%, 26%, 0.8));
  --highlight-color: var(--grey);

  display: flex;
  flex-direction: column;
  color: var(--color);

  alchemy-icon {
    margin-right: var(--size-2);

    .icon {
      fill: currentColor;
    }
  }

  .select2-highlighted & {
    color: var(--highlight-color);
  }
}

.page-select--top,
.page-select--bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.page-select--bottom {
  font-size: var(--small-font-size);
  padding-left: var(--size-1);
}

.page-select--page-urlname {
  color: var(--text-color-muted, hsla(224deg, 23%, 26%, 0.5));
  padding-right: var(--size-2);

  .select2-highlighted & {
    color: var(--highlight-color);
  }
}

.page-select--language-code {
  --bg-color: var(--grey);
  --highlight-bg-color: var(--color-white, hsl(0deg, 0%, 100%));
  --border-radius: var(--border-radius_medium, 3px);

  display: inline-block;
  background-color: var(--bg-color);
  margin-left: auto;
  border-radius: var(--border-radius);
  padding: var(--size-1) var(--size-2);
  text-transform: uppercase;

  .select2-highlighted & {
    color: var(--color);
    background-color: var(--highlight-bg-color);
  }
}

.page-select--site-name {
  margin-left: auto;
  padding: var(--size-2) 0 var(--size-2) var(--size-3);
  font-size: var(--small-font-size);
}

@media (prefers-color-scheme: dark) {
  .page-select--page {
    --grey: var(--a-dark-grey, hsl(200deg, 5%, 17.5%));
    --color: var(--select-text-color, hsl(200deg, 5%, 70%));
    --highlight-color: var(--select-hover-text-color, hsl(0deg, 0%, 100%));
  }

  .page-select--page-urlname {
    color: var(--a-lighter-grey, hsl(200deg, 5%, 70%));
  }

  .page-select--language-code {
    --highlight-bg-color: var(--bg-color);
  }
}
