@gitlab/ui/src/scss/utility-mixins/text.scss

@import '../mixins';

/**
* Text align utilities
*/
@mixin gl-text-left {
  text-align: left;
}

@mixin gl-text-center {
  text-align: center;
}

@mixin gl-text-right {
  text-align: right;
}

@mixin gl-reset-text-align {
  text-align: inherit;
}

/**
* Text utilities
*/
@mixin gl-text-decoration-none($active: true, $focus: true, $hover: true) {
  text-decoration: none;
}

@mixin gl-text-decoration-underline($active: true, $focus: true, $hover: true) {
  text-decoration: underline;
}

@mixin gl-reset-text-decoration-color {
  text-decoration-color: inherit;
}

@mixin gl-text-decoration-color-gray-500 {
  text-decoration-color: $gray-500;
}

@mixin gl-text-decoration-color-gray-700 {
  text-decoration-color: $gray-700;
}

@mixin gl-text-decoration-color-gray-900 {
  text-decoration-color: $gray-900;
}

@mixin gl-text-transform-none {
  text-transform: none;
}

@mixin gl-text-transform-capitalize {
  text-transform: capitalize;
}

@mixin gl-text-transform-uppercase {
  text-transform: uppercase;
}

/**
* Text overflow utilities
*
* Naming convention: gl-text-overflow-{value}
*/
@mixin gl-text-overflow-ellipsis {
  text-overflow: ellipsis;
}

/**
* Line clamp utilities
*
* Naming convention: gl-line-clamp-{value}
*/
@mixin gl-line-clamp-1 {
  white-space: normal;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  // stylelint-disable-next-line value-no-vendor-prefix
  display: -webkit-box;
  overflow: hidden;
}

@mixin gl-line-clamp-2 {
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  // stylelint-disable-next-line value-no-vendor-prefix
  display: -webkit-box;
  overflow: hidden;
}

@mixin gl-line-clamp-3 {
  white-space: normal;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  // stylelint-disable-next-line value-no-vendor-prefix
  display: -webkit-box;
  overflow: hidden;
}

/**
* Text indent utilities
*
* Naming convention: gl-text-indent-{value}
*/
@mixin gl-text-indent-0 {
  text-indent: 0;
}

@mixin gl-text-indent-hide {
  text-indent: -9999px;
}

/**
* White-space utilities.
*
* naming convention: gl-white-space-{value}
*/
@mixin gl-white-space-normal {
  white-space: normal;
}

@mixin gl-white-space-nowrap {
  white-space: nowrap;
}

@mixin gl-white-space-pre-wrap {
  white-space: pre-wrap;
}

@mixin gl-white-space-pre-line {
  white-space: pre-line;
}

/**
* Responsive White-space utilities
*
* naming convention: gl-{breakpoint}-white-space-{value}
*/

@mixin gl-md-white-space-nowrap {
  @include gl-media-breakpoint-up(md) {
    white-space: nowrap;
  }
}

/**
* Word utilities.
*
* naming convention: gl-word-{action}-{value}
*/

@mixin gl-word-break-all {
  word-break: break-all;
}

@mixin gl-word-break-word {
  word-break: break-word;
}

@mixin gl-overflow-break-word {
  overflow-wrap: break-word;
  hyphens: auto;
}

@mixin gl-overflow-anywhere {
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

// Deprecated, prefer `gl-text-truncate`
@mixin gl-str-truncated {
  @include str-truncated;
}

// single line ellipsis'd text
@mixin gl-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}