@import url('../../../../../../common/assets/css/flag.css');
:host {
  display: inline-block; --langswitcher-padding: 10px; --langswitcher-background: transparent; --langswitcher-background-size: cover; --langswitcher-z-index: 200; --langswitcher-font-size: 14px; --langswitcher-font-color: #000; --langswitcher-options-background: #fff; --langswitcher-options-font-color: #000; --langswitcher-options-font-color-hover: #000; --langswitcher-options-border-radius: 5px; --langswitcher-options-box-shadow: 0px 2px 2px rgb(0 0 0 / 5%); --langswitcher-option-background-hover: #f4f4f4
}
.langswitcher {
  display: block !important; box-sizing: border-box; width: 100%; padding: var(--langswitcher-padding); background: var(--langswitcher-background); background-size: var(--langswitcher-background-size); position: relative; z-index: var(--langswitcher-z-index)
}
.langswitcher flag {
  display: block; width: 30px; height: 20px; background-position: center center; background-repeat: no-repeat
}
.langswitcher div.label {
  display: flex; align-items: center; font-size: var(--langswitcher-font-size); color: var(--langswitcher-font-color); position: relative; z-index: 50; cursor: pointer
}
.langswitcher div.label span {
  display: block; margin: 0px 10px; white-space: nowrap
}
.langswitcher div.label em {
  display: block; width: 12px; height: 12px; transition: all 0.3s ease
}
.langswitcher div.label jtbc-svg {
  width: 100%; height: 100%; --fore-color: var(--langswitcher-font-color)
}
.langswitcher div.label.on em {
  transform: rotate(180deg)
}
.langswitcher div.options {
  width: 100%; box-sizing: border-box; max-height: 0px; overflow: hidden; padding-left: calc(var(--langswitcher-padding) / 2); padding-right: calc(var(--langswitcher-padding) / 2); opacity: 0; background: var(--langswitcher-options-background); border-radius: var(--langswitcher-options-border-radius); transform: translate(-50%, 0); box-shadow: var(--langswitcher-options-box-shadow); position: absolute; top: 100%; left: 50%; z-index: 100; transition: all 0.3s ease
}
.langswitcher div.options.on {
  max-height: 160px; padding-top: calc(var(--langswitcher-padding) / 2); padding-bottom: calc(var(--langswitcher-padding) / 2); opacity: 1
}
.langswitcher div.options div.option {
  display: flex; align-items: center; padding: calc(var(--langswitcher-padding) / 2); font-size: var(--langswitcher-font-size); background: transparent; color: var(--langswitcher-options-font-color); cursor: pointer; transition: all 0.3s ease
}
.langswitcher div.options div.option:hover {
  background: var(--langswitcher-option-background-hover); color: var(--langswitcher-options-font-color-hover);
}
.langswitcher div.options div.option span {
  display: block; margin: 0px 10px; line-height: 100%; white-space: nowrap
}