.lsdp-wrapper {
    --lsdp-flag-width: 20px;
    --lsdp-flag-height: calc(var(--lsdp-flag-width) * 0.75);
    --lsdp-flag-radius: 0px;
    --lsdp-flag-ratio: initial;
    --lsdp-normal-text-font: initial;
    --lsdp-normal-text-weight: initial;
    --lsdp-normal-text-transform: initial;
    --lsdp-normal-text-decoration: initial;
    --lsdp-normal-text-style: initial;
    --lsdp-normal-text-letter-spacing: initial;
    --lsdp-normal-text-decoration-color: initial;
    --lsdp-normal-text-decoration-style: initial;
    --lsdp-normal-text-color: #333;
    --lsdp-normal-text-size: 16px;
    --lsdp-normal-text-line-height: calc(var(--lsdp-normal-text-size) + 8px);
    --lsdp-hover-text-line-height: calc( var(--lsdp-hover-text-size) + 8px);
    --lsdp-lang-pading-top: 4px;
    --lsdp-lang-pading-right: 10px;
    --lsdp-lang-pading-bottom: 4px;
    --lsdp-lang-pading-left: 10px;
    --lsdp-normal-bg-color: #fff;
    --lsdp-hover-bg-color: #fff;
    --lsdp-hover-text-color: #333;
    --lsdp-hover-text-letter-spacing: initial;
    --lsdp-hover-text-size: 16px;
    --lsdp-hover-bg-mrgn-top: 0px;
    --lsdp-hover-bg-mrgn-bottom: 0px;
    --lsdp-hover-bg-mrgn-left: auto;
    --lsdp-hover-bg-mrgn-right: auto;
    --lsdp-hover-bg-pading-top: 10px;
    --lsdp-hover-bg-pading-bottom: 10px;
    --lsdp-hover-bg-pading-left: 15px;
    --lsdp-hover-bg-pading-right: 15px;
    overflow: hidden;
  
    ul {
      padding: 0px;
  
      li {
        list-style: none;
        display: flex;
  
        a,
        &.lsdp_active_lang a {
          display: flex;
          gap: .5rem;
          align-items: center;
          background-color: var(--lsdp-normal-bg-color);
          padding: var(--lsdp-lang-pading-top) var(--lsdp-lang-pading-right) var(--lsdp-lang-pading-bottom) var(--lsdp-lang-pading-left);
          div:not(.lsdp-lang-image),
          span a {
            color: var(--lsdp-normal-text-color);
            font-family: var(--lsdp-normal-text-font);
            font-weight: var(--lsdp-normal-text-weight);
            font-size: var(--lsdp-normal-text-size);
            line-height: var(--lsdp-normal-text-line-height);
            font-style: var(--lsdp-normal-text-style);
            text-transform: var(--lsdp-normal-text-transform);
            letter-spacing: var(--lsdp-normal-text-letter-spacing);
            text-decoration: var(--lsdp-normal-text-decoration);
            text-decoration-style: var(--lsdp-normal-text-decoration-style);
            text-decoration-color: var(--lsdp-normal-text-decoration-color);
          }
        }
      }
    }
  
    &.horizontal {
      ul {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
      }
    }
  
    &.vertical {
      ul {
        padding-bottom: 1rem;
      }
    }

    &.dropdown {
      position: relative;
      display: inline-flex;
      margin: 0 auto;
      padding: 10px 15px 10px 15px;
      background: var(--lsdp-normal-bg-color);
      cursor: pointer;
      outline: none;
      overflow: visible;
      align-items: center;
  
      &::after {
        content: "";
        width: 0;
        height: 0;
        display: inline-block;
        margin-left: 0.5rem;
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: grey transparent;
      }
  
      span {
        a {
          display: flex;
          gap: .6rem;
          align-items: center;
          flex-wrap: wrap;
        }
      }
      li a{
        padding: 5px 15px;
      }
      ul {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #f5f5f5;
        transition: all 0.3s ease-out;
        list-style: none;
        opacity: 0;
        pointer-events: none;
        padding: 0;
        z-index: 999;
        // overflow-wrap: anywhere;
        display: inline-table;
        width: 100%;
  
        li {
          text-decoration: none;
          display: block;
  
          a {
            color: #333;
            // padding: 5px 15px;
            transition: all 0.3s ease-out;
            white-space: nowrap;
          }
        }
      }
  
      &.active::after,
      &:hover::after {
        border-width: 0 6px 6px 6px;
      }
  
      &.active ul,
      &:hover ul {
        opacity: 1;
        pointer-events: auto;
      }
    }
  
    .lsdp-lang-image {
      width: var(--lsdp-flag-width);
      height: var(--lsdp-flag-height);
      border-radius: var(--lsdp-flag-radius);
      aspect-ratio: var(--lsdp-flag-ratio);
      line-height: 0;
      overflow: hidden;
  
      a {
        line-height: 0;
        width: 100%;
        height: 100%;
        display: block;
      }
  
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
    }
  }