@import '../../styles/colors', '../../styles/fonts', '../../styles/fontSizeCalculator';

.ui.title-bar {
    align-items: center;
    background-color: color(backgroundColor);
    display: flex;
    height: 55px;
    justify-content: flex-start;
    margin: 0 -11px;
    padding: 0 11px;
    position: relative;
    z-index: 1;
    &::after {
        background: linear-gradient(to bottom, rgba(0, 0, 0, .26), transparent);
        bottom: -3px;
        content: '';
        height: 3px;
        left: 0;
        position: absolute;
        width: 100%;
    }
    .ui.header {
        flex: 1 1 auto;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        &.header-subheader .subheader { color: color(colorStatic); font-weight: $fontWeightSemiBold; }
    }
    .title-bar-children { flex: none; text-align: right; }
}

@media only screen and (min-width: 768px) {
    .ui.title-bar { height: 70px; margin: 0 -22px; padding: 0 22px; }
}