@repeater-icon-size: 24px;
@repeater-body-bg: @body-bg;
@repeater-body-border: @border-color;
@repeater-body-inner-bg: @body-bg;
@repeater-item-bg: @input-bg;
@repeater-menu-bg: @tertiary-bg;

@import "../../../../assets/less/core/boot.less";
@import "repeater.item.less";
@import "repeater.group.less";
@import "repeater.toolbar.less";


.field-repeater {
    > .field-repeater-builder > .field-repeater-groups,
    > ul.field-repeater-items {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    > .field-repeater-builder > ul > li.field-repeater-group,
    > ul > li.field-repeater-item {
        padding: 0;
        margin: 0;
        margin-bottom: 10px;
        list-style: none;
    }

    .repeater-item-icon {
        width: @repeater-icon-size;
        height: @repeater-icon-size;
        line-height: @repeater-icon-size;
        color: @toolbar-color;
        display: block;
        margin: -2px 2px;
    }

    .repeater-item-checkbox .form-check-input {
        position: relative;
        top: 3px;
        left: 5px;
    }

    a.repeater-item-menu,
    a.repeater-item-handle {
        width: @repeater-icon-size;
        height: @repeater-icon-size;
        line-height: @repeater-icon-size;
        display: block;
        color: @toolbar-color;
        text-decoration: none;
        border-radius: 3px;
        text-align: center;
        margin: -2px 2px;

        // @deprecated
        // [class^="octo-icon"] {
        //     position: relative;
        //     top: 1px;
        // }

        .icon-list-reorder {
            font-size: 24px;
        }
    }

    a.repeater-item-handle {
        cursor: move;
        &:active {
            background: @toolbar-hover-bg;
        }
    }

    .repeater-item-dropdown.open a.repeater-item-menu,
    a.repeater-item-menu:hover {
        color: @toolbar-hover-color;
        background: @toolbar-hover-bg;
    }

    .repeater-item-dropdown {
        padding-right: 3px;
    }
}

.form-group.span-adaptive {
    > .field-repeater {
        position: absolute;
        height: 100%;
        width: 100%;
        // background: @primary-bg;
        padding: @padding-standard;
        overflow: auto;

        &[data-external-toolbar-app-state] {
            > .field-repeater-toolbar {
                display: none !important;
            }

            > .field-repeater-builder {
                > .field-repeater-toolbar {
                    display: none !important;
                }

                > .field-repeater-groups {
                    padding-top: 0 !important;
                }
            }
        }

        &.repeater-empty {
            background-image: url('../../../../../backend/assets/images/no-blocks.svg');
            background-repeat: no-repeat;
            background-position: center center;
        }
    }
}

// Fixes popups in fullscreen mode getting blocked by the overflow
body.component-backend-document-fullscreen {
    .form-group.span-adaptive {
        > .field-repeater {
            overflow: inherit;
        }
    }
}

.field-repeater.repeater-mode-builder {
    display: flex;

    > ul.field-repeater-items {
        flex-grow: 1;

        > li {
            display: none;
            &.is-selected {
                display: block;
            }
        }
    }

    > .field-repeater-builder {
        width: 250px;
        padding-right: 20px;
        flex-shrink: 0;
        flex-basis: 250px;
    }
}

@media (max-width: @form-breakpoint-max) {
    .field-repeater.repeater-mode-builder {
        flex-direction: column;

        > .field-repeater-builder {
            width: 100%;
            padding-right: 0;
            flex-basis: auto;

            > ul {
                overflow-x: auto;
                white-space: nowrap;
                margin-bottom: 5px;
            }

            > ul > li {
                .group-title,
                .group-description {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            > ul > li.field-repeater-group {
                width: 250px;
                display: inline-block;
                vertical-align: top;
                margin-right: 10px;
                margin-bottom: 5px;
            }
        }
    }
}

// Group palette sizing
.field-repeater-selection-list {
    width: 300px;
}

@media (max-width: @screen-sm) {
    .field-repeater-selection-list {
        width: auto;
    }
}