:root {
  --scale-1900: 1;
  --scale-1500: 1/1.2;
  --scale-1200: 1/1.4;
  --scale-769: 1/1.6;
  --scale-768: 1/1.7;
}

.ala-size {
  --base-size: 16px;
  /* font-size: calc(var(--base-size) * var(--current-scale, 1)); */
  font-size: clamp(
    14px,
    calc(var(--base-size) * var(--current-scale, 1)),
    100vw
  );
}

.ala-width {
  --base-width: 16px;
  width: calc(var(--base-width) * var(--current-scale, 1)) !important;
}

.ala-flex-1 {
  flex: 1;
}

.ala-height {
  --base-height: 16px;
  height: calc(var(--base-height) * var(--current-scale, 1)) !important;
}
.ala-lh {
  --base-lh: 16px;
  line-height: calc(var(--base-lh) * var(--current-scale, 1));
}
.ala-padding {
  --base-padding-top: var(--base-padding-top);
  --base-padding-left: var(--base-padding-left);
  --base-padding-bottom: var(--base-padding-bottom);
  --base-padding-right: var(--base-padding-right);
  padding-top: calc(var(--base-padding-top) * var(--current-scale, 1));
  padding-left: calc(var(--base-padding-left) * var(--current-scale, 1));
  padding-bottom: calc(var(--base-padding-bottom) * var(--current-scale, 1));
  padding-right: calc(var(--base-padding-right) * var(--current-scale, 1));
}

.ala-mt {
  --base-mt: 0;
  margin-top: calc(var(--base-mt) * var(--current-scale, 1)) !important;
}

.ala-mr {
  --base-mr: 0;
  margin-right: calc(var(--base-mr) * var(--current-scale, 1));
}

.ala-mb {
  --base-mb: 0;
  margin-bottom: calc(var(--base-mb) * var(--current-scale, 1));
}

.ala-ml {
  --base-ml: 0;
  margin-left: calc(var(--base-ml) * var(--current-scale, 1));
}

.ala-pt {
  --base-pt: 0;
  padding-top: calc(var(--base-pt) * var(--current-scale, 1));
}

.ala-pr {
  --base-pr: 0;
  padding-right: calc(var(--base-pr) * var(--current-scale, 1)) !important;
}

.ala-pb {
  --base-pb: 0;
  padding-bottom: calc(var(--base-pb) * var(--current-scale, 1));
}

.ala-pl {
  --base-pl: 0;
  padding-left: calc(var(--base-pl) * var(--current-scale, 1)) !important;
}
.ala-right {
  --base-right: 0;
  right: calc(var(--base-right) * var(--current-scale, 1)) !important;
}
.ala-top {
  --base-top: 0;
  top: calc(var(--base-top) * var(--current-scale, 1)) !important;
}

.ala-bottom {
  --base-bottom: 0;
  bottom: calc(var(--base-bottom) * var(--current-scale, 1)) !important;
}

.ala-gap {
  --base-gap: 0;

  gap: calc(var(--base-gap) * var(--current-scale, 1));
}
.ala-gap-col {
  --base-gap-col: 0;
  column-gap: calc(var(--base-gap-col) * var(--current-scale, 1));
}
.ala-radius {
  --base-radius: 0;
  border-radius: calc(var(--base-radius) * var(--current-scale, 1));
}

@media screen and (min-width: 1900px) {
  [class^="ala-"] {
    --current-scale: var(--scale-1900) !important;
  }
}

@media screen and (min-width: 1500px) and (max-width: 1899px) {
  [class^="ala-"] {
    --current-scale: var(--scale-1500) !important;
  }
}

@media screen and (min-width: 1200px) and (max-width: 1499px) {
  [class^="ala-"] {
    --current-scale: var(--scale-1200) !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1199px) {
  [class^="ala-"] {
    --current-scale: var(--scale-769) !important;
  }
}

@media screen and (max-width: 768px) {
  .ala-width {
    --base-width: 16px;
    width: calc(var(--base-width) * var(--current-scale, 1)) !important;
  }

  .ala-height {
    --base-height: 16px;
    height: calc(var(--base-height) * var(--current-scale, 1)) !important;
  }
  .ala-mt {
    --base-mt: 0;
    margin-top: calc(var(--base-mt) * var(--current-scale, 1)) !important;
  }
  .ala-pr {
    --base-pr: 0;
    padding-right: calc(var(--base-pr) * var(--current-scale, 1)) !important;
  }
  .ala-pl {
    --base-pl: 0;
    padding-left: calc(var(--base-pl) * var(--current-scale, 1)) !important;
  }
  .ala-right {
    --base-right: 0;
    right: calc(var(--base-right) * var(--current-scale, 1)) !important;
  }
  .ala-top {
    --base-top: 0;
    top: calc(var(--base-top) * var(--current-scale, 1)) !important;
  }
  [class^="ala-"] {
    --current-scale: var(--scale-768) !important;
  }
}