@use "../mixins" as *;
@use "../media" as *;

.logo {
    @include flex-center(flex-start, true);

    column-gap: 0.5em;
    user-select: none;

    &__icon {
        @include square(40px);

        &--header {
            @include mobile-s {
                max-width: 35px;
            }
        }
    }

    &__text {
        font-weight: 600;
        text-overflow: ellipsis;
        font-size: 26px;
        transition: color var(--transition-duration-03);

        &--header {
            color: var(--color-logo);

            @include mobile-s {
                font-size: 20px;
            }
        }

        &--footer {
            color: var(--color-stable-light);
        }
    }
}