@import (reference) "../flex";
@import (reference) "../const";
@import (reference) "../common/script/Script";

@import (reference) '~@atlaskit/util-shared-styles/src/borders';


.ScriptList {
    > .DraggableScript {
        margin: 4px;

        &:not(:first-child) {
            margin-top: 10px;
        }
    }
}

.scriptDirectory {
    //margin: 2px;
}

.scriptDirectoryTitle {
    .scriptTitle();
    .flex-row;

    border-radius: @ak-border-radius;
    margin: 0 11px 0 3px;
    transition: background-color .25s;

    &:hover {
        background-color: @ak-color-N20;
    }

    h3 {
        display: block;
        padding-right: 4px;
    }
}

.scriptDirectoryChildren {
    margin-left: 5px;
    padding-left: 2px;
    border-left: 2px solid transparent;

    &.open {
        border-color: @border-color;
    }

    > .ScriptList > .scriptRow:first-child {
        margin-top: 5px;
    }
}

.scriptDropArea {
    border-radius: @ak-border-radius;

    .dragging & {
        background-color: #f1f2f6;
        border-color: #d8d9dd;
    }

    &.draggingOver {
        background-color: #eeeff3;
        border-color: #cacbcf;
    }

    border: 3px dashed transparent;;
    min-height: 10px;

    transition: all .2s ease-in;
}
