// Utility classes are there to help change one thing only or help with one thing only
// They are not replacement for good component's css, but rather tool that helps integrate component in heterogeneous environment.

// Position

.tds-u-sticky {
  position: sticky !important;
}

.tds-u-static {
  position: static !important;
}

.tds-u-relative {
  position: relative !important;
}

.tds-u-absolute {
  position: absolute !important;
}

.tds-u-fixed {
  position: fixed !important;
}

.tds-u-top0 {
  top: 0 !important;
}

.tds-u-right0 {
  right: 0 !important;
}

.tds-u-bottom0 {
  bottom: 0 !important;
}

.tds-u-left0 {
  left: 0 !important;
}

// Padding

.tds-u-p0 {
  padding: 0 !important;
}

.tds-u-pt0 {
  padding-top: 0 !important;
}

.tds-u-pr0 {
  padding-right: 0 !important;
}

.tds-u-pb0 {
  padding-bottom: 0 !important;
}

.tds-u-pl0 {
  padding-left: 0 !important;
}

.tds-u-p1 {
  padding: var(--tds-spacing-layout-8) !important;
}

.tds-u-pt1 {
  padding-top: var(--tds-spacing-layout-8) !important;
}

.tds-u-pr1 {
  padding-right: var(--tds-spacing-layout-8) !important;
}

.tds-u-pb1 {
  padding-bottom: var(--tds-spacing-layout-8) !important;
}

.tds-u-pl1 {
  padding-left: var(--tds-spacing-layout-8) !important;
}

.tds-u-p2 {
  padding: var(--tds-spacing-layout-16) !important;
}

.tds-u-pt2 {
  padding-top: var(--tds-spacing-layout-16) !important;
}

.tds-u-pr2 {
  padding-right: var(--tds-spacing-layout-16) !important;
}

.tds-u-pb2 {
  padding-bottom: var(--tds-spacing-layout-16) !important;
}

.tds-u-pl2 {
  padding-left: var(--tds-spacing-layout-16) !important;
}

.tds-u-p3 {
  padding: var(--tds-spacing-layout-24) !important;
}

.tds-u-pt3 {
  padding-top: var(--tds-spacing-layout-24) !important;
}

.tds-u-pr3 {
  padding-right: var(--tds-spacing-layout-24) !important;
}

.tds-u-pb3 {
  padding-bottom: var(--tds-spacing-layout-24) !important;
}

.tds-u-pl3 {
  padding-left: var(--tds-spacing-layout-24) !important;
}

// Margin

.tds-u-m0 {
  margin: 0 !important;
}

.tds-u-mt0 {
  margin-top: 0 !important;
}

.tds-u-mr0 {
  margin-right: 0 !important;
}

.tds-u-mb0 {
  margin-bottom: 0 !important;
}

.tds-u-ml0 {
  margin-left: 0 !important;
}

.tds-u-m1 {
  margin: var(--tds-spacing-layout-8) !important;
}

.tds-u-mt1 {
  margin-top: var(--tds-spacing-layout-8) !important;
}

.tds-u-mr1 {
  margin-right: var(--tds-spacing-layout-8) !important;
}

.tds-u-mb1 {
  margin-bottom: var(--tds-spacing-layout-8) !important;
}

.tds-u-ml1 {
  margin-left: var(--tds-spacing-layout-8) !important;
}

.tds-u-m2 {
  margin: var(--tds-spacing-layout-16) !important;
}

.tds-u-mt2 {
  margin-top: var(--tds-spacing-layout-16) !important;
}

.tds-u-mr2 {
  margin-right: var(--tds-spacing-layout-16) !important;
}

.tds-u-mb2 {
  margin-bottom: var(--tds-spacing-layout-16) !important;
}

.tds-u-ml2 {
  margin-left: var(--tds-spacing-layout-16) !important;
}

.tds-u-m3 {
  margin: var(--tds-spacing-layout-24) !important;
}

.tds-u-mt3 {
  margin-top: var(--tds-spacing-layout-24) !important;
}

