@import "variables.scss";

.react-mde-horizontal-layout {
    height: 100%;
    display: flex;
    flex-direction: column;

    .mde-tabs {
        display: flex;
        align-items: stretch;

        .mde-tab {
            border: none;
            border-left: 1px solid $mde-border-color;
            padding: 10px;
            background: none;
        }

        .mde-tab:hover {
            cursor: pointer;
        }
    }

    .mde-content {
        display: flex;
        height: 100%;

        .mde-text {
            min-width: 50%;
            overflow-y: auto;
            border-radius: 0;
        }

        .mde-preview {
            min-width: 50%;
            border-left: 1px solid $mde-border-color;
            overflow-y: auto;
        }
    }
}