/* VIEWPORT */
.dd-biw-viewport-tab-wrapper {
    background: var(--dd-color-viewport);
    position: relative;
    width: 100%;
    padding-top: 67%; /* Aspect */
    height: auto;
}

.dd-biw-viewport-tab-wrapper > .dd-biw-viewport-tab {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
}

.dd-biw-viewport-tab:not(.active){
    display: none;
}

.dd-biw-viewport-controls-wrapper {
    --dd-biw-viewport-controls-button-gap: 10px;
    position: relative;
    background-color: var(--dd-color-background);
    border-bottom: 1px solid var(--dd-color-seperator);
    padding: calc( var(--dd-margin-narrow) / 2 ) var(--dd-margin-narrow);
    display: flex;
    gap: var(--dd-biw-viewport-controls-button-gap);
}

.dd-biw-viewport.dd-using-dropdown .dd-biw-viewport-controls-wrapper .dd-overflow-dropdown {
    flex: 1 1 auto;
}

.dd-dropdown-menu,
.dd-dropdown-menu li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dd-dropdown-menu {
    position: absolute;
    right: 0;
    bottom: 100%;
    margin: calc(var(--dd-margin-narrow) * -0.5) var(--dd-margin-narrow);
    padding-bottom: var(--dd-biw-viewport-controls-button-gap);
    background: transparent; 
    color: white;
    border-radius: 20px;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--dd-biw-viewport-controls-button-gap);
    align-items: end;
    z-index: 1;
}

.dd-dropdown-menu.dd-flow-horizontally {
    flex-wrap: wrap-reverse;
    flex-direction: row-reverse;
}


/* VIEWPORT - iframes */
.dd-biw-viewport-tab > iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}


/* VIEWPORT - customizers */
.dd-biw-viewport-tab .dd-c-controls button:focus-visible,
.dd-biw-viewport-tab .dd-c-controls button.dd-c-fullscreen:focus-visible,
.dd-biw-viewport-tab .dd-c-controls button:not(.active):focus-visible,
.dd-biw-viewport-tab .dd-customizer .hotspot:focus-visible,
.dd-biw-viewport-tab .dd-customizer .dd-c-card:focus-visible {
    outline-color: var(--dd-color-text);
    outline-offset: 3px;
}

body .dd-biw-viewport-tab .dd-customizer{ /* HARDCODED CARD SIZES */
    --dd-customizer-card-width: 210px;
    --dd-customizer-card-height: 280px;
    --dd-customizer-card-width-mobile: 135px;
    --dd-customizer-card-height-mobile: 190px;
}