<template>
  <div class="nav-top lg:h-24 h-16">
    <!-- Nav Mobile -->
    <nav class="lg:hidden md:hidden absolute top-0 z-20 inset-0 p-3 w-full bg-[#273A97]">
      <div class="container mx-auto px-5">
        <div class="flex items-center space-x-10 justify-between">
          <div @click="toggleSidebar" class="cursor-pointer lg:hidden">
            <img :src="'/icon/burger-menu.svg'" class="w-8 -mt-1" alt="" />
          </div>
          <div class="bg-red-500 w-32 h-16 relative -mt-3 rounded-full px-5">
            <NuxtLink to="/">
              <img :src="'/mascot/mascot-2.png'" alt="Arirang Logo" class="w-[60px] absolute left-1/2 -translate-x-1/2 bottom-[-8px]" />
            </NuxtLink>
          </div>
          <div @click="toggleLogin()">
            <img :src="'/images/profile_icon.svg'" alt="Arirang Logo" class="w-5 -mt-1" />
          </div>
        </div>
      </div>
      <!-- Sidebar -->
      <div v-if="isSidebarOpen" class="fixed inset-0 z-30 bg-gray-800 bg-opacity-75 lg:hidden">
        <div class="bg-white w-64 h-full">
          <div class="flex justify-between items-center bg-[#273A97] p-5">
            <NuxtLink to="/">
              <img src="/images/arirang_logo.svg" alt="Arirang Logo" class="w-20" />
            </NuxtLink>
            <button @click="toggleSidebar">
              <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
              </svg>
            </button>
          </div>
          <ul class="space-y-4 p-5">
            <li class="dropdown list-none">
              <div @click="toggleDropdownProduct" class="dropdown-button flex">
                {{ translate("Products") }}
                <img :src="imageSrc" :style="{ transform: `rotate(${rotateproduct}deg)` }" class="rotate-image w-3 ml-2" />
              </div>
              <ul v-if="isOpenProduct" class="dropdown-menu z-10 list-none">
                <li class="list-none">
                  <NuxtLink to="/products" class="block px-6 py-1 hover:text-[#EC2029]">
                    {{ translate("Products") }}
                  </NuxtLink>
                </li>
                <li class="list-none" v-for="(item, index) in catproducts.data.slice(0, 7)">
                  <NuxtLink :to="'/products#' + item.id" class="block px-6 py-1 hover:text-[#EC2029]">{{ item.name }} </NuxtLink>
                </li>
              </ul>
            </li>
            <li class="dropdown list-none">
              <div @click="toggleDropdownBuzz" class="dropdown-button flex">
                {{ translate("K-Buzz") }}
                <img :src="imageSrc" :style="{ transform: `rotate(${rotatebuzz}deg)` }" class="rotate-image w-3 ml-2" />
              </div>
              <ul v-if="isOpenBuzz" class="dropdown-menu z-10 list-none">
                <li class="list-none">
                  <NuxtLink to="/k-buzz" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("All Articles") }}</NuxtLink>
                </li>
                <li class="list-none">
                  <NuxtLink to="/k-buzz?cat=K-Food" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Food") }}</NuxtLink>
                </li>
                <li class="list-none">
                  <NuxtLink to="/k-buzz?cat=K-Drama" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Drama") }}</NuxtLink>
                </li>
                <li class="list-none">
                  <NuxtLink to="/k-buzz?cat=K-Beauty" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Beauty") }}</NuxtLink>
                </li>
                <li class="list-none">
                  <NuxtLink to="/k-buzz?cat=K-Fashion" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Fashion") }}</NuxtLink>
                </li>
                <li class="list-none">
                  <NuxtLink to="/k-buzz?cat=News & Event" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("News & Event") }} </NuxtLink>
                </li>
              </ul>
            </li>
            <!-- <li class="list-none">
              <NuxtLink to="/k-buzz" class="text-black hover:text-blue-500">K-Buzz</NuxtLink>
            </li> -->
            <li class="list-none">
              <NuxtLink to="/hosea" class="text-black hover:text-blue-500">{{ translate("Hosea") }}</NuxtLink>
            </li>
            <li class="list-none">
              <NuxtLink to="/about-us" class="text-black hover:text-blue-500">{{ translate("About Us") }}</NuxtLink>
            </li>
            <!-- <li class="list-none">
              <NuxtLink to="#" @click="toggleLogin()" class="text-black hover:text-blue-500">Profile</NuxtLink>
            </li> -->
            <li class="dropdown list-none">
              <div @click="toggleDropdown" class="dropdown-button flex">
                <img :src="languageStore().activeLang.src" :alt="languageStore().activeLang.label" class="w-7 h-7" />
                <img :src="imageSrc" :style="{ transform: `rotate(${rotate}deg)` }" class="rotate-image w-3 ml-2" />
              </div>
              <ul v-if="isOpen" class="dropdown-menu">
                <li v-for="item in languageStore().availableLanguages" :key="item.value" class="flex items-center gap-x-3 m-3 px-10 py-1 cursor-pointer">
                  <img :src="item.src" :alt="item.label" class="w-7 h-7" />
                  <span @click="switchLanguage(item)">{{ item.label }}</span>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <!-- Nav desktop-->
    <div class="">
      <nav class="absolute hidden lg:block md:block top-0 z-20 w-full bg-[#273A97] text-white justify-center items-center lg:h-24 md:h-20">
        <div class="container mx-auto lg:px-10 md:px-10 px-5">
          <div class="flex items-center justify-between h-full">
            <!-- Pilihan Bahasa -->
            <div class="relative group">
              <div class="flex items-center space-x-1 cursor-pointer py-1">
                <div class="flag-icon lg:mr-2">
                  <img :src="languageStore().activeLang.src" :alt="languageStore().activeLang.label" class="w-7 h-7" />
                </div>
                <span class="transition-transform transform group-hover:rotate-180">
                  <img src="/icon/dropdown_icon_white.png" class="w-3" />
                </span>
              </div>
              <div class="absolute group-hover:block hidden font-bold text-base bg-white text-black py-5 rounded-[40px] shadow-lg w-52 -left-10 top-9">
                <div v-for="item in languageStore().availableLanguages" :key="item.value" class="flex items-center gap-x-3 px-10 py-1 cursor-pointer">
                  <img :src="item.src" :alt="item.label" class="w-7 h-7" />
                  <span @click="switchLanguage(item)">{{ item.label }}</span>
                </div>
              </div>
            </div>

            <div class="relative group">
              <div class="flex items-center space-x-1 cursor-pointer">
                <NuxtLink to="/products" class="lg:mr-3 md:mr-1 lg:text-lg md:text-base" :class="['border-b-2', $route.path === '/products' ? 'border-[#EC2029]' : 'border-[#273A97]']">
                  {{ translate("Products") }}
                </NuxtLink>

                <span class="transition-transform transform group-hover:rotate-180">
                  <img src="/icon/dropdown_icon_white.png" class="w-4" />
                </span>
              </div>

              <!-- <div>{{ catproducts }}</div> -->
              <div class="absolute z-20 hidden group-hover:block font-bold text-base bg-white text-black py-3 rounded-[25px] shadow-lg -left-6 top-6" style="width: max-content">
                <div v-for="(item, index) in catproducts.data.slice(0, 7)">
                  <NuxtLink :to="'/products#' + item.id" class="block px-6 py-1 hover:text-[#EC2029]">{{ item.name }} </NuxtLink>
                </div>
              </div>
            </div>

            <div class="relative group">
              <div class="mr-16 flex items-center space-x-1 cursor-pointer">
                <NuxtLink to="/k-buzz" class="lg:mr-3 md:mr-1 lg:text-lg md:text-base border-b-2" :class="kbuzzClass">
                  {{ translate("K-Buzz") }}
                </NuxtLink>

                <span class="transition-transform transform group-hover:rotate-180">
                  <img src="/icon/dropdown_icon_white.png" class="w-4" />
                </span>
              </div>
              <div class="absolute z-20 hidden group-hover:block font-bold text-base bg-white text-black py-3 rounded-[25px] shadow-lg -left-6 top-6" style="width: max-content">
                <NuxtLink to="/k-buzz" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("All Articles") }}</NuxtLink>
                <NuxtLink to="/k-buzz?cat=K-Food" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Food") }}</NuxtLink>
                <NuxtLink to="/k-buzz?cat=K-Drama" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Drama") }}</NuxtLink>
                <NuxtLink to="/k-buzz?cat=K-Beauty" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Beauty") }}</NuxtLink>
                <NuxtLink to="/k-buzz?cat=K-Fashion" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("K-Fashion") }}</NuxtLink>
                <NuxtLink to="/k-buzz?cat=News & Event" class="block px-6 py-1 hover:text-[#EC2029]">{{ translate("News & Event") }} </NuxtLink>
              </div>
            </div>

            <!-- Maskot di Tengah -->
            <div class="ml-6 relative flex justify-center items-center lg:h-24 md:h-20">
              <div class="absolute lg:top-[54px] md:top-[46px] left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full lg:px-24 md:px-20 lg:py-[53px] md:py-[45px]">
                <NuxtLink to="/">
                  <img
                    else
                    :src="currentImage"
                    alt="Logo"
                    class="absolute left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-20"
                    :class="[$route.path === '/' ? 'lg:top-[58px] w-[145px] h-[145px] md:top-[48px] md:w-[120px] md:h-[120px]' : 'lg:top-16 lg:w-auto lg:h-[110px] md:top-[55px] md:w-auto md:h-[90px]']"
                  />
                </NuxtLink>
              </div>
            </div>

            <NuxtLink to="/hosea" class="ml-24 lg:text-lg md:text-base border-b-2" :class="hoseaClass">{{ translate("Hosea") }}</NuxtLink>

            <NuxtLink to="/about-us" class="mr-3 border-b-2 lg:text-lg md:text-base" :class="[$route.path === '/about-us' ? 'border-[#EC2029]' : 'border-transparent']">{{ translate("About Us") }}</NuxtLink>

            <div class="relative group">
              <div class="flex items-center space-x-1 cursor-pointer">
                <div v-on:click="toggleLogin()" class="user-icon cursor-pointer">
                  <img src="/images/profile_icon.svg" alt="Profil Pengguna" class="w-7 h-7 cursor-pointer" />
                </div>
              </div>
              <!-- <div class="absolute z-20 hidden group-hover:block text-base bg-white text-black pt-3 rounded-[20px] shadow-lg w-52 -left-44 top-8">
                <div class="flex items-center space-x-8">
                  <img src="/images/profile_icon.svg" />
                  <div>
                    <p class="font-light font-[Footer]">Hi,</p>
                    <p>asdasdasdads</p>
                  </div>
                </div>
                <div class="p-3">
                  <NuxtLink to="/profile?cat=setting">
                    <div class="bg-[#eee] rounded-full w-full py-1 text-[10px] text-center text-[#959595]">Edit My Profile</div>
                  </NuxtLink>
                </div>

                <hr />
                <div class="flex flex-col">
                  <NuxtLink to="/profile?cat=voucher">
                    <p class="block px-6 py-1 hover:text-[#EC2029]">Voucher</p>
                  </NuxtLink>
                  <NuxtLink to="/profile?cat=bookmark">
                    <p class="block px-6 py-1 hover:text-[#EC2029]">Bookmark</p>
                  </NuxtLink>
                  <NuxtLink to="/profile?cat=article">
                    <p class="block px-6 py-1 hover:text-[#EC2029]">Article You Like</p>
                  </NuxtLink>
                </div>
                <hr />
                <p class="block px-6 py-3 text-[#EC2029]">Logout</p>
              </div> -->
            </div>
          </div>
        </div>
      </nav>
    </div>
  </div>

  <!-- Pop Up Login -->
  <div>
    <div v-if="showLogin" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
      <div class="absolute mx-10 w-full h-full bg-gray-900 opacity-50" v-on:click="closeLogin()"></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[85vw] sm:w-[120vh] bg-white outline-none focus:outline-none">
          <div class="flex flex-col sm:flex-row">
            <img src="/images/banner-login.webp" alt="Laptop on Desk" class="hidden xl:block lg:block md:block w-72 sm:rounded-l-[30px] rounded-l-[30px]" />
            <div class="p-4 sm:p-8 w-full">
              <div class="font-bold text-3xl sm:text-4xl mb-4 text-center xl:text-start lg:text-start md:text-start">Login</div>
              <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

              <div class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5 mx-auto xl:mx-0 lg:mx-0 md:mx-0">
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-xs">Or Use Your Email</span>
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label class="block text-gray-700 text-xs sm:text-[12px] font-bold" for="username">Email</label>
                <input class="appearance-none text-xs sm:text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Write Your Email Here" />
              </div>

              <div class="mb-4">
                <div class="relative">
                  <label class="block text-gray-700 text-xs sm:text-[12px] font-bold" for="password">Password</label>
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    id="password"
                    placeholder="Password"
                    class="appearance-none text-xs sm:text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <img :src="showPassword ? '/icon/icon-eye.svg' : '/icon/icon-eye.svg'" alt="Toggle Password" class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-4 sm:w-3" @click="togglePasswordVisibility" />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input checked type="checkbox" class="sb-checkbox__input" id="check2" name="check2" />
                        <label class="sb-checkbox__label sb-checkbox__label--red" for="check2"></label>
                      </div>
                      <div class="ms-2 text-xs sm:text-[10px] font-medium text-[#959595]">Keep me logged in</div>
                    </div>
                  </div>
                  <div v-on:click="pageForgotpass()" class="text-xs sm:text-[10px] text-[#EC1F29] cursor-pointer">Forgot Password?</div>
                </div>
              </div>

              <div class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-xs sm:text-[12px] text-center items-center cursor-pointer">Login</div>

              <div class="pt-10">
                <span class="text-xs sm:text-[10px] text-[#959595]">Don't Have An Account? </span>
                <span class="text-xs sm:text-[10px] text-[#EC1F29] cursor-pointer" v-on:click="toggleSignUp()">Signup</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showLogin" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up Login -->

  <!-- Pop Up SignUp -->
  <div>
    <div v-if="showSignUp" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
      <div class="absolute mx-10 w-full h-full bg-gray-900 opacity-50" v-on:click="closeSignUp()"></div>
      <div class="relative w-auto my-6 mx-5 max-w-4xl">
        <div class="border-0 mx-auto rounded-[30px] shadow-lg relative w-[85vw] sm:w-[120vh] bg-white outline-none focus:outline-none">
          <div class="flex">
            <img src="/images/banner-signup.png" alt="Laptop on Desk" class="hidden xl:block lg:block w-72 rounded-l-[30px]" />
            <div class="p-8 w-full">
              <div class="font-bold text-4xl mb-2 text-center xl:text-start lg:text-start md:text-start">Signup</div>
              <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

              <div class="flex items-center border border-[#EC1F297D] p-2 rounded-lg max-w-max mt-5 mx-auto xl:mx-0 lg:mx-0 md:mx-0">
                <img src="/icon/icon-google.png" class="w-4 h-4 mr-3" />
                <span class="text-sm">Signin with Google</span>
              </div>

              <div class="flex items-center my-5 w-full">
                <hr class="flex-grow border-t border-gray-300" />
                <span class="px-4 text-gray-500 text-[10px]">Or Use Your Email</span>
                <hr class="flex-grow border-t border-gray-300" />
              </div>

              <div class="mb-4">
                <label class="block text-gray-700 text-[12px] font-bold" for="username"> Email </label>
                <input class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Write Your Email Here" />
              </div>
              <div class="mb-4">
                <div class="relative">
                  <label class="block text-gray-700 text-[12px] font-bold" for="password"> Password </label>
                  <input
                    :type="showPassword ? 'text' : 'password'"
                    id="password"
                    placeholder="Password"
                    class="appearance-none text-[10px] border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  />
                  <!-- Eye Icon -->
                  <img :src="showPassword ? '/icon/icon-eye.svg' : '/icon/icon-eye.svg'" alt="Toggle Password" class="absolute right-4 top-8 transform -translate-y-1/2 cursor-pointer w-3" @click="togglePasswordVisibility" />
                </div>
                <div class="flex items-center justify-between mt-2">
                  <div class="sb-checkbox">
                    <div class="flex items-center">
                      <div>
                        <input checked type="checkbox" class="sb-checkbox__input" id="check2" name="check2" />
                        <label class="sb-checkbox__label sb-checkbox__label--red" for="check2"></label>
                      </div>
                      <div class="ms-2 text-[10px] font-medium text-[#959595]">I agree to the Terms of Service and Privacy Policy</div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="rounded-full w-full bg-[#EC1F29] text-white py-2 text-[12px] text-center items-center cursor-pointer">Signup</div>

              <div class="pt-10">
                <span class="text-[10px] text-[#959595]">Already Have An Account?</span>
                <span class="text-[10px] text-[#EC1F29] cursor-pointer" v-on:click="toggleLogin()"> Login</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showSignUp" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
  </div>
  <!-- Pop Up SignUp -->
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { useFetch } from "nuxt/app";
import { useLanguageStore } from "~/stores/lang";

