/**
 * Multilingual Resource Language Switcher Styles
 * Uses CSS custom properties for easy theme customization
 */

:root {
    /* Color variables - override these in your theme */
    --mr-switcher-bg-color: #b22029;
    --mr-switcher-text-color: #ffffff;
    --mr-switcher-hover-bg: #8f1a21;
    --mr-switcher-active-bg: #6d1419;
    --mr-switcher-border-color: transparent;

    /* Spacing variables */
    --mr-switcher-padding: 10px 20px;
    --mr-switcher-margin: 5px;
    --mr-switcher-bottom-spacing: 10px;

    /* Typography variables */
    --mr-switcher-font-size: 14px;
    --mr-switcher-font-weight: 400;
    --mr-switcher-line-height: 1.5;

    /* Border variables */
    --mr-switcher-border-radius: 12px;
    --mr-switcher-border-width: 0;

    /* Transition */
    --mr-switcher-transition: all 0.2s ease-in-out;
}

/* Main container */
#mr_language_switcher {
    padding-bottom: var(--mr-switcher-bottom-spacing);
    display: flex;
    flex-wrap: wrap;
    gap: var(--mr-switcher-margin);
    align-items: center;
}

/* Language button/link base styles */
.mr-lang-btn,
#mr_language_switcher button,
#mr_language_switcher a,
#mr_language_switcher span {
    background-color: var(--mr-switcher-bg-color);
    color: var(--mr-switcher-text-color);
    border: var(--mr-switcher-border-width) solid var(--mr-switcher-border-color);
    border-radius: var(--mr-switcher-border-radius);
    padding: var(--mr-switcher-padding);
    margin: 0;
    font-size: var(--mr-switcher-font-size);
    font-weight: var(--mr-switcher-font-weight);
    line-height: var(--mr-switcher-line-height);
    cursor: pointer;
    transition: var(--mr-switcher-transition);
    text-decoration: none;
    display: inline-block;
}

/* Hover state */
.mr-lang-btn:hover,
#mr_language_switcher button:hover {
    background-color: var(--mr-switcher-hover-bg);
}

/* Active/selected state */
.mr-lang-btn-active,
#mr_language_switcher button.mr-lang-btn-active {
    background-color: var(--mr-switcher-active-bg);
    font-weight: 600;
}

/* Focus state for accessibility */
.mr-lang-btn:focus,
#mr_language_switcher button:focus {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Disabled state */
.mr-lang-btn:disabled,
#mr_language_switcher button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #mr_language_switcher {
        justify-content: center;
    }

    .mr-lang-btn,
    #mr_language_switcher button {
        font-size: 13px;
        padding: 8px 16px;
    }
}