/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for LocaleSwitcher component */
@layer components {
    .locale-switcher {
        position: fixed;
        bottom: var(--space-m, 1rem);
        right: var(--space-m, 1rem);
        z-index: 1000;
        font-family: var(--font-base, sans-serif);

        & .locale-switcher__button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            background: var(--color-surface, #ffffff);
            color: var(--color-text, #333333);
            border: 1px solid var(--color-border, #e2e8f0);
            border-radius: 9999px;
            padding: 0.5rem 1rem;
            cursor: pointer;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: all 0.2s ease;
            font-weight: 600;

            &:hover {
                background: var(--color-surface-hover, #f8fafc);
            }

            &[aria-expanded="true"] {
                & .locale-switcher__icon {
                    transform: rotate(180deg);
                }
            }
        }

        & .locale-switcher__icon {
            transition: transform 0.2s ease;
        }

        & .locale-switcher__list {
            position: absolute;
            bottom: calc(100% + 0.5rem);
            right: 0;
            background: var(--color-surface, #ffffff);
            border: 1px solid var(--color-border, #e2e8f0);
            border-radius: 0.5rem;
            list-style: none;
            padding: 0.5rem 0;
            margin: 0;
            min-width: 100px;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            
            &[hidden] {
                display: none;
            }
        }

        & .locale-switcher__item {
            margin: 0;
        }

        & .locale-switcher__link {
            display: block;
            padding: 0.5rem 1rem;
            color: var(--color-text, #333333);
            text-decoration: none;
            transition: background 0.2s ease;

            &:hover {
                background: var(--color-surface-hover, #f8fafc);
            }
        }

        &[data-variant="dark"] {
            & .locale-switcher__button {
                background: var(--color-dark, #1a202c);
                color: var(--color-white, #ffffff);
                border-color: var(--color-dark-border, #2d3748);

                &:hover {
                    background: var(--color-dark-hover, #2d3748);
                }
            }

            & .locale-switcher__list {
                background: var(--color-dark, #1a202c);
                border-color: var(--color-dark-border, #2d3748);
            }

            & .locale-switcher__link {
                color: var(--color-white, #ffffff);

                &:hover {
                    background: var(--color-dark-hover, #2d3748);
                }
            }
        }
    }
}