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

.ui.drawer--title_bar {
    background-color: color(backgroundColor);
    border-bottom: 1px solid color(borderColorSecondary);
    height: $drawer-title-bar-height-mobile;
    left: 0;
    position: fixed;
    top: 0;
    transform: translateZ(0);
    width: 100%;
    z-index: $drawer-zindex;
    > div {
        height: $drawer-title-bar-height-mobile;
        position: relative;
    }
    .title {
        display: block;
        left: 0;
        margin: 0;
        overflow: hidden;
        padding: 0 88px 0 11px;
        position: absolute;
        text-overflow: ellipsis;
        top: 50%;
        transform: translateY(-50%);
        white-space: nowrap;
        width: 100%;
    }
    .close-button {
        align-items: center;
        display: flex;
        height: 44px;
        justify-content: flex-end;
        position: absolute;
        right: 11px;
        top: 50%;
        transform: translateY(-50%);
        width: 44px;
    }
}

@media only screen and (min-width: 768px) {
    .ui.drawer--title_bar {
        height: $drawer-title-bar-height;
        > div {
            height: $drawer-title-bar-height;
        }
        .title {
            padding: 0 88px 0 22px;
        }
        .close-button {
            right: 22px;
        }
    }
}