.tds-u-mr3 {
  margin-right: var(--tds-spacing-layout-24) !important;
}

.tds-u-mb3 {
  margin-bottom: var(--tds-spacing-layout-24) !important;
}

.tds-u-ml3 {
  margin-left: var(--tds-spacing-layout-24) !important;
}

.tds-u-m-auto {
  margin: auto !important;
}

.tds-u-mt-auto {
  margin-top: auto !important;
}

.tds-u-mr-auto {
  margin-right: auto !important;
}

.tds-u-ml-auto {
  margin-left: auto !important;
}

.tds-u-mb-auto {
  margin-bottom: auto !important;
}

// Width

.tds-u-w-auto {
  width: auto !important;
}

.tds-u-w-100 {
  width: 100% !important;
}

.tds-u-w-75 {
  width: 75% !important;
}

.tds-u-w-50 {
  width: 50% !important;
}

.tds-u-w-25 {
  width: 25% !important;
}

// Height

.tds-u-h-auto {
  height: auto !important;
}

.tds-u-h-100 {
  height: 100% !important;
}

.tds-u-h-75 {
  height: 75% !important;
}

.tds-u-h-50 {
  height: 50% !important;
}

.tds-u-h-25 {
  height: 25% !important;
}

// Display

.tds-u-flex {
  display: flex !important;
}

.tds-u-inline-flex {
  display: inline-flex;
}

.tds-u-block {
  display: block !important;
}

.tds-u-inline-block {
  display: inline-block !important;
}

.tds-u-grid {
  display: grid !important;
}

.tds-u-display-none {
  display: none !important;
}

// Z-index

.tds-u-z10 {
  z-index: 10 !important;
}

.tds-u-z100 {
  z-index: 100 !important;
}

.tds-u-z500 {
  z-index: 500 !important;
}

.tds-u-z1000 {
  z-index: 1000 !important;
}

// Opacity

.tds-u-opacity-100 {
  opacity: 1 !important;
}

.tds-u-opacity-75 {
  opacity: 0.75 !important;
}

.tds-u-opacity-50 {
  opacity: 0.5 !important;
}

.tds-u-opacity-25 {
  opacity: 0.25 !important;
}

//Visibility

.tds-u-visibility-hidden {
  visibility: hidden !important;
}

.tds-u-visibility-visible {
  visibility: visible !important;
}

//Text align

.tds-u-textalign-start {
  text-align: start !important;
}

.tds-u-textalign-center {
  text-align: center !important;
}

.tds-u-textalign-end {
  text-align: end !important;
}

// Float

.tds-u-float-right {
  float: right !important;
}

.tds-u-float-left {
  float: left !important;
}

.tds-u-float-none {
  float: none !important;
}

// Overflow

.tds-u-overflow-auto {
  overflow: auto !important;
}

.tds-u-overflow-scroll {
  overflow: scroll !important;
}

.tds-u-overflow-hidden {
  overflow: hidden !important;
}

// Flex

.tds-u-flex-start {
  display: flex !important;
  justify-content: flex-start !important;
}

.tds-u-flex-center {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.tds-u-flex-end {
  display: flex !important;
  justify-content: flex-end !important;
}

.tds-u-flex-dir-col {
  flex-direction: column !important;
}

.tds-u-gap1 {
  gap: 8px !important;
}

.tds-u-gap2 {
  gap: 16px !important;
}

.tds-u-gap3 {
  gap: 24px !important;
}

.tds-u-gap4 {
  gap: 32px !important;
}

.tds-u-flex-wrap {
  flex-wrap: wrap !important;
}

// Align

.tds-u-align-start {
  align-items: start !important;
}

.tds-u-align-center {
  align-items: center !important;
}

.tds-u-align-end {
  align-items: end !important;
}

// Justify Content

.tds-u-justify-between {
  justify-content: space-between !important;
}

.tds-u-justify-around {
  justify-content: space-around !important;
}

.tds-u-justify-center {
  justify-content: center !important;
}