@use '../theme.scss' as *;
@use "../mixins.scss" as *;
@use "../breakpoints.scss";

/* Float helpers */

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.float-none {
  float: none;
}

/* Clearing helpers */

.clear {
  clear: both;
  float: none;
}

/* Block element alignment */

.center-block {
  display: table;
  margin: 0 auto;
}

/* Borders */

.no-border {
  border: 0 !important;
}

/* Inline element alignment */

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.align-centered {
  text-align: center;
}

.align-justified {
  text-align: justify;
}

/* Overflowing text */

.overflow-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Text and word wrapping */

.break-words {
  word-wrap: break-word;
}

.no-wrap {
  overflow: hidden;
  white-space: nowrap;
}

/* Visibility */

.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

.visibility-hidden {
  overflow: hidden;
}

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

.hide {
  display: none !important;
}

/* Scrollable containers */

.scrollable {
  -webkit-transform: translateZ(0);
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}

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

.scrollable.x-on-hover {
  overflow-x: hidden;
  overflow-y: hidden;
}

.scrollable.x-on-hover:hover {
  overflow-x: auto;
  overflow-y: hidden;
}

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

.scrollable.y-on-hover {
  overflow-x: hidden;
  overflow-y: hidden;
}

.scrollable.y-on-hover:hover {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Utility to enable disable selection of text */

.disable-user-select,
.user-select-none {
  user-select: none;
}

.enable-user-select,
.user-select-text {
  user-select: text;
}

/* Layout helpers */

.layout-relative {
  position: relative;
}

.layout-fit {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.layout-fixed-bottom,
.layout-fixed-left,
.layout-fixed-right,
.layout-fixed-top {
  position: fixed;
}

.layout-fixed-top {
  top: 0;
  left: 0;
  right: 0;
}

.layout-fixed-right {
  top: 0;
  right: 0;
  bottom: 0;
}

.layout-fixed-bottom {
  right: 0;
  bottom: 0;
  left: 0;
}

.layout-fixed-left {
  top: 0;
  bottom: 0;
  left: 0;
}

.layout-full-bleed {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* Sizing helpers */

.border-box-cnt {
  box-sizing: border-box;

  & > * {
    box-sizing: border-box;
  }
}

.border-box {
  box-sizing: border-box;
}

@include percent-based-height-step5(null);

.h-33p {
  height: 33.333%;
}

.h-auto {
  height: auto;
}

.max-h-100p {
  max-height: 100%;
}

@include percent-based-width-step5(null);

.w-33p {
  width: 33.333%;
}

.w-gca {
  width: 61.8%;
}

.w-gcb {
  width: 38.2%;
}

@each $bp-name, $bp-value in $breakpoints {
  @if $bp-name != 'xs' {
    @media (min-width: $bp-value) {
      @include percent-based-width-step5($bp-name);

      .w-#{$bp-name}-33p {
        width: 33.333%;
      }

      .w-#{$bp-name}-gca {
        width: 61.8%;
      }

      .w-#{$bp-name}-gcb {
        width: 38.2%;
      }
    }
  }
}

.w-auto {
  width: auto;
}

.max-w-100p {
  max-width: 100%;
}