.filepond--panel {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;

    /* defaults to 100% height (fixed height mode) this fixes problem with panel height in IE11 */
    height: 100% !important;

    /* no interaction possible with panel */
    pointer-events: none;
}

.filepond-panel:not([data-scalable='false']) {
    height: auto !important;
}

.filepond--panel[data-scalable='false'] {
    > div {
        display: none;
    }
}

.filepond--panel[data-scalable='true'] {
    /* this seems to fix Chrome performance issues */
    /* - when box-shadow is enabled */
    /* - when multiple ponds are active on the same page */
    transform-style: preserve-3d;

    /* prevent borders and backgrounds */
    background-color: transparent !important;
    border: none !important;
}

.filepond--panel-top,
.filepond--panel-bottom,
.filepond--panel-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
}

.filepond--panel-top,
.filepond--panel-bottom {
    height: 0.5em;
}

.filepond--panel-top {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-bottom: none !important;

    /* fixes tiny transparant line between top and center panel */
    &::after {
        content: '';
        position: absolute;
        height: 2px;
        left: 0;
        right: 0;
        bottom: -1px;
        background-color: inherit;
    }
}

.filepond--panel-center,
.filepond--panel-bottom {
    will-change: transform;
    backface-visibility: hidden;
    transform-origin: left top;
    transform: translate3d(0, 0.5em, 0);
}

.filepond--panel-bottom {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-top: none !important;

    /* fixes tiny transparant line between bottom and center of panel */
    &::before {
        content: '';
        position: absolute;
        height: 2px;
        left: 0;
        right: 0;
        top: -1px;
        background-color: inherit;
    }
}

.filepond--panel-center {
    /* the center panel is scaled using scale3d to fit the correct height */
    /* we use 100px instead of 1px as scaling 1px to a huge height is really laggy on chrome */
    height: 100px !important;
    border-top: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;

    /* hide if not transformed, prevents a little flash when the panel is at 100px height while attached for first time */
    &:not([style]) {
        visibility: hidden;
    }
}