/* smart-array */

smart-array {
    width: var(--smart-array-default-width);
    height: var(--smart-array-default-height);
    display: block;
    overflow: visible;
}

    smart-array > .smart-container,
    smart-array .smart-big-container {
        display: flex;
    }

    smart-array .smart-array-indexer {
        display: block;
        margin-bottom: 2px;
        width: 100%;
    }

    smart-array .smart-big-container {
        background-color: var(--smart-background);
    }

    smart-array[show-index-display] .smart-big-container {
        margin-left: 2px;
    }

    smart-array .smart-main-container,
    smart-array .smart-scrollbar-container-horizontal {
        width: 100%;
    }

    smart-array .smart-array-element-gap {
        border-spacing: 0;
    }

    smart-array .smart-array-table-data {
        border: 2px solid transparent;
        padding: 0;
        min-width: 0;
        background-color: transparent;
        white-space: nowrap;
    }

    smart-array .smart-array-table-data-gap {
        border-width: var(--smart-array-element-gap);
        padding: var(--smart-array-element-gap);
    }

    smart-array .smart-scrollbar-container-horizontal {
        height: 20px;
    }

    smart-array .smart-scrollbar-container-vertical {
        width: 20px;
    }

        smart-array .smart-scrollbar-container-horizontal > smart-scroll-bar,
        smart-array .smart-scrollbar-container-vertical > smart-scroll-bar {
            width: 100%;
            height: 100%;
        }

    smart-array .smart-array-element {
        position: relative;
    }

    smart-array .smart-array-element-selected {
        border-color: blue;
    }

    smart-array .smart-array-element-empty {
        border-color: #999;
        color: #999;
        opacity: 0.7;
    }

    /*Custom smart-elements in smartArray*/
    smart-array smart-switch-button.smart-array-element,
    smart-array smart-text-box.smart-array-element,
    smart-array .smart-array-element > smart-toggle-button,
    smart-array .smart-array-element > smart-switch-button,
    smart-array .smart-array-element > smart-led,
    smart-array .smart-array-element > smart-power-button,
    smart-array .smart-array-element > smart-numeric-text-box,
    smart-array .smart-array-element > smart-check-box,
    smart-array .smart-array-element > smart-radio-button {
        display: block;
    }

    smart-array .smart-array-element > smart-check-box {
        padding: 0;
    }