/* =========================================================
   ELEON TRANSLATE
   LANGUAGE SWITCHER
   ========================================================= */


/* =========================================================
   WRAPPER
   ========================================================= */

.eleon-language-switcher {
  position: relative;

  display: inline-flex;
  align-items: center;

  flex: 0 0 auto;

  z-index: 100000;
}


/* =========================================================
   MAIN BUTTON
   ========================================================= */

.eleon-language-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 78px;
  min-height: 38px;
  margin: 0;
  padding: 7px 11px;
  border: 1px solid var(--hd-border);
  border-radius: 999px;
  background: var(--hd-surface);
  color: var(--hd-text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    opacity .18s ease;
}


.eleon-language-button:hover {
  border-color:
    color-mix(
      in srgb,
      #6e9cff 55%,
      var(--hd-border)
    );
}


.eleon-language-button:focus-visible {
  border-color: #6e9cff;

  box-shadow:
    0 0 0 3px
    rgba(110,156,255,.14);
}


/* =========================================================
   CURRENT FLAG
   ========================================================= */

.eleon-language-current-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 14px;

  flex: 0 0 20px;

  overflow: hidden;

  border-radius: 2px;

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.10);
}


.eleon-language-current-flag img {
  display: block;

  width: 20px;
  height: 14px;

  object-fit: cover;

  margin: 0;
  padding: 0;

  border: 0;
}


/* =========================================================
   CURRENT LANGUAGE
   ========================================================= */

.eleon-language-current {
  display: inline-flex;
  align-items: center;

  min-width: 18px;

  color: var(--hd-text);

  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   PROGRESS
   ========================================================= */

.eleon-language-progress {
  display: inline-flex;
  align-items: center;

  color: #6e9cff;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}


/* =========================================================
   CHEVRON
   ========================================================= */

.eleon-language-chevron {
  margin: 0 !important;
  padding: 0 !important;

  color: var(--hd-subtle);

  font-size: 8px !important;
  line-height: 1 !important;

  transition:
    transform .18s ease;
}


.eleon-language-switcher.is-open
.eleon-language-chevron {
  transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN
   ========================================================= */

.eleon-language-menu {
  position: absolute !important;

  top: calc(100% + 8px) !important;
  right: 0 !important;

  display: block;

  width: 220px;

  margin: 0;
  padding: 6px;

  overflow: hidden;

  border: 1px solid var(--hd-border);
  border-radius: 12px;

  background: var(--hd-surface);

  box-shadow:
    0 18px 45px
    rgba(0,0,0,.30);

  z-index: 999999;
}


.eleon-language-menu[hidden] {
  display: none !important;
}


/* =========================================================
   LANGUAGE OPTION
   ========================================================= */

.eleon-language-option {
  position: relative;

  display: flex;
  align-items: center;

  gap: 11px;

  width: 100%;
  min-height: 44px;

  margin: 0;
  padding: 7px 9px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color: var(--hd-text);

  font-family: inherit;
  text-align: left;

  cursor: pointer;

  outline: none;

  transition:
    background-color .15s ease,
    color .15s ease;
}


.eleon-language-option:hover {
  background:
    rgba(110,156,255,.09);
}


.eleon-language-option.is-active {
  background:
    rgba(110,156,255,.13);
}


/* =========================================================
   FLAG
   ========================================================= */

.eleon-language-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 20px;

  flex: 0 0 28px;

  overflow: hidden;

  border-radius: 3px;

  background:
    rgba(255,255,255,.04);

  box-shadow:
    0 0 0 1px
    rgba(255,255,255,.08);
}


.eleon-language-flag img {
  display: block;

  width: 28px;
  height: 20px;

  margin: 0;
  padding: 0;

  border: 0;

  object-fit: cover;
}


/* =========================================================
   OPTION INFO
   ========================================================= */

.eleon-language-option-info {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;

  flex: 1;
}


.eleon-language-option-info strong {
  display: block;

  margin: 0;
  padding: 0;

  color: var(--hd-text);

  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}


.eleon-language-option-info small {
  display: block;

  margin: 0;
  padding: 0;

  color: var(--hd-subtle);

  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;

  text-transform: uppercase;
}


/* =========================================================
   ACTIVE CHECK
   ========================================================= */

.eleon-language-option-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;

  flex: 0 0 20px;

  border-radius: 6px;

  color: #6e9cff;

  opacity: 0;

  font-size: 9px;
}


.eleon-language-option.is-active
.eleon-language-option-check {
  opacity: 1;
}


/* =========================================================
   LOADING
   ========================================================= */

.eleon-language-switcher.is-loading
.eleon-language-current-flag {
  opacity: .6;
}


.eleon-language-switcher.is-loading
.eleon-language-button {
  opacity: .88;
}


/* =========================================================
   ERROR
   ========================================================= */

.eleon-translate-toast {
  position: fixed;

  right: 20px;
  bottom: 20px;

  max-width: 360px;

  padding: 11px 14px;

  border:
    1px solid
    rgba(244,63,94,.28);

  border-radius: 10px;

  background:
    rgba(24,24,28,.97);

  color: #f4f4f5;

  box-shadow:
    0 14px 38px
    rgba(0,0,0,.28);

  font-family: inherit;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(8px);

  pointer-events: none;

  z-index: 9999999;

  transition:
    opacity .2s ease,
    visibility .2s ease,
    transform .2s ease;
}


.eleon-translate-toast.is-visible {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0);
}


