@import "shared/mixins-and-vars";

@device-w: 320px;
@device-h: 480px;
@border-top: 36px;
@border-side: 17px;
@border-bottom: 45px;
@frame-width: @device-w + @border-side * 2;
@frame-height: @device-h + @border-top + @border-bottom;

@device-breakpoint-width: @frame-width + 16px * 2;
@show-device-border-breakpoint: ~"only screen and (min-width: @{device-breakpoint-width})";

.reflow-example {
    &__frame {
        display: block;
        margin: 20px auto 0;
        width: 100%;
        height: ~"min(@{frame-height}, 70vh)";

        .border-image(url("../images/reflow/mobile-phone--border.webp"), 36px, 17px, 45px, 17px);

        @media @tablet-up {
            height: @frame-height;
        }

        @media @show-device-border-breakpoint {
            width: @frame-width;
        }

        .enable-focus({
      outline: solid 2px @focus-color !important;
      outline-offset: -2px;
    }, {
      outline: none !important;
    });
    }
}