@color0: #e0e0e0;
@screen-width: 320px;
@screen-height: 480px;
@border-width: 3px;
@padding-top: 50px;
@padding-bottom: 70px;
@padding-side: 5px;
@speaker-radius: 5px;
@button-radius: 25px;

.email-mobile-preview {
    border-radius: 35px;
    border: @border-width solid @color0;
    box-sizing: border-box;
    height: calc(@screen-height + @padding-top + @padding-bottom + 2*@border-width);
    margin-bottom: 20px;
    margin-top: 20px;
    margin: auto;
    padding: @padding-top @padding-side @padding-bottom @padding-side;
    position: relative;
    width: calc(@screen-width + 2*@padding-side + 2*@border-width);

    &::before {
        -moz-border-radius: @speaker-radius;
        -webkit-border-radius: @speaker-radius;
        border-radius: @speaker-radius;
        border: 2px solid @color0;
        box-sizing: border-box;
        content: "";
        height: 6px;
        left: calc(@screen-width / 2 - 30px);
        position: absolute;
        top: 20px;
        width: 70px;
    }

    &::after {
        -moz-border-radius: @button-radius;
        -webkit-border-radius: @button-radius;
        border-radius: @button-radius;
        border: 2px solid @color0;
        box-sizing: border-box;
        content: '';
        height: 50px;
        left: calc(@screen-width / 2 - 20px);
        position: absolute;
        top: calc(@screen-height + 50px + 8px);
        width: 50px;
    }

    .phone-screen {
        border: 1px solid @color0;
        box-sizing: border-box;
        height: @screen-height;
        width: @screen-width;
    }
}

.mobile-preview-outline {
    width: 350px;
    margin: auto;

    .preview-alert {
        position: relative;
        left: calc(@screen-width + 35px);
        top: 50px
    }
}