.th-lang-flag {
    position: relative;
    display: inline-flex;
    width: 23px;
    height: 23px;
    min-width: 23px;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, .14);
    border-radius: 999px;
    background-color: #eef2f7;
    background-position: center;
    background-size: cover;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    color: transparent;
    font-size: 0;
    line-height: 1;
}

.th-lang-flag-ro { background-image: linear-gradient(90deg, #002b7f 0 33.333%, #fcd116 33.333% 66.666%, #ce1126 66.666% 100%); }
.th-lang-flag-fr { background-image: linear-gradient(90deg, #0055a4 0 33.333%, #fff 33.333% 66.666%, #ef4135 66.666% 100%); }
.th-lang-flag-de { background-image: linear-gradient(180deg, #000 0 33.333%, #dd0000 33.333% 66.666%, #ffce00 66.666% 100%); }
.th-lang-flag-es { background-image: linear-gradient(180deg, #aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75% 100%); }
.th-lang-flag-it { background-image: linear-gradient(90deg, #009246 0 33.333%, #fff 33.333% 66.666%, #ce2b37 66.666% 100%); }
.th-lang-flag-pt { background-image: linear-gradient(90deg, #046a38 0 42%, #da291c 42% 100%); }
.th-lang-flag-ru { background-image: linear-gradient(180deg, #fff 0 33.333%, #0039a6 33.333% 66.666%, #d52b1e 66.666% 100%); }
.th-lang-flag-hu { background-image: linear-gradient(180deg, #ce2939 0 33.333%, #fff 33.333% 66.666%, #477050 66.666% 100%); }
.th-lang-flag-gr { background-image: repeating-linear-gradient(180deg, #0d5eaf 0 2.55px, #fff 2.55px 5.1px); }
.th-lang-flag-ar { background-image: linear-gradient(90deg, #000 0 24%, #fff 24% 100%); }
.th-lang-flag-sa { background-color: #006c35; }
.th-lang-flag-tr { background-color: #e30a17; }
.th-lang-flag-hi,
.th-lang-flag-in { background-image: linear-gradient(180deg, #ff9933 0 33.333%, #fff 33.333% 66.666%, #138808 66.666% 100%); }

.th-lang-flag-gb {
    background-color: #012169;
    background-image:
        linear-gradient(0deg, transparent 40%, #fff 40% 60%, transparent 60%),
        linear-gradient(90deg, transparent 40%, #fff 40% 60%, transparent 60%),
        linear-gradient(0deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
        linear-gradient(90deg, transparent 46%, #c8102e 46% 54%, transparent 54%),
        linear-gradient(33deg, transparent 44%, #fff 44% 50%, #c8102e 50% 54%, #fff 54% 60%, transparent 60%),
        linear-gradient(-33deg, transparent 44%, #fff 44% 50%, #c8102e 50% 54%, #fff 54% 60%, transparent 60%);
}

.th-lang-flag-tr::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    box-shadow: -3px 0 0 2px #fff;
}

.th-lang-flag-hi::before,
.th-lang-flag-in::before {
    content: "";
    width: 5px;
    height: 5px;
    border: 1px solid #1a4fa3;
    border-radius: 999px;
    background: #1a4fa3;
}

.th-lang-flag-sa::before {
    content: "";
    width: 12px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
}
