:root {
    --select-icon-size: 20px;
    --select-icon-margin: 1rem;
    --select-text-icon-gap: 0.5rem;
  }
  
  .select {
    position: relative;
  }
  
  .select__input {
    appearance: none;
    border: 0;
    margin: 0;
    font-size: 1rem;
    width: 100%;
    height: 100%;
    padding: 0.5rem calc(var(--select-icon-size) + var(--select-icon-margin) + var(--select-text-icon-gap));
    -webkit-user-select: none;
            user-select: none;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.02), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.025), 0 1px 3px -1px hsla(230, 13%, 9%, 0.2), 0 3.5px 6px hsla(230, 13%, 9%, 0.12);
    border-radius: 15px;
    transition: box-shadow 0.2s;
  }
  
  .select__input:focus  {
    outline: none;
    box-shadow: inset 0 1px 0 hsla(0, 0%, 100%, 0.1), 0 0 0 1px hsla(230, 13%, 9%, 0.02), 0 0.3px 0.4px hsla(230, 13%, 9%, 0.025), 0 1px 3px -1px hsla(230, 13%, 9%, 0.2), 0 3.5px 6px hsla(230, 13%, 9%, 0.12), 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 4px hsl(230, 7%, 23%);
  }

  .select__arrow,
  .select__flag {
    display: inline-block;
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .select__arrow {
    color: inherit;
    right: var(--select-icon-margin);
  }
  
  .select__flag {
    left: var(--select-icon-margin);
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--select-icon-size);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg%3E%3Cpath d='M16 0c-8.8 0-16 7.2-16 16s7.2 16 16 16 16-7.2 16-16-7.2-16-16-16z m11.8 14h-3.8c-0.2-3-0.8-5.8-1.6-8.2 2.8 1.8 4.8 4.8 5.4 8.2z m-11.8 14c-1.2 0-3.6-3.8-4-10h8c-0.4 6.2-2.8 10-4 10z m-4-14c0.4-6.2 2.6-10 4-10s3.6 3.8 4 10h-8z m-2.2-8.2c-1 2.4-1.6 5.2-1.8 8.2h-3.8c0.6-3.4 2.6-6.4 5.6-8.2z m-5.6 12.2h3.8c0.2 3 0.8 5.8 1.6 8.2-2.8-1.8-4.8-4.8-5.4-8.2z m18 8.2c1-2.4 1.4-5.2 1.6-8.2h3.8c-0.4 3.4-2.4 6.4-5.4 8.2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  }
  
  .select:has(option[value="CS"]:checked) .select__flag {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M1,24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V15H1v9Z' fill='%23c62d25'></path><path d='M27,4H5c-2.209,0-4,1.791-4,4v8H31V8c0-2.209-1.791-4-4-4Z' fill='%23fff'></path><path d='M2.316,26.947l13.684-10.947L2.316,5.053c-.803,.732-1.316,1.776-1.316,2.947V24c0,1.172,.513,2.216,1.316,2.947Z' fill='%231e427b'></path><path d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'></path><path d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'></path></svg>");
}

  .select:has(option[value="EN"]:checked) .select__flag {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><rect x='1' y='4' width='30' height='24' rx='4' ry='4' fill='%23071b65'></rect><path d='M5.101,4h-.101c-1.981,0-3.615,1.444-3.933,3.334L26.899,28h.101c1.981,0,3.615-1.444,3.933-3.334L5.101,4Z' fill='%23fff'></path><path d='M22.25,19h-2.5l9.934,7.947c.387-.353,.704-.777,.929-1.257l-8.363-6.691Z' fill='%23b92932'></path><path d='M1.387,6.309l8.363,6.691h2.5L2.316,5.053c-.387,.353-.704,.777-.929,1.257Z' fill='%23b92932'></path><path d='M5,28h.101L30.933,7.334c-.318-1.891-1.952-3.334-3.933-3.334h-.101L1.067,24.666c.318,1.891,1.952,3.334,3.933,3.334Z' fill='%23fff'></path><rect x='13' y='4' width='6' height='24' fill='%23fff'></rect><rect x='1' y='13' width='30' height='6' fill='%23fff'></rect><rect x='14' y='4' width='4' height='24' fill='%23b92932'></rect><rect x='14' y='1' width='4' height='30' transform='translate(32) rotate(90)' fill='%23b92932'></rect><path d='M28.222,4.21l-9.222,7.376v1.414h.75l9.943-7.94c-.419-.384-.918-.671-1.471-.85Z' fill='%23b92932'></path><path d='M2.328,26.957c.414,.374,.904,.656,1.447,.832l9.225-7.38v-1.408h-.75L2.328,26.957Z' fill='%23b92932'></path><path d='M27,4H5c-2.209,0-4,1.791-4,4V24c0,2.209,1.791,4,4,4H27c2.209,0,4-1.791,4-4V8c0-2.209-1.791-4-4-4Zm3,20c0,1.654-1.346,3-3,3H5c-1.654,0-3-1.346-3-3V8c0-1.654,1.346-3,3-3H27c1.654,0,3,1.346,3,3V24Z' opacity='.15'></path><path d='M27,5H5c-1.657,0-3,1.343-3,3v1c0-1.657,1.343-3,3-3H27c1.657,0,3,1.343,3,3v-1c0-1.657-1.343-3-3-3Z' fill='%23fff' opacity='.2'></path></svg>");
  }