.middle,
.container-middle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cur-pointer {
    cursor: pointer !important;
}

.cur-default {
    cursor: default !important;
}

.animation-delay--1s {
    animation-delay: 0.1s;
}

.animation-delay--2s {
    animation-delay: 0.2s;
}

.animation-delay--3s {
    animation-delay: 0.3s;
}

/* TRANSITION */
.transition {
    transition: all 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.transition-transform {
    transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

/* ROTATE */
.rotate-90 {
    transform: rotate(90deg);
}

.rotate-n90 {
    transform: rotate(-90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.rotate-n270 {
    transform: rotate(-270deg);
}

.ltr-d-none {
    [dir="ltr"] &,
    .ltr & {
        display: none;
    }
}

.rtl-d-none {
    [dir="rtl"] &,
    .rtl & {
        display: none;
    }
}

.ltr-d-block {
    [dir="ltr"] &,
    .ltr & {
        display: block;
    }
}

.rtl-d-block {
    [dir="rtl"] &,
    .rtl & {
        display: block;
    }
}

.ltr-rotate-180 {
    [dir="ltr"] &,
    .ltr & {
        transform: rotate(180deg);
    }
}

.rtl-rotate-180 {
    [dir="rtl"] &,
    .rtl & {
        transform: rotate(180deg);
    }
}

.rtl-rotate-n180 {
    [dir="rtl"] &,
    .rtl & {
        transform: rotate(-180deg);
    }
}

/* */

.border-start {
    border-left: none !important;
}
.border-end {
    border-right: none !important;
}

.border-start {
    @include borderStart(1px solid #000 !important);
}

.border-end {
    @include borderEnd(1px solid #000 !important);
}

@mixin border($palette) {
    $divider: map-get($palette, divider);
    $bg: map-get($palette, bg, main);

    $primary-palette: map-get($palette, primary);
    $primary: map-get($primary-palette, main);
    $primary-text: map-get($primary-palette, text);

    $secondary-palette: map-get($palette, secondary);
    $secondary: map-get($secondary-palette, main);
    $secondary-text: map-get($secondary-palette, text);

    .border,
    .border-top,
    .border-bottom,
    .border-start,
    .border-end {
        border-color: $divider !important;
    }

    .border-primary {
        border-color: $primary !important;
    }

    .border-secondary {
        border-color: $secondary !important;
    }
}

.theme-bd.theme-light {
    @include border(map-get($theme, light));
}

.theme-bd.theme-dark {
    @include border(map-get($theme, dark));
}

/*************
  W I D TH  &  H E I G H T
*************/

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-30 {
    width: 30%;
}

.w-40 {
    width: 40%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}
/*************
  G A P
*************/
.gap-1 {
    column-gap: 0.25rem;
}

.gap-2 {
    column-gap: 0.5rem;
}

.gap-3 {
    column-gap: 1rem;
}

.gap-4 {
    column-gap: 1.5rem;
}

.gap-5 {
    column-gap: 3rem;
}

.gap-x-1 {
    column-gap: 0.25rem;
}

.gap-x-2 {
    column-gap: 0.5rem;
}

.gap-x-3 {
    column-gap: 1rem;
}

.gap-x-4 {
    column-gap: 1.5rem;
}

.gap-x-5 {
    column-gap: 3rem;
}

.gap-y-1 {
    column-gap: 0.25rem;
}

.gap-y-2 {
    column-gap: 0.5rem;
}

.gap-y-3 {
    column-gap: 1rem;
}

.gap-y-4 {
    column-gap: 1.5rem;
}

.gap-y-5 {
    column-gap: 3rem;
}

/*************
  S I Z E S
*************/

// XL

.size-xl {
    font-size: 1.5rem;
}

svg.size-xl,
.size-xl svg {
    font-size: 2.1875rem;
}

// LG

.size-lg {
    font-size: 1rem;
}

svg.size-lg,
.size-lg svg {
    font-size: 1.8rem;
}

// MD

.size-md {
    font-size: 0.875rem;
}

svg.size-md,
.size-md svg {
    font-size: 1.25rem;
}

// SM

.size-sm {
    font-size: 0.8125rem;
}
svg.size-sm,
.size-sm svg {
    font-size: 1.125rem;
}

/*************
  nano scroll
*************/

@mixin nanoScrollTheme($palette) {
    $text-primary: map-get($palette, text, primary);
    $bg: map-get($palette, bg, main);

    .nano-scroll {
        @include scrollbar(6px, mix($text-primary, $bg, 20%));
    }
}

.theme-bd.theme-light {
    $palette: map-get($theme, light);
    @include nanoScrollTheme($palette);
}

.theme-bd.theme-dark {
    $palette: map-get($theme, dark);
    @include nanoScrollTheme($palette);
}