// Reactive variable to control the dropdown state
const isOpen = ref(false);
const isOpenProduct = ref(false);
const isOpenBuzz = ref(false);

// Reactive variable to store the rotation angle
const rotate = ref(0);
const rotateproduct = ref(0);
const rotatebuzz = ref(0);

// Method to toggle the dropdown visibility
const toggleDropdown = () => {
  isOpen.value = !isOpen.value;
  rotate.value = (rotate.value + 180) % 360;
  isOpenProduct.value = false;
  isOpenBuzz.value = false;
};

const toggleDropdownProduct = () => {
  isOpenProduct.value = !isOpenProduct.value;
  rotateproduct.value = (rotateproduct.value + 180) % 360;
  isOpen.value = false;
  isOpenBuzz.value = false;
};

const toggleDropdownBuzz = () => {
  isOpenBuzz.value = !isOpenBuzz.value;
  rotatebuzz.value = (rotatebuzz.value + 180) % 360;
  isOpenProduct.value = false;
  isOpen.value = false;
};

// Image source
const imageSrc = "/icon/icon_dropdown_sort.svg";

const languageStore = useLanguageStore;

console.log("User Language: ", languageStore().activeLang.value);

function switchLanguage(value) {
  languageStore().set(value);
  isOpen.value = !isOpen.value;
  rotate.value = (rotate.value + 180) % 360;
  window.location.reload();
}

