$mobile-top-border-width: 60px;
$mobile-bottom-border-width: 60px;

@mixin get_desktop_design() {
    .inner-wrap {
        border-top-width: 20px;
        border-bottom-width: 20px;
        border-radius: 16px;
        // &:before {
        //     content: '';
        //     display: block;
        //     position: absolute;
        //     width: 140px;
        //     height: 10px;
        //     bottom: -40px;
        //     left: 50%;
        //     -webkit-transform: translate(-50%);
        //     transform: translate(-50%);
        //     background: #f1f1f1;
        //     border-bottom-left-radius: 5px;
        //     border-bottom-right-radius: 5px;
        //     z-index: 1;
        // }
        // &:after {
        //     content: '';
        //     display: block;
        //     position: absolute;
        //     width: 110%;
        //     height: 35px;
        //     margin: 18px 0 0 -70px;
        //     background: black;
        //     border-radius: 6px;
        // }
    }
}

@mixin get_mobile_design() {
    .inner-wrap {
        border-top-width: $mobile-top-border-width;
        border-bottom-width: $mobile-bottom-border-width;
        border-radius: 40px;
        /* The horizontal line on the top of the device */
        &:before {
          content: '';
          display: block;
          width: 60px;
          height: 5px;
          position: absolute;
          top: -30px;
          left: 50%;
          transform: translate(-50%, -50%);
          background: white;
          border-radius: 10px;
        }

        /* The circle on the bottom of the device */
        &:after {
          content: '';
          display: block;
          width: 35px;
          height: 35px;
          position: absolute;
          left: 50%;
          bottom: -65px;
          transform: translate(-50%, -50%);
          background: white;
          border-radius: 50%;
        }
    }
}
.mode-desktop {
    @media only screen and (min-width: 1024px) {
        @include get_desktop_design();
    }
    @media only screen and (max-width: 1024px) {
        @include get_mobile_design();
    }
}
.mode-mobile,
.mode-tablet {
    @include get_mobile_design();
}

@media only screen and (max-width: 600px) {
    .mode-desktop,
    .mode-tablet,
    .mode-mobile {
        #customizer-wrap {
            width: 100%;
            height: 100%;
        }
        #customize-controls {
            display: none;
        }
        .inner-wrap {
            height: 100%;
            border: none;
            border-radius: 0;
            position: relative;
        }
    }
}
@media only screen and (min-width: 601px) {
    .mode-mobile {
        .inner-wrap {
            width: 414px;
            height: 696px;
        }
    }
    .mode-tablet {
        .inner-wrap {
            width: 810px;
            height: 1024px;
        }
    }
    .mode-desktop {
        .inner-wrap {
            width: 1366px;
            height: 780px;
        }
    }
    #customizer-wrap {
        position: relative;
        overflow: auto;
    }
    .inner-wrap {
        transform: scale(.6) translate(-50%, -50%);
        transform-origin: left top;
        border: 10px solid;
        left: 50%;
        top: 50%;
        position: absolute;
    }
}
@media (min-width: 601px) and (max-width: 740px) {
    .mode-desktop,
    .mode-tablet {
        .inner-wrap {
            width: 810px;
            height: 1024px;
            transform: scale(0.3) translateX(-50%);
            top: 28px;
        }
    }
    .mode-mobile {
        .inner-wrap {
            transform: scale(.6) translate(-50%);
            top: 28px;
        }
    }
    button[data-mode="desktop"] {
        display: none;
    }
}
@media (min-width: 741px) and (max-width: 900px) {
    .mode-desktop,
    .mode-tablet {
        .inner-wrap {
            width: 810px;
            height: 1024px;
            transform: scale(0.5) translateX(-50%);
            top: 28px;
        }
    }

    button[data-mode="desktop"] {
        display: none;
    }
}
@media (min-width: 901px) and (max-width: 1024px) {
    .mode-desktop,
    .mode-tablet {
        .inner-wrap {
            transform: scale(0.5) translateX(-50%);
            top: 28px;
            width: 810px;
            height: 1024px;
        }
    }

    button[data-mode="desktop"] {
        display: none;
    }
}
@media (min-width: 1025px) and (max-width: 1200px) {
    .mode-desktop {
        .inner-wrap {
            transform: scale(.5) translate(-50%, -50%);
        }
    }
    .mode-mobile,
    .mode-tablet {
        .inner-wrap {
            transform: scale(0.8) translateX(-50%);
            top: 28px;
        }
    }
}
@media (min-width: 1201px) and (max-width: 1366px) {
    .mode-desktop {
        .inner-wrap {
            transform: scale(.6) translate(-50%, -50%);
        }
    }
    .mode-mobile,
    .mode-tablet {
        .inner-wrap {
            transform: scale(0.8) translateX(-50%);
            top: 28px;
        }
    }
}

@media (min-width: 1367px) and (max-width: 1440px) {
    .mode-desktop {
        .inner-wrap {
            transform: scale(.7) translate(-50%, -50%);
        }
    }
    .mode-mobile,
    .mode-tablet {
        .inner-wrap {
            transform: scale(1) translateX(-50%);
            top: 28px;
        }
    }
}

@media only screen and (min-width: 1441px) {
    .mode-desktop {
        .inner-wrap {
            transform: scale(0.8) translate(-50%);
            top: 28px;
        }
    }
    .mode-mobile,
    .mode-tablet {
        .inner-wrap {
            transform: scale(1) translateX(-50%);
            top: 28px;
        }
    }
    .mode-mobile {
        .inner-wrap {
            transform: scale(1.2) translateX(-50%);
            top: 28px;
        }
    }
}