@use './variables' as v;

$slick-margin-max-count: 30;
$slick-padding-max-count: 30;

.pointer {
  cursor: pointer;
}
.bold {
  font-weight: bold;
}

.fake-hyperlink {
  cursor: pointer;
  color: v.$slick-link-color;
  &:hover {
    text-decoration: underline;
  }
}

.button-style {
  cursor: pointer;
  background-color: var(--slick-button-style-bg-color, v.$slick-button-style-bg-color);
  border: 1px solid #{var(--slick-button-border-color, v.$slick-button-border-color)};
  border-radius: 2px;
  justify-content: center;
  text-align: center;
  &:hover {
    border-color: var(--slick-button-hover-border-color, v.$slick-button-hover-border-color);
  }
}

.delete-icon :hover {
  color: #b14c4a;
}
.edit-icon:hover,
.info-icon:hover {
  color: #0099ff;
}

@for $percent from 1 through 10 {
  .height-#{$percent * 10} {
    height: #{$percent * 10%} !important;
  }
}

// margin-0px up to margin-30px
@for $i from 0 through $slick-margin-max-count {
  .margin-#{$i}px {
    margin: #{$i}px;
  }
}

// padding-0px up to padding-30px
@for $i from 0 through $slick-padding-max-count {
  .padding-#{$i}px {
    padding: #{$i}px;
  }
}

.margin-auto {
  margin: auto;
}

/* Text and Alignment Utilities */
.text-bold {
  font-weight: bold !important;
}
.text-italic {
  font-style: italic !important;
}
.text-center {
  text-align: center !important;
}
.text-left {
  text-align: left !important;
}
.text-right {
  text-align: right !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-underline {
  text-decoration: underline !important;
}

.vertical-align-bottom,
.vertical-align-middle,
.vertical-align-top {
  display: inline-block;
}
.vertical-align-bottom {
  vertical-align: bottom;
}
.vertical-align-middle {
  vertical-align: middle;
}
.vertical-align-top {
  vertical-align: top;
}