// Copyright (c) 2017-2025, CKSource Holding sp. z o.o. All rights reserved.
// For licensing, see LICENSE.md.

@use 'helpers/color';
@use 'helpers/font';
@use 'helpers/spacing';

.code-switcher {
    margin-bottom: spacing.u-spacing( -1 );
    padding-top: 4px;
    border-radius: 4px;

    background-color: color.u-color( 'snippet-background' );

    pre.highlight[class*=language-] {
        margin: 0;
    }

    &__toolbar {
        display: flex;
        align-items: flex-start;
        gap: 16px;

        height: 40px;
        margin: 0px 4px;
        padding: 4px 12px;
        border-radius: 2px;

        background-color: color.u-color( 'background-gray' );
    }

    &__button {
        display: flex;
        align-items: center;
        gap: 4px;

        padding: 2px;
        border: none;

        background-color: transparent;

        font-size: font.u-font-size( 0 );
        font-weight: 500;

        color: color.u-color( 'text-invert-gray' );

        cursor: pointer;

        transition: 150ms ease color;

        &:hover {
            color: color.u-color( 'text-invert' );
        }

        &--active {
            border-bottom: 2px solid color.u-color( 'text-invert' );

            color: color.u-color( 'text-invert' );
        }
    }
}
