/* vuetify colors object */
$colors: (
  "primary": var(--v-theme-primary),
  "secondary": var(--v-theme-secondary),
  "accent": var(--v-theme-accent),
  "error": var(--v-theme-error),
  "info": var(--v-theme-info),
  "success": var(--v-theme-success),
  "warning": var(--v-theme-warning)
);

/* gap utility class */
$gap: (
  "0": 0,
  "1": 0.25rem,
  "2": 0.5rem,
  "3": 0.75rem,
  "4": 1rem,
  "5": 1.25rem,
  "6":1.5rem,
  "7": 1.75rem,
  "8": 2rem,
  "9": 2.25rem,
  "10": 2.5rem,
  "11": 2.75rem,
  "12": 3rem,
  "14": 3.5rem,
  "16": 4rem,
  "20": 5rem,
  "24": 6rem,
  "28": 7rem,
  "32": 8rem,
  "36": 9rem,
  "40": 10rem,
  "44": 11rem,
  "48": 12rem,
  "52": 13rem,
  "56": 14rem,
  "60": 15rem,
  "64": 16rem,
  "72": 18rem,
  "80": 20rem,
  "96": 24rem
);

@each $name, $size in $gap {
  .gap-#{$name} {
    gap: $size;
  }

  .gap-x-#{$name} {
    column-gap: $size;
  }

  .gap-y-#{$name} {
    row-gap: $size;
  }
}

.font-weight-semibold {
  font-weight: 600 !important;
}

/* stylelint-disable property-no-vendor-prefix */
.text-gradient {
  background: linear-gradient(0deg, rgb(var(--v-theme-primary)) 0, rgb(var(--v-theme-secondary)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
  -webkit-text-fill-color: transparent;
}

.cursor-pointer {
  cursor: pointer;
}

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

.text-xl {
  font-size: 1.25rem;
}

.text-lg {
  font-size: 1.125rem;
}

.text-base {
  font-size: 1rem;
}

.text-sm {
  font-size: 0.875rem;
}

.text-xs {
  font-size: 0.75rem;
}

.v-locale--is-rtl {
  .scale-rtl {
    transform: scaleX(-1);
  }
}

// bg-light colors
@each $name,$value in $colors {
  .bg-light-#{$name} {
    background-color: rgb($value, var(--v-activated-opacity));
  }
}
