.filepond--root {
    &[data-style-panel-layout~='integrated'] {
        width: 100%;
        height: 100%;
        max-width: none;
        margin: 0;
    }

    &[data-style-panel-layout~='circle'],
    &[data-style-panel-layout~='integrated'] {
        & .filepond--panel-root {
            border-radius: 0;
            > * {
                display: none;
            }
        }

        & .filepond--drop-label {
            bottom: 0;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 7;
        }

        /* we're only loading one item, this makes the intro animation a bit nicer */
        & .filepond--item-panel {
            display: none;
        }
    }

    &[data-style-panel-layout~='compact'],
    &[data-style-panel-layout~='integrated'] {
        & .filepond--list-scroller {
            overflow: hidden;
            height: 100%;
            margin-top: 0;
            margin-bottom: 0;
        }

        & .filepond--list {
            left: 0;
            right: 0;
            height: 100%;
        }

        & .filepond--item {
            margin: 0;
        }

        & .filepond--file-wrapper {
            height: 100%;
        }

        & .filepond--drop-label {
            z-index: 7;
        }
    }

    &[data-style-panel-layout~='circle'] {
        border-radius: 99999rem;
        overflow: hidden;

        & > .filepond--panel {
            border-radius: inherit;

            > * {
                display: none;
            }
        }

        /* circle cuts of this info, so best to hide it */
        & .filepond--file-info {
            display: none;
        }
        & .filepond--file-status {
            display: none;
        }

        & .filepond--action-edit-item {
            opacity: 1 !important;
            visibility: visible !important;
        }
    }
}

/* dirfty way to fix circular overflow issue on safari 11+ */
@media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
        .filepond--root[data-style-panel-layout~='circle'] {
            will-change: transform;
        }
    }
}