const appConfig = useAppConfig();

const route = useRoute();

const { data: catproducts } = await useFetch(appConfig.api.url + "/api/category?lang=" + languageStore().activeLang.value, {
  method: "GET",
  headers: {
    "Accept-Language": languageStore().activeLang.value,
  },
});
const currentImage = computed(() => {
  if (route.path === "/" || route.path === "/index") {
    return "/images/arirang_logo.svg";
  } else {
    return "/mascot/mascot-2.png";
  }
  return "";
});

const isSidebarOpen = ref(false);

function toggleSidebar() {
  isSidebarOpen.value = !isSidebarOpen.value;
}

// Watch perubahan route untuk menutup sidebar
watch(
  () => route.path,
  () => {
    isSidebarOpen.value = false;
    isOpenProduct.value = false;
    isOpenBuzz.value = false;
    isOpen.value = false;
  }
);

const showLogin = ref(false);

// function toggleLogin() {
//   showLogin.value = !showLogin.value;
//   showSignUp.value = false;
// }
function closeLogin() {
  showLogin.value = false;
}

const showSignUp = ref(false);

function toggleSignUp() {
  showSignUp.value = !showSignUp.value;
  showLogin.value = false;
}
function closeSignUp() {
  showSignUp.value = false;
}
function pageForgotpass() {
  route.push("/forgot-password");
  showLogin.value = false;
}

