@import "../../styles/modules/importAll";

.Header {
    height: 4em;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    border-bottom: 0.1rem solid $lightBlueGrey;
    display: flex;

    .backButton {
        cursor: pointer;
        background-color: white;
        width: 4rem;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;

        i {
            color: $black;
            font-size: 1.5rem;
            text-decoration: none;
            border: 0;
        }
    }

    .content {
        background-color: white;
        flex-grow: 1;
        display: flex;
    }

    .primary-actions,
    .actions {
        text-align: right;
        display: inline-block;
        height: 100%;
        vertical-align: top;
        padding: 0.5rem;
        line-height: 3rem;
        flex-shrink: 1;

        .primaryButton {
            text-transform: uppercase;
            color: $lumenGreen;
            border: 0.1rem solid $lumenGreen;

            &:hover,
            &:active {
                background: $lumenGreen;
                color: white;
            }

            &.disabled {
                color: $midGrey;
                border-color: $midGrey;
                
                &:hover, &:active {
                    color: $midGrey;
                    background: inherit;
                }
            }
        }

        ul {
            li {
                display: inline-block;
                position: relative;

                .LoadingIndicator {
                    margin-right: 10px;
                }
            }
        }
    }
    
    .primary-actions {
        margin-left: 20px;
    }

    ul,
    ol {
        list-style: none;

        li {
            display: inline-block;
        }
    }
}


@media print {
    .Header {
        width: 100%;

        .backButton,
        .primary-actions,
        .actions,
        .saveStatus {
            display: none !important;
        }

        .content {
            &,
            * {
                width: 100%;
            }
        }
    }
}