@layer components {
    .settings-panel {
        position: fixed;
        top: 24rem;
        right: var(--spacing-6);
        z-index: 1000000;

        display: flex;
        flex-direction: column;
        gap: var(--spacing-4);
        padding: var(--spacing-2);
        border-radius: var(--radius-md);
        background-color: var(--color-surface);
        box-shadow: var(--shadow);
    }

    @media (max-width: 900px) {
        .settings-panel {
            display: none;
        }
    }

    .dropdown {
        position: relative;

        img {
            height: 1.5rem;
        }
    }

    .dropdown-options {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--color-surface-2);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-4);
        border-radius: var(--radius-md);
        flex-direction: column;
        z-index: 1000;
        gap: var(--spacing-2);
    }

    .dropdown:hover .dropdown-options {
        display: flex;
    }

    .dropdown-option {
        width: max-content;
        background: none;
        border: none;
        display: flex;
        flex-direction: row;
        gap: var(--spacing-4);
        white-space: nowrap;

        .option-image {
            height: 1.5rem;
        }
        .option-label {
            white-space: nowrap;
        }

        &.active {
            color: var(--color-primary);
        }
        &:hover {
            text-decoration: none;
            color: var(--color-primary-hover);
        }
    }

    .locale-code {
        text-transform: uppercase;
        color: var(--color-text-secondary);
    }

    .responsive-icon {
        rect,
        path {
            fill: var(--color-text-secondary) !important;
        }
    }
}