/* UPLOAD CALLER*/
upload-caller {
    display: none;
}


/* SVG ICON */
:root {
    --svgicon-height: var(--cap-height);
    --svgicon-width: auto;
    --svgicon-size: contain;
    --svgicon-position: center;
}

svg-icon {
    display: block;
    height: var(--svgicon-height);
    width: var(--svgicon-width);
    background: currentColor;
    flex-shrink: 0;
    mask-repeat: no-repeat;
    mask-size: var(--svgicon-size);
    mask-position: var(--svgicon-position);
    mask-image: var(--svgicon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--svgicon-size);
    -webkit-mask-position: var(--svgicon-position);
    -webkit-mask-image: var(--svgicon-url);
}

/* MEDIA EL */
media-el {
    display: flex;
    height: auto;
    position: relative;
    box-sizing: border-box;
    aspect-ratio: var(--aspect);
}

media-el .footage {
    width: 100%;
    aspect-ratio: var(--aspect);
    height: auto;
}

media-el .uploadlayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

media-el .uploadlayer.drag-over {
    border: solid 4px #607D8B;
}

media-el .uploadlayer.drag-over.drop-accepted {
    border-color: #009688;
}

media-el .uploadlayer.drag-over.drop-rejected {
    border-color: #E91E63;
}