.layout-topbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    width: 100%;
    height: 4rem;
    transition: width $transitionDuration;
    display: flex;

    ul {
        @include reset-list;
    }

    .layout-topbar-left {
        display: flex;
        align-items: center;
        height: 100%;
        position: relative;

        .layout-topbar-logo {
            width: 17rem;
            height: 100%;
            padding-right: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .layout-menu-button {
            position: absolute;
            top: 50%;
            left: 15.75rem;
            width: 2.5rem;
            height: 2.5rem;
            margin-top: -1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            border-radius: 50%;

            i {
                transition: transform $transitionDuration;
            }
        }

        .layout-topbar-mobile-button {
            display: none;
            align-items: center;
            padding: 0 .8rem;
            margin: 0 .5rem 0 auto;
            border-radius: 50%;
            height: 3.2rem;
            cursor: pointer;
        }
    }

    .layout-topbar-right {
        display: flex;
        flex-grow: 1;
        align-items: center;
        padding-left: 2rem;
        height: 100%;

        .layout-topbar-actions-left {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .layout-topbar-actions-right {
            height: 100%;
            margin-left: auto;

            .layout-topbar-items {
                display: flex;
                flex-direction: row;
                justify-content: center;
                height: 100%;

                .layout-topbar-item {
                    display: flex;
                    align-items: center;
                    position: relative;

                    .layout-topbar-action {
                        user-select: none;
                        padding: 0 .8rem;
                        margin: 0 .4rem;
                        border-radius: 4px;
                        height: 3.2rem;
                        min-width: 3.2rem;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                    }

                    .layout-topbar-action-panel {
                        position: absolute;
                        top: 4rem;
                        right: 0;
                        z-index: 1000;
                        min-width: 25rem;
                        padding: 1rem 0;

                        .layout-topbar-action-item {
                            cursor: pointer;
                            padding: 1rem;
                        }
                    }

                    &.layout-search-item {
                        .layout-search-panel {
                            height: 4rem;
                            width: 100%;
                            position: fixed;
                            top: 0;
                            left: 0;
                            z-index: 1000;

                            input {
                                border-radius: 0;
                                border: 0 none;

                                &:focus {
                                    outline: 0 none;
                                    box-shadow: none;
                                }
                            }

                            i {
                                font-weight: bold;
                            }

                            .ui-inputgroup-addon {
                                border: 0 none;
                            }

                            .ui-inputgroup-addon:first-child,
                            .ui-inputgroup button:first-child,
                            .ui-inputgroup input:first-child {
                                border-top-left-radius: 0;
                                border-bottom-left-radius: 0;
                            }

                            .ui-inputgroup-addon:last-child,
                            .ui-inputgroup button:last-child,
                            .ui-inputgroup input:last-child {
                                border-top-right-radius: 0;
                                border-bottom-right-radius: 0;
                            }
                        }
                    }
                }
            }
        }
    }
}
