base_ui/assets/common/scss/mixin.scss

@mixin textOverflow($maxWidth) {
  max-width: $maxWidth;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  // &:hover {
  //   overflow:visible;
  // }
}

@mixin transition($all) {
  -webkit-transition: $all;
  -ms-transition: $all;
  transition: $all;
}

@mixin flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

@mixin transform($transforms) {
  -webkit-transform: $transforms;
  -moz-transform: $transforms;
  -ms-transform: $transforms;
  transform: $transforms;
}

@mixin transition($all) {
  -webkit-transition: $all;
  -ms-transition: $all;
  transition: $all;
}
@mixin lineclamp($num) {
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@mixin hexagon($color, $width, $height) {
  background: $color;
  position: relative;
  width: $width;
  height: $height;
  &::before {
    content: "";
    position: absolute;
    top: -($height / 2) + 1;
    left: 0;
    width: 0;
    height: 0;
    border-left: ($width / 2) solid transparent;
    border-right: $width / 2 solid transparent;
    border-bottom: $height / 2 solid $color;
  }
  &::after {
    content: "";
    position: absolute;
    bottom: -($height / 2) + 1;
    left: 0;
    width: 0;
    height: 0;
    border-left: $width / 2 solid transparent;
    border-right: $width / 2 solid transparent;
    border-top: $height / 2 solid $color;
  }
}

@mixin section-backgrounds($pic-address) {
  //background-image: url($pic-address);
  background-size: cover;
  position: relative;
  background-position: center;
  &::before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../img/dot-pattern.png");
    z-index: 1;
  }
  &::after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.15);
    z-index: 1;
  }
}
%horizontal-center {
  @include flexbox;
  align-items: center;
}

%flex-center {
  @include flexbox;
  align-items: center;
  justify-content: center;
}

%normal-transition {
  @include transition(all 0.3s ease-in-out);
}

%cover-link {
  position: relative;
  .cover-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
  }
}

//mixin

// @mixin bordersolid-w-t-pos($width, $type, $color, $bt: null) {
//     @if $bt {
//       #{$bt}: $width $type $color;
//     } @else {
//       border: $width $type $color;
//     }
//   }

//mixin - border

@mixin border-transparent($width) {
  border: $width solid transparent;
}
@mixin border($width, $color) {
  border: $width solid $color;
}
@mixin border-top($width, $color) {
  border-top: $width solid $color;
}
@mixin border-bottom($width, $color) {
  border-bottom: $width solid $color;
}

@mixin border-left($width, $color) {
  border-left: $width solid $color;
}
@mixin border-right($width, $color) {
  border-right: $width solid $color;
}
// End - mixin - border

@mixin btn-primary {
  @extend %simple-btn;
  border-color: var(--color-1);
  border-radius: 20px;
  min-width: 64px;
  font-size: 14px;
  height: 32px;
}

@mixin font-icon-background-color($color) {
  background: $color;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}