toggle-corp/react-store

@import '../../../stylesheets/utils';


.horizontal {
    display: flex;
    flex-wrap: wrap;
}

.tree-node {
    background-color: var(--color-foreground);

    .drag-handle {
        cursor: move;
        padding: var(--spacing-extra-small) var(--spacing-medium);
        color: var(--color-text-label);
    }

    .parent-node {
        display: flex;
        align-items: center;
        padding: var(--spacing-small);


        .checkbox {
            margin-right: var(--spacing-small);
            background-color: transparent;
            padding: var(--spacing-extra-small);
            color: var(--color-accent);
            font-size: var(--font-size-medium-alt);
        }

        .node-title {
            background-color: transparent;
            padding: var(--spacing-extra-small);
            text-transform: none;
            font-size: inherit;
            font-weight: inherit;
        }

        .expand-arrow {
            margin-left: var(--spacing-small);
            padding: var(--spacing-extra-small);
            color: var(--color-text-label);
            font-size: var(--font-size-small);
        }
    }

    .tree-selection {
        margin-left: var(--spacing-medium);
    }
}

body {
    >.tree-node {
        @include shadow-small;
    }
}