/* Language Switcher Styles */
/* Base Styles */
.mtsi-language-switcher {
font-family: inherit;
line-height: 1.4;
}
.mtsi-language-switcher * {
box-sizing: border-box;
}
/* Common Link Styles */
.mtsi-language-link {
text-decoration: none;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0.5em;
transition: all 0.2s ease;
}
.mtsi-language-link:hover {
text-decoration: none;
opacity: 0.8;
}
.mtsi-current-link {
font-weight: bold;
cursor: default;
}
/* Flag Styles */
.mtsi-flag {
display: inline-block;
width: 1.2em;
height: 0.9em;
background-size: cover;
background-position: center;
border-radius: 2px;
flex-shrink: 0;
}
/* Flag Icons - Using CSS background images */
/* You can replace these with your preferred flag icon method */
.mtsi-flag-us { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); }
.mtsi-flag-es { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjE4IiBmaWxsPSIjRkZEQTAwIi8+CjxyZWN0IHdpZHRoPSIyNCIgaGVpZ2h0PSI0LjUiIGZpbGw9IiNEQTAyMEUiLz4KPHJlY3QgeT0iMTMuNSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjQuNSIgZmlsbD0iI0RBMDIwRSIvPgo8L3N2Zz4K'); }
.mtsi-flag-fr { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjgiIGhlaWdodD0iMTgiIGZpbGw9IiMwMDJBOEYiLz4KPHJlY3QgeD0iOCIgd2lkdGg9IjgiIGhlaWdodD0iMTgiIGZpbGw9IndoaXRlIi8+CjxyZWN0IHg9IjE2IiB3aWR0aD0iOCIgaGVpZ2h0PSIxOCIgZmlsbD0iI0VEMjkzOSIvPgo8L3N2Zz4K'); }
.mtsi-flag-de { background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjI0IiBoZWlnaHQ9IjYiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHk9IjYiIHdpZHRoPSIyNCIgaGVpZ2h0PSI2IiBmaWxsPSIjREQwMDJEIi8+CjxyZWN0IHk9IjEyIiB3aWR0aD0iMjQiIGhlaWdodD0iNiIgZmlsbD0iI0ZGQ0UwMCIvPgo8L3N2Zz4K'); }
.mtsi-flag-hr { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>');}
.mtsi-flag-bs { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); }
.mtsi-flag-sr { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F>'); }
/* Dropdown Styles */
.mtsi-dropdown-switcher {
position: fixed;
display: inline-block;
bottom: 0;
right: 10%;
}
.mtsi-dropdown-trigger {
background: #0e074e;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.5em 1em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5em;
font-size: inherit;
font-family: inherit;
color: inherit;
transition: all 0.2s ease;
min-width: 120px;
justify-content: space-between;
}
.mtsi-dropdown-trigger:hover {
background: #302780;
border-color: #adb5bd;
}
.mtsi-dropdown-trigger:focus {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
.mtsi-dropdown-arrow {
font-size: 0.8em;
transition: transform 0.2s ease;
}
.mtsi-dropdown-trigger[aria-expanded="true"] .mtsi-dropdown-arrow {
transform: rotate(180deg);
}
.mtsi-dropdown-menu {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: white;
border: 1px solid #dee2e6;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
display: none;
list-style: none;
margin: 0;
padding: 0;
margin-top: 2px;
}
.mtsi-dropdown-menu .mtsi-language-item {
border-bottom: 1px solid #f8f9fa;
}
.mtsi-dropdown-menu .mtsi-language-item:last-child {
border-bottom: none;
}
.mtsi-dropdown-menu .mtsi-language-link {
display: flex;
padding: 0.75em 1em;
color: #333;
text-decoration: none;
width: 100%;
align-items: center;
gap: 0.5em;
}
.mtsi-dropdown-menu .mtsi-language-link:hover {
background: #f8f9fa;
color: #0066cc;
}
.mtsi-dropdown-menu .mtsi-current-link {
background: #e3f2fd;
color: #0066cc;
font-weight: bold;
}
/* List Styles */
.mtsi-list-switcher {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
}
.mtsi-list-switcher .mtsi-language-item {
display: inline-flex;
align-items: center;
}
.mtsi-list-switcher .mtsi-language-link {
padding: 0.25em 0.5em;
border-radius: 3px;
transition: all 0.2s ease;
}
.mtsi-list-switcher .mtsi-language-link:hover {
background: #f8f9fa;
}
.mtsi-list-switcher .mtsi-current-link {
background: #e3f2fd;
color: #0066cc;
font-weight: bold;
}
/* Flags Only Style */
.mtsi-flags-only .mtsi-language-link {
padding: 0.5em;
}
.mtsi-flags-only .mtsi-flag {
width: 1.5em;
height: 1.125em;
}
/* Button Styles */
.mtsi-button-switcher {
display: inline-flex;
align-items: center;
gap: 0.5em;
flex-wrap: wrap;
}
.mtsi-language-button {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 4px;
padding: 0.5em 1em;
text-decoration: none;
color: #333;
display: inline-flex;
align-items: center;
gap: 0.5em;
transition: all 0.2s ease;
cursor: pointer;
font-size: inherit;
font-family: inherit;
}
.mtsi-language-button:hover {
background: #e9ecef;
border-color: #adb5bd;
color: #0066cc;
text-decoration: none;
}
.mtsi-current-button {
background: #0066cc;
border-color: #0066cc;
color: white;
cursor: default;
}
.mtsi-current-button:hover {
background: #0066cc;
border-color: #0066cc;
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.mtsi-dropdown-trigger {
min-width: 100px;
font-size: 0.9em;
}
.mtsi-button-switcher {
gap: 0.25em;
}
.mtsi-language-button {
padding: 0.4em 0.8em;
font-size: 0.9em;
}
.mtsi-list-switcher {
gap: 0.25em;
}
}
/* RTL Support */
[dir="rtl"] .mtsi-dropdown-menu {
left: auto;
right: 0;
}
[dir="rtl"] .mtsi-dropdown-arrow {
transform: scaleX(-1);
}
[dir="rtl"] .mtsi-dropdown-trigger[aria-expanded="true"] .mtsi-dropdown-arrow {
transform: scaleX(-1) rotate(180deg);
}
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.mtsi-dropdown-trigger,
.mtsi-language-button {
border-width: 2px;
}
.mtsi-dropdown-menu {
border-width: 2px;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.mtsi-language-link,
.mtsi-dropdown-trigger,
.mtsi-language-button,
.mtsi-dropdown-arrow {
transition: none;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
.mtsi-dropdown-trigger {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.mtsi-dropdown-trigger:hover {
background: #4a5568;
border-color: #718096;
}
.mtsi-dropdown-menu {
background: #2d3748;
border-color: #4a5568;
}
.mtsi-dropdown-menu .mtsi-language-link {
color: #e2e8f0;
}
.mtsi-dropdown-menu .mtsi-language-link:hover {
background: #4a5568;
}
.mtsi-language-button {
background: #2d3748;
border-color: #4a5568;
color: #e2e8f0;
}
.mtsi-language-button:hover {
background: #4a5568;
border-color: #718096;
}
}