// Center align children with flex
.inline-flex {
  display: inline-flex !important;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center-x {
  display: flex;
  justify-content: center;
}

.flex-center-y {
  display: flex;
  align-items: center;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flex-column-center-x {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-column-center-y {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

// float
.float-left {
  float: left;
}
.float-right {
  float: right;
}
.float-none {
  float: none;
}

// margin
.margin-auto {
  margin: auto;
}

.margin-ya {
  margin-top: auto;
  margin-bottom: auto;
}
.margin-ta {
  margin-top: auto;
}
.margin-ba {
  margin-bottom: auto;
}

.push-center,
.margin-xa {
  margin-left: auto;
  margin-right: auto;
}

.push-right,
.margin-la {
  margin-left: auto;
}

.push-left,
.margin-ra {
  margin-right: auto;
}

// position
.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.place-expand {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.place-expand-x {
  left: 0;
  right: 0;
}

.place-expand-y {
  top: 0;
  bottom: 0;
}

.sticky-top,
.fixed-top,
.place-top {
  top: 0;
}
.sticky-bottom,
.fixed-bottom,
.place-bottom {
  bottom: 0;
}
.sticky-left,
.fixed-left,
.place-left {
  left: 0;
}
.sticky-right,
.fixed-right,
.place-right {
  right: 0;
}

.fixed-left,
.fixed-right,
.fixed-bottom,
.fixed-top {
  position: fixed;
  z-index: $ZINDEX_FIXED;
}

.sticky-left,
.sticky-right,
.sticky-bottom,
.sticky-top {
  position: sticky;
  z-index: $ZINDEX_STICKY;
}

.fixed-bottom,
.fixed-top,
.sticky-bottom,
.sticky-top {
  left: 0;
}

// overflow classes
.scrollable {
  overflow: auto;
}
.scrollable-x {
  overflow-x: auto;
  overflow-y: hidden;
}
.scrollable-y {
  overflow-x: hidden;
  overflow-y: auto;
}