// Most used breakpoints
$break-huge: 1440px;
$break-wide: 1280px;
$break-large: 960px; // admin sidebar auto folds. Breakpoint for tablet
$break-medium: 782px; // adminbar goes big
$break-small: 600px; // Breakpoint for mobile
$break-mobile: 480px;
$break-js-tablet: 1025px;
$break-js-mobile: 768px;

[class*="ugb-"] form[class*="-link"],
form[class*="ugb-"][class*="-link"],
[class*="ugb-"] + form[class*="-link"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

// Text margin bottom
$text-margin-bottom: 16px;

// Box
$box-radius: 12px;
$box-hori-padding: 35px;
$box-vert-padding: 40px;

@mixin boxNoPadding() {
    box-shadow: 0 5px 5px 0 rgba(18, 63, 82, 0.035), 0 0 0 1px rgba(176, 181, 193, 0.2);
    background-color: #fff;
    border-radius: $box-radius;
    overflow: hidden;
}
@mixin box() {
    @include boxNoPadding();
    padding: $box-vert-padding $box-hori-padding;
    @media screen and (max-width: $break-medium) {
        padding: ($box-vert-padding * 2/3) ($box-hori-padding * 2/3);
    }
    @media screen and (max-width: $break-small) {
        padding: $box-hori-padding ($box-hori-padding / 2);
    }
}
