/*
 * 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: relative;
    display: inline-block;

    & .locale-switcher__button {
      display: flex;
      align-items: center;
      gap: var(--space-2xs);
      padding: var(--space-xs) var(--space-s);
      background: transparent;
      border: 1px solid color-mix(in oklab, var(--color-text) 15%, transparent);
      border-radius: var(--radius-s);
      color: var(--color-text);
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: var(--size-step-0);
      font-weight: 600;
      transition: all 0.2s ease;

      &:hover {
        background: color-mix(in oklab, var(--color-text) 5%, transparent);
        border-color: var(--color-primary);
      }

      &[aria-expanded="true"] {
        border-color: var(--color-primary);
        background: color-mix(in oklab, var(--color-text) 5%, transparent);

        & .locale-switcher__icon {
          transform: rotate(180deg);
        }
      }
    }

    & .locale-switcher__icon {
      color: var(--color-primary);
      transition: transform 0.2s ease;
    }

    & .locale-switcher__list {
      position: absolute;
      top: calc(100% + 0.5rem);
      right: 0;
      background: var(--color-surface);
      border: 1px solid color-mix(in oklab, var(--color-text) 15%, transparent);
      border-radius: var(--radius-s);
      box-shadow: var(--shadow-m);
      list-style: none;
      padding: var(--space-2xs) 0;
      min-width: 100px;
      z-index: 100;
      animation: fadeIn 0.2s ease-out;
    }

    & .locale-switcher__item {
      &:not(:last-child) {
        border-bottom: 1px solid color-mix(in oklab, var(--color-text) 5%, transparent);
      }
    }

    & .locale-switcher__link {
      display: block;
      padding: var(--space-xs) var(--space-s);
      text-decoration: none;
      color: var(--color-text);
      font-size: var(--size-step-0);
      text-align: center;
      transition: all 0.2s ease;

      &:hover {
        background: color-mix(in oklab, var(--color-primary) 10%, transparent);
        color: var(--color-primary);
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}