@include exports("gantt/layout") {

    $row-height: #{$line-height-em} + #{2 * $cell-padding} + #{$grid-cell-horizontal-border-width};

    .k-gantt {
        @include use-background-clip();
        border-width: $gantt-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $gantt-font-family;
        font-size: $gantt-font-size;
        line-height: $gantt-line-height;
        position: relative;
        white-space: nowrap;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        // other
        td {
            overflow: hidden;
            white-space: nowrap;
            vertical-align: top;
        }
        .k-grid-header tr {
            height: calc( #{$line-height-em} + #{$grid-header-padding-y * 2} + 1px );
        }
        .k-grid-header .k-header {
            position: static;
        }
        .k-grid-content tr {
            height: calc( #{$line-height-em} + #{$grid-cell-padding-y * 2} + #{$grid-cell-horizontal-border-width} );
        }


        // Layout
        .k-gantt-layout {
            white-space: normal;
            vertical-align: top;
            display: inline-block;
        }


        // Splitbar
        .k-splitbar {
            position: relative;
            display: inline-flex;
        }

    }


    // Toolbar
    .k-gantt-toolbar {
        padding: $toolbar-padding-y $toolbar-padding-x;
        border-width: 0 0 1px;
        border-style: solid;
        border-color: inherit;
        line-height: $toolbar-line-height;

        .k-gantt-layout + & {
            border-width: 1px 0 0;
        }

        .k-gantt-toggle {
            margin-right: .5em;
            display: none;
            float: left;
        }
    }
    .k-gantt-actions {
        float: left;

        .k-button + .k-button {
            margin-left: $toolbar-padding-x;
        }
    }
    .k-gantt-views {
        float: right;
        display: inline-flex;
    }

    @media only screen and (max-width: 480px) {
        .k-gantt-toolbar {
            .k-gantt-toggle {
                display: inline-flex;
            }
            .k-gantt-pdf,
            .k-gantt-create {
                padding: $button-padding-y;
                width: $button-calc-size;
                height: $button-calc-size;

                .k-icon {
                    margin: 0;
                }
                span + span {
                    display: none;
                }
            }
        }
    }


    // View switcher
    .k-gantt-views {
        display: flex;
        flex-direction: row;
        align-items: center;

        li {
            border-width: $button-border-width;
            border-style: solid;
            position: relative;
            z-index: 1;
        }
        li + li {
            margin-left: -$button-border-width;
        }
        li:first-child { @include border-radius(); }
        li:first-child + li { @include border-left-radius-only(); }
        li:last-child { @include border-right-radius-only(); }

        .k-state-hover,
        .k-state-selected {
            z-index: 2;
        }
        &.k-state-expanded {
            li {
                @include border-radius( 0 );
                margin: 0;
            }
            li + li { margin-top: -1px; }
            li:first-child { @include border-top-radius-only(); }
            li:first-child + li { @include border-radius( 0 ) }
            li:last-child { @include border-bottom-radius-only(); }
        }


        .k-link {
            padding: $button-padding-y $button-padding-x;
            box-sizing: border-box;
            color: inherit;
            text-decoration: none;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: center;
            justify-content: center;
        }

        .k-current-view { display: none; }
        .k-current-view .k-link::after {
            content: "";
            margin: 0 0 0 1ex;
            border: .25em solid transparent;
            border-top: .5em solid currentColor;
            border-bottom-width: 0;
            display: inline-block;
        }
    }
    @media (max-width: 1024px) {
        ul.k-gantt-views {
            flex-direction: column;
            align-items: stretch;
            position: absolute;
            top: $toolbar-padding-y;
            right: $toolbar-padding-x;
            z-index: 1000;

            li { display: none; }
            .k-current-view { display: block; }


            &.k-state-expanded {
                li { display: block; }
            }
        }
    }


    // Treelist
    .k-gantt-treelist {

        .k-treelist {
            height: 100%;
            border-width: 0;
        }
        .k-grid-header {
            padding: 0 !important; // sass-lint:disable-line no-important
        }
        .k-grid-header tr {
            height: calc( #{$line-height-em * 2} + #{$grid-header-padding-y * 4} + 2px );
            vertical-align: bottom;
        }
        .k-grid-content {
            overflow: hidden;
            overflow-x: scroll;
        }
        .k-grid-content td {
            vertical-align: middle;
        }
    }


    // Timeline
    .k-gantt-timeline {

        .k-timeline {
            height: 100%;
            border-width: 0;
        }
        .k-grid-header {}
        .k-grid-content {
            overflow-x: scroll;
        }
        .k-header {
            padding: $grid-header-padding-y $grid-header-padding-x;
            border-width: 0 0 1px $grid-cell-vertical-border-width;
            white-space: nowrap;
        }

    }


    // Tables
    .k-gantt-tables {
        position: relative;
        border-color: inherit;
    }
    .k-gantt-rows,
    .k-gantt-columns {
        border-color: inherit;
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
    }
    .k-gantt-rows {}


    // Deps
    .k-gantt-dependencies {
        opacity: .7;
        position: absolute;
        top: 0;
        left: 0;

        // Arrows
        .k-arrow-e,
        .k-arrow-w {
            width: 0;
            height: 0;
            border: 5px solid transparent;
            position: absolute;
            top: -4px;
        }
        .k-arrow-e {
            border-left-color: currentColor;
            right: -6px;
        }
        .k-arrow-w {
            border-right-color: currentColor;
            left: -6px;
        }
    }

    // Dependency Lines
    .k-gantt-line {
        background-color: currentColor;
        border-color: currentColor;
        position: absolute;
    }
    .k-gantt-line.k-state-selected {
        z-index: 3;
    }

    .k-gantt-line-h {
        height: $gantt-line-size;
    }

    .k-gantt-line-v {
        width: $gantt-line-size;
    }

    .k-gantt-dependency-hint {
        z-index: 4;
    }


    // Tasks
    .k-gantt-tasks {
        position: relative;

        td {
            padding: 0;
            border-width: 0;
            position: relative;
            vertical-align: middle;
        }
        td::after { content: "\a0"; }
    }
    .k-task-wrap {
        margin: 0 -21px;
        padding: 5px 21px;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .k-task-wrap.k-drag-hint {
        position: absolute;
    }
    .k-task {
        position: relative;
        flex: 1 1 auto;
    }
    .k-task-dot {
        width: 16px;
        height: 16px;
        line-height: 1;
        cursor: pointer;
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
    .k-task-wrap:hover .k-task-dot,
    .k-task-wrap.k-origin .k-task-dot {
        display: block;
    }
    .k-task-dot::before {
        content: "";
        width: 8px;
        height: 8px;
        border-width: 0;
        border-style: solid;
        border-radius: 100%;
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .k-task-dot:hover::before,
    .k-task-dot.k-state-hover::before {
        border-width: 1px;
    }
    .k-task-start { left: 0; }
    .k-task-end { right: 0; }
    .k-task-draghandle {
        margin-left: 16px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-width: 0;
        border-bottom-color: inherit;
        position: absolute;
        bottom: 0;
        // display: none;
        cursor: e-resize;
        visibility: hidden;
    }
    .k-task-wrap:hover .k-task-draghandle {
        visibility: visible;
    }


    // Milestone
    .k-milestone-wrap {
        margin: 0 -2em;
    }
    .k-task-milestone {
        width: 1em;
        height: 1em;
        border-width: 1px;
        border-style: solid;
        transform: rotate(45deg);
    }


    // Summary
    .k-summary-wrap {}
    .k-task-summary {
        height: 10px;
        display: inline-block;
        vertical-align: top;
    }
    .k-task-summary,
    .k-task-summary-complete {
        background-color: currentColor;

        &::before,
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 8px solid transparent;
            position: absolute;
            top: 0;
            display: none;
        }

        &::before {
            border-left-color: currentColor;
            left: 0;
        }
        &::after {
            border-right-color: currentColor;
            right: 0;
        }
    }
    .k-task-summary-complete {
        height: 10px;
        position: relative;
        z-index: 2;
    }
    .k-task-summary-progress {
        height: 15px;
        overflow: hidden;
    }


    // Single task
    .k-single-wrap {}
    .k-task-single {
        @include border-radius();
        border-width: $gantt-task-border-width;
        border-style: solid;
        cursor: default;

        .k-resize-handle {
            opacity: .5;
            z-index: 2;
            visibility: hidden;
        }
        .k-resize-handle::before {
            position: absolute;
            top: 2px;
            bottom: 2px;
        }
        .k-resize-w { left: 0; }
        .k-resize-w::before {
            left: 2px;
            border-left-width: 1px;
        }
        .k-resize-e { right: 0; }
        .k-resize-e::before {
            right: 2px;
            border-left-width: 1px;
        }

        &:hover .k-resize-handle,
        &:hover .k-task-actions {
            visibility: visible;
        }
    }
    .k-task-complete {
        @include border-radius();
        width: 20%;
        position: absolute;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
    }
    .k-task-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .k-task-template {
        padding: $gantt-task-template-padding;
        line-height: normal;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .k-task-actions {
        padding: $padding-y-sm;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        visibility: hidden;
    }
    .k-task-actions > .k-link {
        display: inline-flex;
    }

    .k-resources-wrap {
        position: absolute;
        display: inline-block;
        z-index: 2;
        margin-left: 20px;
        margin-top: -2px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .k-resource {
            margin: 0 5px;
        }
    }


    // Task tooltip
    .k-task-details {
        padding: $padding-y $padding-x;

        strong {
            font-size: $font-size-lg;
            font-weight: normal;
            display: block;
        }
        .k-task-pct {
            font-size: $icon-size-lg;
        }
        ul {
            line-height: normal;
        }
    }

}

@include exports("gantt/export") {

    .k-pdf-export-shadow {
        .k-gantt {
            float: left;
        }

        .k-gantt,
        .k-gantt-timeline,
        .k-gantt-dependencies {
            width: auto !important; // sass-lint:disable-line no-important
            height: auto !important; // sass-lint:disable-line no-important
            overflow: visible !important; // sass-lint:disable-line no-important
        }

        .k-gantt-treelist .k-treelist {
            display: block;
        }

        .k-gantt-layout.k-splitbar {
            display: none;
        }
    }

}


@include exports("gantt-edit-form/layout") {


    .k-gantt-edit-form {}

    .k-gantt-edit-form .k-edit-buttons {}
    .k-gantt-edit-form .k-gantt-update {}
    .k-gantt-edit-form .k-gantt-cancel {}
    .k-gantt-edit-form .k-gantt-delete {
        float: left;
    }

}


@include exports("gantt/rtl") {

    .k-rtl {

        .k-gantt-views {
            float: left;

            li:first-child + li { @include border-right-radius-only(); }
            li:last-child { @include border-left-radius-only(); }
        }

        .k-gantt-actions {
            float: right;

            .k-button + .k-button {
                margin-left: 0;
                margin-right: $toolbar-padding-x;
            }
        }

        .k-gantt-rows,
        .k-gantt-columns {
            left: auto;
            right: 0;
        }

        .k-task-wrap:not(.k-milestone-wrap) {
            margin: 0 -26px;
        }

        .k-gantt-timeline {

            .k-gantt-tasks tbody {
                text-align: left;
            }
            .k-header {
                border-width: 0 $grid-cell-vertical-border-width 1px 0;
            }
            .k-header:first-child {
                border-right-width: 0;
            }

            .k-task-start {
                left: auto;
                right: 0;
            }

            .k-task-end {
                right: auto;
                left: 0;
            }
        }

        .k-task-content {
            text-align: right;
        }

        .k-task-complete {
            left: auto;
            right: 0;
        }

        .k-task-draghandle {
            margin-left: 0;
            margin-right: 16px;
        }

        .k-gantt-dependencies {
            left: auto;
            right: 0;
        }

        .k-gantt-delete {
            float: right;
        }
    }
}