@import "variables";

:host {
    display: flex;
    flex-direction: column;
}

.preview-image {
    width: 100%;
    height: 100%;
    min-height: 60vh;
    overflow: auto;
    text-align: center;
    box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.1);
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACuoAAArqAVDM774AAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTZEaa/1AAAAK0lEQVQ4T2P4jwP8xgFGNSADqDwGIF0DlMYAUH0YYFQDMoDKYwASNfz/DwB/JvcficphowAAAABJRU5ErkJggg==");

    &.centered {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    img {
        margin: 12px;
        box-shadow: 0px 0px 10px -3px rgba(0, 0, 0, 0.15)
    }
}

.controls {
    display: flex;
    align-items: flex-end;
    flex: 1;

    label {
        color: $color-grey-500;
    }
    vdr-form-field {
        height: 40px;
        margin-left: 6px;
        margin-right: 24px;
    }
    .dimension {
        margin: 0 6px;
    }
}
.flex-spacer {
    flex: 1;
}
