@use '../../../styles/flex' as flex;

adf-layout-header .adf-toolbar-container-row {
    color: var(--theme-header-text-color);
    position: relative;
    padding: 0 24px;

    .adf-menu-icon {
        position: relative;
        margin-right: 0;

        .adf-menu-icon-header {
            font-size: 29px;
            padding: 0 5px 0 0;
        }
    }

    .adf-app-logo {
        position: relative;
        height: 28px;
        vertical-align: middle;
        margin-top: -3px;
    }

    .adf-app-title {
        cursor: pointer;
        letter-spacing: -0.3px;
        font-weight: 100;
    }

    .adf-toolbar--spacer {
        flex: 1 1 auto;
    }

    .adf-toolbar-divider {
        margin: 0 5px;

        & > div {
            background-color: var(--adf-theme-background-card-color);
        }
    }

    .adf-header-delimiter {
        height: 24px;
        width: 2px;
        background-color: var(--theme-primary-color-default-contrast);
    }

    .adf-userinfo-container {
        flex-direction: row;
        padding: 0;
    }

    @include flex.layout-bp(lt-sm) {
        .adf-app-logo,
        .adf-app-title {
            display: none;
        }
    }

    .adf-header-icon-button {
        color: inherit;
        border-radius: 50%;

        &:hover {
            color: inherit;
        }

        &:active {
            color: inherit;
        }
    }
}

[dir='rtl'] adf-layout-header .adf-toolbar-container-row {
    .adf-menu-icon {
        margin-right: -11px;
    }

    .adf-app-logo {
        margin-right: 6px;
    }

    .adf-app-title {
        margin-right: 6px;
    }

    .adf-header-delimiter {
        margin-left: 16px;
    }

    .adf-userinfo-container {
        margin-left: 16px;
    }

    .adf-userinfo-name {
        padding-left: 8px;
    }
}

[dir='ltr'] adf-layout-header .adf-toolbar-container-row {
    .adf-menu-icon {
        margin-left: -11px;
    }

    .adf-app-logo {
        margin-left: 6px;
    }

    .adf-app-title {
        margin-left: 6px;
    }

    .adf-header-delimiter {
        margin-right: 16px;
    }

    .adf-userinfo-container {
        margin-right: 8px;
    }

    .adf-userinfo-name {
        padding-right: 8px;
    }
}