.zui-pointer {
  cursor: pointer;
}

.zui-fw-500 {
  font-weight: 500;
}

.zui-print {
  display: none;
}
@media print {
  .zui-print {
    display: block;
  }
}

.zui-short-text {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
}

.zui-noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

input.zui-number-hide-arrows {
  /* Chrome, Safari, Edge, Opera */
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Firefox */
  &[type='number'] {
    -moz-appearance: textfield;
  }
}

// custom scrollbar: https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp
// hide scrollbar but still allow scroll
.zui-hide-scrollbar {
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox */
  &::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
}

@keyframes zui-arotate {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.zui-rotate {
  animation: zui-arotate 1s infinite linear;
}

.w-auto {
  width: auto;
}

.h-auto {
  height: auto;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.zui-mix-color {
  background-image: linear-gradient(to left, violet, indigo, green, blue, yellow, orange, red);
  background-clip: text;
  color: transparent;
}

@mixin zui-date-time-picker-cell-not-selected($className) {
  .#{$className} .mat-calendar-body-today:not(.mat-calendar-body-selected) {
    @content;
  }
}

@mixin zui-content-image($className, $url) {
  .#{$className} {
    display: inline-block;
    content: url(#{$url});
  }
}

@for $i from 1 through 10 {
  .d-flex-#{$i} {
    flex: #{$i};
  }
}

@for $i from 0 through 100 {
  // padding
  .p-#{$i} {
    padding: #{$i}px !important;
  }
  .pt-#{$i} {
    padding-top: #{$i}px !important;
  }
  .pb-#{$i} {
    padding-bottom: #{$i}px !important;
  }
  .pl-#{$i} {
    padding-left: #{$i}px !important;
  }
  .pr-#{$i} {
    padding-right: #{$i}px !important;
  }
  .px-#{$i} {
    padding-left: #{$i}px !important;
    padding-right: #{$i}px !important;
  }
  .py-#{$i} {
    padding-top: #{$i}px !important;
    padding-bottom: #{$i}px !important;
  }

  // margin
  .m-#{$i} {
    margin: #{$i}px !important;
  }
  .mt-#{$i} {
    margin-top: #{$i}px !important;
  }
  .mb-#{$i} {
    margin-bottom: #{$i}px !important;
  }
  .ml-#{$i} {
    margin-left: #{$i}px !important;
  }
  .mr-#{$i} {
    margin-right: #{$i}px !important;
  }
  .mx-#{$i} {
    margin-left: #{$i}px !important;
    margin-right: #{$i}px !important;
  }
  .my-#{$i} {
    margin-top: #{$i}px !important;
    margin-bottom: #{$i}px !important;
  }

  // margin & padding
  .mp-#{$i} {
    margin: #{$i}px !important;
    padding: #{$i}px !important;
  }
  .mpt-#{$i} {
    margin-top: #{$i}px !important;
    padding-top: #{$i}px !important;
  }
  .mpb-#{$i} {
    margin-bottom: #{$i}px !important;
    padding-bottom: #{$i}px !important;
  }
  .mpl-#{$i} {
    margin-left: #{$i}px !important;
    padding-left: #{$i}px !important;
  }
  .mpr-#{$i} {
    margin-right: #{$i}px !important;
    padding-right: #{$i}px !important;
  }
  .mpx-#{$i} {
    margin-left: #{$i}px !important;
    margin-right: #{$i}px !important;
    padding-left: #{$i}px !important;
    padding-right: #{$i}px !important;
  }
  .mpy-#{$i} {
    margin-top: #{$i}px !important;
    margin-bottom: #{$i}px !important;
    padding-top: #{$i}px !important;
    padding-bottom: #{$i}px !important;
  }

  // size
  .width-#{$i} {
    width: #{$i}px !important;
  }
  .min-w-#{$i} {
    min-width: #{$i}px;
  }
  .max-w-#{$i} {
    max-width: #{$i}px;
  }
  .max-wp-#{$i} {
    max-width: #{$i}+ '%' !important;
  }

  // height
  .height-#{$i} {
    height: #{$i}px !important;
  }
  .min-h-#{$i} {
    min-height: #{$i}px;
  }
  .max-h-#{$i} {
    max-height: #{$i}px;
  }
  .max-hp-#{$i} {
    max-height: #{$i}+ '%' !important;
  }

  // others
  .fs-#{$i} {
    font-size: #{$i}px;
  }
  .lh-#{$i} {
    line-height: #{$i}px;
  }
}