@import 'node_modules/argo-ui/src/styles/config';

.page-wrapper {
    .page {
        @media (max-width: map-get($breakpoints, medium)) {
            &--has-toolbar {
                padding-top: 0
            }

            &--has-toolbar &__top-bar {
                height: auto;
                position: initial;

                .top-bar.row > div {
                    max-width: 100%;
                    flex: 0 0 100%;
                    text-align: center;

                    &.top-bar__right-side > div {
                        display: inline-block;
                    }

                    & > div {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: center;

                        button {
                            margin-bottom: 2px
                        }
                    }
                }
            }
        }

        $single-toolbar-height: 50px;
        &--has-toolbar {
            padding-top: $single-toolbar-height;
        }
        &__top-bar {
            height: $single-toolbar-height;
        }
    }
}

.login-logout-button {
    border-radius: 3px;
    color: $argo-color-teal-7;
    padding: 3px;
    cursor: pointer;

    &:focus {
        color: $argo-color-teal-5;
        box-shadow: 0 0 0 .1em $argo-color-teal-5;
    };
    &:hover {
        color: $argo-color-teal-5;
    }
}
