@import "~styles/colors";

scripts-list {
    padding-top: 0.25rem;
    display: flex;
    flex-direction: column;
    cursor: default;

    > script-folder {
        overflow: auto;

        .list-group-item {
            &.script-folder,
            &.script {
                padding: 1px 8px;

                &:hover {
                    background: var(--hover-color);
                }
            }

            &.script-folder {
                &:hover {
                    .script-folder-open-icon {
                        visibility: visible;
                    }
                }
            }

            &.script {
                display: flex;
                flex-direction: row;

                .script-content {
                    flex-grow: 1;
                }

                .script-metadata {
                    display: flex;
                    align-items: center;
                    text-align: right;
                    white-space: nowrap;
                    padding-left: 0.25rem;
                }

                .script-status {
                    display: flex;
                    align-items: center;
                    margin-right: 0.2rem;
                }

                &.is-active {
                    .script-name {
                        font-weight: bold;
                    }
                }

                &.is-open {
                    .script-icon {
                        @extend %text-blue;
                    }
                }

                &.is-dirty .script-dirty-flag {
                    @extend %text-orange;
                }

                &:hover {
                    background: var(--hover-color);
                }
            }

            .script-folder-open-icon {
                visibility: hidden;
            }

            .script-running-indicator {
                height: 0.65rem;
                width: 0.65rem;
            }
        }
    }
}
