:root {
  --cms-installer-dialog-size: 880px;
  --cms-installer-dialog-p: var(--gin-spacing-l);

  --language-switcher-option-space: 6px;
  --language-switcher-exposed-rows: 12;
  --language-switcher-row-h: 28px;
}

.cms-installer__language-switcher {
  .button {
    box-shadow: none;
    transition: var(--gin-transition);
    border: 2px solid var(--gin-color-primary);

    &:hover {
      color: var(--gin-color-primary);
      background-color: var(--color-blue-100);
    }
  }
}

:where([aria-expanded="true"]) .cms-installer__language-switcher-button-indicator svg {
  rotate: 180deg;
}

.cms-installer__language-switcher-list {
  --column-width: calc(calc(var(--cms-installer-dialog-size) / 4) - calc(var(--cms-installer-dialog-p) * 2));

  list-style: none;
  padding: 0 0 0 6px;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--column-width), 1fr));
  column-gap: 1rem;
  font-size: var(--gin-font-size-s, 14px);

  line-height: var(--language-switcher-row-h);
  overflow-block: auto;
  max-height: calc(var(--language-switcher-exposed-rows) * calc(1lh + calc(var(--language-switcher-option-space) * 2)));
}

* + .cms-installer__language-switcher-list {
  margin-block-start: var(--gin-spacing-m);
}

.cms-installer__language-switcher-list a {
  border-radius: 0.5lh;
  color: var(--gin-color-text);
  column-gap: 0.35em;
  display: inline-flex;
  margin-block: var(--language-switcher-option-space);
  padding-inline: 1.25em;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* tidy up these colours using gin variables etc */
.cms-installer__language-switcher-list a:is(.is-selected, :hover, :focus-visible) {
  font-weight: var(--gin-font-weight-bold);
}

.cms-installer__language-switcher-list a:is(.is-selected) {
  background-color: var(--color-blue-100);
  color: var(--gin-color-primary-active);
}

.cms-installer__language-switcher-list a:not(.is-selected):hover,
.cms-installer__language-switcher-list a:not(.is-selected):focus-visible {
  background-color: var(--color-blue-050);
  color: var(--gin-color-primary-active);
}

.cms-installer__language-switcher-list a svg {
  inline-size: 1.4ch;
  height: auto;
}

.cms-installer__language-switcher-close.button {
  border: 0;
  padding: .25rem;
  min-inline-size: unset;
  color: var(--gin-color-text-light);

  svg {
    display: block;
    inline-size: 2rem;
    block-size: 2rem;
  }
}

.cms-installer__language-loading:not([hidden]) {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  color: var(--gin-color-primary);

  svg {
    inline-size: 4rem;
    block-size: 4rem;
  }
}

.cms-installer__language-switcher-dialog .cms-installer__form-group {
  margin-block-end: 0;
  margin-block-start: 1rem;
}

.cms-installer__dialog-header-group {
  display: flex;
  justify-content: space-between;
  align-items: center;

  > * {
    margin: 0;
  }
}

.cms-installer__language-switcher-dialog .form-element {
  --icon-size: .85em;

  width: 100%;
  background-image: url('../../images/search.svg');
  background-repeat: no-repeat;
  background-position: right var(--input-padding-horizontal) center;
  background-size: var(--icon-size);
  padding-inline-end: calc(var(--input-padding-horizontal) + var(--icon-size));
}