@import '../../theme';

@prefix-cls: ~'@{ra-lib-prefix}-layout-logo';

.@{prefix-cls} {
    background: #fff;
    height: 100%;
    display: flex;
    align-items: center;
    transition: @layout-transition-duration cubic-bezier(0.2, 0, 0, 1);
    cursor: pointer;

    &.dark {
        background: @layout-header-background;
        border-bottom: none !important;
    }

    &.dark &-title {
        color: #fff;
    }

    &.no-side {
        border-bottom: 1px solid #e8e8e8;
    }

    &-image {
        margin: 0 12px;
        transition: @layout-transition-duration cubic-bezier(0.2, 0, 0, 1);
    }

    &-title {
        padding: 0 8px 0 0;
        margin: 0;
        font-size: 20px;
        transition: @layout-transition-duration cubic-bezier(0.2, 0, 0, 1);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &.collapsed {
        justify-content: center;

        .@{prefix-cls}-image {
            margin: 0 6px;
        }

        .@{prefix-cls}-title {
            transform: scale(0);
            transform-origin: left;
        }
    }
}