// ---------------------------------------------
// Custom styles for TASKS (Taskpaper)
// ---------------------------------------------
// TODO: style notes
// TODO: style bracket matcher
// TODO: bottom-margin for headers

@taskpaper-white: rgb(247, 247, 247);
@taskpaper-black: rgba(0, 0, 0, 0.8);
@taskpaper-gray: rgb(184, 184, 184);
@taskpaper-gray--light: lighten(@taskpaper-gray, 8%);
@taskpaper-gray--dark: rgba(0, 0, 0, 0.7);
@taskpaper-red: rgb(229, 45, 45);
@taskpaper-red--light: rgb(250, 200, 200);
@taskpaper-red--lightest: lighten(@taskpaper-red--light, 5%);
@taskpaper-blue: rgb(17, 116, 178);
@taskpaper-blue--dark: rgb(22, 102, 152);

// Make sure to have light background in Zen mode
[data-zen="true"] atom-pane-container atom-pane .item-views {
    background: @taskpaper-white !important;
}

// A little help for Zen to hide the status bar
[data-zen="true"] status-bar {
    height: 0;
    min-height: 0;
}

// Applying styles only to taskpaper files
atom-text-editor[data-grammar="source todo"] {
    background-color: @taskpaper-white;
    font-size: 120%;

    .status-bar {
        display: none;
    }

    .indent-guide-improved {
        box-shadow: inset 1px 0 0 @taskpaper-red--light;
    }

    &::shadow {
        // Styling notes
        // .todo {
        //     color: @taskpaper-gray--dark;
        //     font-style: italic;
        // }
        .selection .region {
          background-color: @taskpaper-red--lightest;
        }
        .cursor {
            border-left: 3px solid @taskpaper-red;
        }
        .cursor-line {
            // background-color: lighten(@taskpaper-red--light, 7%);
            background-color: transparent;
        }
        .bracket-matcher{
            border-color: @taskpaper-red;
            background-color: transparent;
        }

        .tasks {
            &.text {
                color: @taskpaper-black;
            }
            &.header {
                color: @taskpaper-black;
                font-size: 115%;
                font-weight: bold;

                &::before {
                    color: @taskpaper-red;
                    content: '●';
                    padding-right: 1%;
                    font-size: 80%;
                    vertical-align: middle;
                }
            }
            &.marker {
                color: @taskpaper-red;
            }
            &.attribute {
                color: @taskpaper-blue--dark;
            }

            &.done,
            &.cancelled {
                &.text {
                    color: @taskpaper-gray--light;
                }
                .marker {
                    color: @taskpaper-red--light;
                }
                .attribute {
                    color: @taskpaper-gray--light;
                }
            }
        }
    }
}