/* =========================================================
   HEADER
   ========================================================= */

.helios-header,
.helios-header-actions,
.helios-topbar,
.helios-topbar-actions {
  overflow: visible !important;
}


/* =========================================================
   LIGHT
   ========================================================= */

:root[data-theme="light"]
.eleon-language-menu {
  box-shadow:
    0 18px 40px
    rgba(20,30,50,.14);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .eleon-language-button {
    min-width: 68px;

    padding-left: 8px;
    padding-right: 8px;
  }


  .eleon-language-menu {
    width: 210px;
  }

}

/* =========================================================
   TRANSLATION BUILD PANEL
   ========================================================= */

.eleon-translate-builder {
  position: fixed;

  right: 18px;
  bottom: 18px;

  z-index: 99999;

  width: 310px;

  padding: 14px;

  border:
    1px solid
    var(--hd-border);

  border-radius: 12px;

  background:
    var(--hd-surface);

  box-shadow:
    0 12px 40px
    rgba(0,0,0,.22);

  color:
    var(--hd-text);
}


.eleon-build-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-bottom: 12px;
}


.eleon-build-head > div {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.eleon-build-head strong {
  font-size: 12px;
  font-weight: 800;
}


.eleon-build-summary {
  color:
    var(--hd-subtle);

  font-size: 9px;
}


.eleon-build-button {
  min-height: 32px;

  padding:
    7px
    10px;

  border:
    1px solid
    rgba(102,151,255,.30);

  border-radius: 8px;

  background:
    rgba(102,151,255,.10);

  color:
    #7fa8ff;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;
}


.eleon-build-button:hover {
  background:
    rgba(102,151,255,.16);
}


.eleon-build-button:disabled {
  opacity: .55;

  cursor: default;
}


.eleon-build-list {
  display: grid;
  grid-template-columns:
    1fr 1fr;

  gap: 7px;
}


.eleon-build-language {
  display: grid;
  grid-template-columns:
    20px
    30px
    minmax(0,1fr);

  align-items: center;

  gap: 6px;

  min-height: 31px;

  padding:
    5px
    7px;

  border:
    1px solid
    var(--hd-border);

  border-radius: 7px;
}


.eleon-build-flag {
  display: flex;
  align-items: center;
}


.eleon-build-flag img {
  display: block;

  width: 18px;
  height: 12px;

  border-radius: 2px;

  object-fit: cover;
}


.eleon-build-language strong {
  font-size: 9px;
}


.eleon-build-status {
  overflow: hidden;

  color:
    var(--hd-subtle);

  font-size: 8px;

  white-space: nowrap;

  text-overflow: ellipsis;
}


.eleon-build-language.is-cached {
  border-color:
    rgba(72,215,129,.22);

  background:
    rgba(72,215,129,.05);
}


.eleon-build-language.is-cached
.eleon-build-status {
  color:
    #48d781;
}


.eleon-build-language.is-building {
  border-color:
    rgba(102,151,255,.25);

  background:
    rgba(102,151,255,.05);
}


.eleon-build-language.is-building
.eleon-build-status {
  color:
    #6697ff;
}


.eleon-build-language.is-waiting
.eleon-build-status {
  color:
    #d9a74a;
}


.eleon-build-language.is-error
.eleon-build-status {
  color:
    #ff6978;
}


.eleon-translate-builder.is-complete {
  opacity: .70;
}


@media (max-width: 900px) {

  .eleon-translate-builder {
    display: none;
  }

}