@use '../../shared/assets/styles/adaptive' as adaptive;
@use '../../shared/assets/styles/fonts' as fonts;
@use '../../shared/assets/styles/theme' as theme;

$adaptive: (

);

.navbar {
    display: flex;
    justify-content: center;
    background-color: var(--secondary-gray);
    border-radius: 16px;
    margin: 16px;

    .container {
        padding: 15px;
        @include adaptive.container;

        .logo {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: end;
            gap: 8px;
            color: var(--primary-black);

            .title {
                cursor: pointer;
                margin: 0;
                transition: 0.3s ease;
                @include fonts.urbanist-font(36px, 600);

                &:hover { @include theme.hoverLink(); }
            }
        }

        .version {
            background-color: var(--primary-white);
            color: var(--primary-black);
            border-radius: 25px;
            padding: 4px 16px;
            @include fonts.urbanist-font(20px, 500);
            @include theme.shadows();
        }
    }
}