function translate(params) {
  return languageStore().translateWords(params);
}
</script>

<script>
export default {
  data() {
    return {
      showPassword: false, // State to track password visibility
    };
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword; // Toggle state
    },
  },
  computed: {
    hoseaClass() {
      const path = this.$route.path;
      // Match '/hosea' or '/article/{slug}' where {slug} is a non-empty string
      const articleSlugPattern = /^\/articles\/[^/]+$/; // Ensures there’s a slug after '/article/'

      if (path.startsWith("/hosea") || articleSlugPattern.test(path)) {
        return "border-[#EC2029]"; // Set border color
      }
      return "border-transparent"; // Default no border
    },
    kbuzzClass() {
      const path = this.$route.path;
      // Match '/-k-buzz' or '/article/{slug}' where {slug} is a non-empty string
      const articleSlugPattern = /^\/article\/[^/]+$/; // Ensures there’s a slug after '/article/'

      if (path.startsWith("/k-buzz") || articleSlugPattern.test(path)) {
        return "border-[#EC2029]"; // Set border color
      }
      return "border-transparent"; // Default no border
    },
  },
};

onMounted(() => {});
</script>

<style scoped>
/* Styles for the dropdown */
.dropdown-button {
  border: none;
  cursor: pointer;
}

.dropdown-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 30px;
  position: absolute;
}

.dropdown-menu li {
  padding: 5px;
  cursor: pointer;
}

.dropdown-menu li:hover {
  color: #ef5350;
}
.nav-top {
  position: relative;
}

.flag-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-icon {
  display: flex;
  align-items: center;
}

.navbar-item {
  text-transform: uppercase;
}
.sb-checkbox {
  display: inline-block;
  font-size: 0;
}

.sb-checkbox__input {
  display: none;
}

.sb-checkbox__input:checked + .sb-checkbox__label:after {
  opacity: 1;
}

.sb-checkbox__label {
  display: inline-block;
  width: 12px;
  height: 12px;
  position: relative;
  cursor: pointer;
}

.sb-checkbox__label:before {
  content: "";
  width: 12px;
  height: 12px;
  border: 2px solid;
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 2px;
}

.sb-checkbox__label:after {
  content: "done";
  font-family: "Material Icons";
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  width: 12px;
  height: 12px;
  display: block;
  border-radius: 2px;
  overflow: hidden;
  text-align: center;
  opacity: 0;
  transition: 0.2s opacity;
}

.sb-checkbox__label--red:before {
  border-color: #ef5350;
}

.sb-checkbox__label--red:after {
  background-color: #ef5350;
  color: #fff;
}
</style>
