@use './common-var.scss' as *;

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace +
      str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

/** display start */
$display: inline, block, inline-block, flex, inline-flex, grid, inline-grid;
@each $type in $display {
  .#{$type} {
    display: $type;
  }
}

.hidden {
  display: none;
}
/** display end */

/** flex start*/
$itemsTypes: flex-start, center, flex-end, baseline, initial;
$justifyTypes: flex-start, center, flex-end, baseline, initial, space-between, space-around, space-evenly;
$direction: row, row-reverse, column, column-reverse, initial;

@each $type in $itemsTypes {
  .items-#{str-replace($type,'flex-','')} {
    align-items: $type;
  }
}
@each $type in $justifyTypes {
  .justify-#{str-replace(str-replace($type,'flex-',''),'space-','')} {
    justify-content: $type;
  }
}
@each $type in $direction {
  .direction-#{str-replace($type,'erse','')} {
    flex-direction: $type;
  }
}

.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}

/** flex end*/

/** position start */
$position: relative, absolute, fixed, sticky, static, initial;
@each $type in $position {
  .#{$type} {
    position: $type;
  }
}
/** position end */

/** text-align start */
$textAlignType: left, center, right, justify, start, end;
@each $type in $textAlignType {
  .text-#{$type} {
    text-align: $type;
  }
}
/** text-align end */

/** combination start */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/** combination end */

/** margin/padding start */
$gap-type: 'margin', 'padding';
$direction: 'left', 'top', 'right', 'bottom';

@each $type, $size
  in map-merge(
    $cst-gap-space,
    (
      'auto': auto,
      'unset': unset
    )
  )
{
  @each $t in $gap-type {
    .#{str-slice($t,0,1)}-#{$type} {
      #{$t}: $size;
    }
    @each $d in $direction {
      .#{str-slice($t,0,1)}-#{str-slice($d,0,1)}-#{$type} {
        #{$t}-#{$d}: $size;
      }
    }
  }
}
/** margin/padding end */


/** radius start */
@each $type, $size in $ep-border-radius {
  .radius-#{$type} {
      border-radius: $size;
  }
  .radius-lt-#{$type} {
      border-radius: $size 0 0 0;
  }
  .radius-rt-#{$type} {
      border-radius: 0 $size 0 0;
  }
  .radius-rb-#{$type} {
      border-radius: 0 0 $size 0;
  }
  .radius-lb-#{$type} {
      border-radius: 0 0 0 $size;
  }
}
/** firadiusll end */

/** fill start */
@each $type,$color in $ep-fill-color {
  @if($type != ''){
    .fill-#{$type} {
      background-color: $color;
    }
  } @else {
    .fill {
      background-color: $color;
    }
  }
}
/** fill end */

/** shadow start */
@each $type, $shadow in $ep-box-shadow {
  @if($type != ''){
    .shadow-#{$type} {
      box-shadow:  $shadow;
    }
  } @else {
    .shadow {
      box-shadow:  $shadow;
    }
  }
}
/** shadow end */

.full {
  width: 100%;
  height: 100%;
}

.full-w {
  width: 100%;
}

.full-h {
  height: 100%;
}

.fit-w-available {
  width: -webkit-fill-available;
}
.fit-h-available {
  height: -webkit-fill-available;
}

.scroll-auto {
  overflow: auto;
}

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

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

.full-scroll-auto {
  @extend .full;
  @extend .scroll-auto;
}

.full-scroll-y-auto {
  @extend .full-h;
  @extend .scroll-y-auto;
}

.full-scroll-x-auto {
  @extend .full-w;
  @extend .scroll-x-auto;
}

.overflow-hidden {
  overflow: hidden;
}

.pointer {
  cursor: pointer;
}

.not-allow {
  cursor: not-allowed;
}
