html {
    overflow-y: auto;
}

.v-main {
    margin-right: 20px;
    --v-layout-top: 0 !important;
}
@media (max-width: 1279px) {
    .v-main {
        margin: 0 10px;
    }
}
.spacer {
    padding: 100px 0;
}
@media (max-width: 800px) {
    .spacer {
        padding: 40px 0;
    }
}
.cursor-pointer {
    cursor: pointer;
}
.page-wrapper {
    min-height: calc(100vh - 100px);
    padding: 24px;
    padding-bottom: 30px;

    @media screen and (max-width:600px){
        padding: 10px;
    }
}
.maxWidth {
    max-width: 1200px;
    margin: 0 auto;
}
$sizes: (
    'display-1': 44px,
    'display-2': 40px,
    'display-3': 30px,
    'h1': 36px,
    'h2': 30px,
    'h3': 21px,
    'h4': 18px,
    'h5': 16px,
    'h6': 14px,
    'text-8': 8px,
    'text-10': 10px,
    'text-13': 13px,
    'text-15': 15px,
    'text-18': 18px,
    'text-20': 20px,
    'text-24': 24px,
    'body-text-1': 10px
);

@each $pixel, $size in $sizes {
    .#{$pixel} {
        font-size: $size;
        line-height: $size + 10;
    }
}

.customizer-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    border-radius: 50%;
    .icon {
        animation: progress-circular-rotate 1.4s linear infinite;
        transform-origin: center center;
        transition: all 0.2s ease-in-out;
    }
}
.fixed-width {
    max-width: 1300px;
}
.h-100 {
    height: 100%;
}
.w-100 {
    width: 100%;
}

.h-100vh {
    height: 100vh;
}
.gap-2 {
    gap: 8px;
}

.gap-3 {
    gap: 16px;
}

.gap-4 {
    gap: 24px;
}

.text-white {
    color: rgb(255, 255, 255) !important;
}
// border
.border-right {
    border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.border-bottom {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.opacity-50 {
    opacity: 0.5;
}
.link {
    color: rgb(var(--v-theme-lightText));
    text-decoration: none;
    &:hover {
        color: rgb(var(--v-theme-primary));
    }
}
.z-auto.v-card {
    z-index: auto;
}

.obj-cover {
    object-fit: cover;
}

.right-pos-img {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}

.text-hover-primary {
    color: rgb(var(--v-theme-darkText));
    &:hover {
        color: rgb(var(--v-theme-primary));
    }
}
