@use "../abstracts/index" as *;

/* General
============================================================== */

/* Margin */
.mb-2 {
    margin-bottom: 2px !important;
}

.mb-4 {
    margin-bottom: 4px !important;
}

.mb-7 {
    margin-bottom: 7px !important;
}

.mb-8 {
    margin-bottom: 8px !important;
}

.mb-12 {
    margin-bottom: 12px !important;
}

.mb-14 {
    margin-bottom: 14px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-16 {
    margin-bottom: 16px !important;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-24 {
    margin-bottom: 24px !important;
}

.mb-32 {
    margin-bottom: 32px !important;
}


.mb-40 {
    margin-bottom: 40px !important;
}

.mt-30 {
    margin-top: 30px;
}

/* Padding */
.pt-30 {
    padding-top: 30px;
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px;
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Gap */
.gap-6 {
    gap: 6px !important;
}

.gap-8 {
    gap: 8px;
}

.gap-10 {
    gap: 10px !important;
}

.gap-12 {
    gap: 12px !important;
}

.gap-13 {
    gap: 13px !important;
}

.gap-15 {
    gap: 15px;
}

.gap-16 {
    gap: 16px !important;
}

.gap-20 {
    gap: 20px !important;
}

.gap-24 {
    gap: 24px !important;
}

.gap-28 {
    gap: 28px !important;
}

.gap-30 {
    gap: 30px;
}

/* Spacing */
.flat-spacing {
    padding-top: 120px;
    padding-bottom: 120px;

    @include res(xxl) {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    @include res(lg) {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}

.flat-spacing-2 {
    padding-top: 60px;
    padding-bottom: 60px;
}

.flat-spacing-bottom {
    margin-bottom: 88px;

    @include res(xl) {
        margin-bottom: 60px;
    }
}

/* Orther */
.text-primary {
    color: var(--primary) !important;
}

.text-white-32 {
    color: var(--white-32);
}

.text-white-50 {
    color: var(--white-50);
}

.text-white-64 {
    color: var(--white-64);
}

.text-black-64 {
    color: var(--black-64);
}

.link {
    @include transition3;

    &:hover {
        color: var(--primary) !important;
    }
}

.cl-line-2 {
    border-color: var(--line-2) !important;
}

.link-underline {
    @include transition3;
    text-decoration: underline;
    text-decoration-color: transparent;

    &:hover {
        text-decoration-color: var(--primary);
    }
}

.lt-sp-nor {
    letter-spacing: -0.32px;
}

.letter-space-0 {
    letter-spacing: 0px !important;
}


.text-vertical {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
}


.cs-pointer {
    cursor: pointer;
}

.max-width_1 {
    max-width: 1424px;
    width: 100%;
}


.gap-x-10 {
    column-gap: 10px !important;
}

.radius-3 {
    border-radius: 3px !important;
}

.radius-5 {
    border-radius: 5px !important;
}

.radius-10 {
    border-radius: 10px !important;
}

.radius-12 {
    border-radius: 12px !important;
}

.radius-16 {
    border-radius: 16px !important;
}

.radius-20 {
    border-radius: 20px !important;
}

.bg-white-2 {
    background-color: var(--bg-10);
}

.bg-surface {
    background-color: var(--surface);
}

.text-line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
    overflow: hidden;
}

.text-line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.text-line-clamp-3 {
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
}

.aspect-ratio-0 {
    aspect-ratio: 0 !important;
}

.aspect-ratio-1 {
    aspect-ratio: 1/1 !important;
}

.z-1 {
    z-index: 1;
}

.z-5 {
    z-index: 5;
}

.cursor-not-allowed {
    cursor: not-allowed;
}

.cursor-auto {
    cursor: auto;
}

.min-w-unset {
    min-width: unset !important;
}

.flex-1 {
    flex: 1;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.cursor-pointer {
    cursor: pointer;
}

@include res(lg, min) {
    .h-lg-100 {
        height: 100% !important;
    }
}

@include res(xxl, min) {}