/*
 Theme Name:   UNI
 Description:  Custom theme for UNI.
 Author:       Rosesela
 Author URI:   https://rosesela.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  uni
*/

/* =========================
   LANGUAGE SWITCHER
   ========================= */

.lang-switcher {
  position: relative;

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

  z-index: 1000;
}


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

.lang-switcher__toggle {
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  margin: 0;
  padding: 4px;

  border: 0;
  border-radius: 50%;

  background: transparent;

  cursor: pointer;
}


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

.lang-switcher__flag {
  display: inline-block;

  width: 24px;
  height: 24px;

  flex: 0 0 24px;

  border-radius: 50%;

  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}


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

.lang-switcher__dropdown {
  position: absolute;

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

  z-index: 1001;

  min-width: 160px;

  padding: 6px;

  background: #fff;

  border-radius: 12px;

  box-shadow:
    rgb(229, 229, 229) 0 0 0 1px,
    rgba(0, 0, 0, 0.08) 0 6px 20px;

  opacity: 0;
  visibility: hidden;

  transform:
    translateY(-6px)
    scale(0.98);

  transform-origin: top right;

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease,
    transform 0.35s cubic-bezier(.16, 1, .3, 1);
}


/* Hover bridge
   ครอบช่องว่างระหว่างธงกับ dropdown */
.lang-switcher__dropdown::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -10px;
  height: 10px;
}


/* =========================
   HOVER → OPEN
   ========================= */

.lang-switcher:hover .lang-switcher__dropdown,
.lang-switcher:focus-within .lang-switcher__dropdown {
  opacity: 1;
  visibility: visible;

  transform:
    translateY(0)
    scale(1);

  pointer-events: auto;
}


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

.lang-switcher__option {
  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 8px 10px;

  border-radius: 8px;

  color: #111;
  text-decoration: none;

  white-space: nowrap;

  transition:
    background-color 0.2s ease;
}

.lang-switcher__option:hover {
  background-color: #f5f5f5;
}


/* CURRENT LANGUAGE */

.lang-switcher__option.is-active {
  background-color: #f5f5f5;
}


/* =========================
   LANGUAGE NAME
   ========================= */

.lang-switcher__name {
  display: block;

  font-size: 14px;
  line-height: 1.2;

  white-space: nowrap;
}