@use '../../variables' as *;

.box {
  display: flex;
  position: relative;

  &.debug,
  &.debug .box {
    outline: 1px solid red;
  }
  &.reverse {
    flex-direction: row-reverse;
    &.column {
      flex-direction: column-reverse;
    }
  }
}

button,
input {
  border: none;
  outline: none;
  border-radius: 0;
}

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

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

.showScroll {
  overflow-y: scroll;
  overflow-x: hidden;
}

button.box {
  cursor: pointer;
  line-height: 24px;
}

.column {
  flex-direction: column;
}

.flex {
  flex: 1;
  max-height: 100%;
  max-width: 100%;
}

.wrap {
  flex-wrap: wrap;
}

.square {
  padding-bottom: 100%;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-text {
  cursor: text;
}

.cursor-grab {
  cursor: grab;
}

.box:not(.column) {
  flex-direction: row;
  &.h-start {
    justify-content: flex-start;
  }
  &.h-center {
    justify-content: center;
  }
  &.h-end {
    justify-content: flex-end;
  }
  &.h-space {
    justify-content: space-around;
  }
  &.h-spread {
    justify-content: space-between;
  }
  &.v-start {
    align-items: flex-start;
  }
  &.v-center {
    align-items: center;
  }
  &.v-end {
    align-items: flex-end;
  }
}

.column {
  flex-direction: column;
  &.v-start {
    justify-content: flex-start;
  }
  &.v-center {
    justify-content: center;
  }
  &.v-end {
    justify-content: flex-end;
  }
  &.v-space {
    justify-content: space-around;
  }
  &.v-spread {
    justify-content: space-between;
  }
  &.h-start {
    align-items: flex-start;
  }
  &.h-center {
    align-items: center;
  }
  &.h-end {
    align-items: flex-end;
  }
}

@each $name, $size in $space {
  .vPad-#{$name} {
    padding-top: $size;
    padding-bottom: $size;
  }

  .hPad-#{$name} {
    padding-left: $size;
    padding-right: $size;
  }

  .gap-#{$name} {
    gap: $size;
  }
}

@each $name, $size in $sizes {
  .height-#{$name} {
    --box-height: #{$size};
    height: $size;
    min-height: $size;
  }

  .width-#{$name} {
    --box-width: #{$size};
    width: $size;
    min-width: $size;
  }

  .minHeight-#{$name} {
    min-height: #{$size};
  }

  .minWidth-#{$name} {
    min-width: #{$size};
  }
}

.overflow-hidden {
  contain: paint;
  overflow: clip;
}
.overflow-scroll-y {
  overflow-y: scroll;
}

.rounded-tiny {
  border-radius: var(--border-radius-tiny);
}

.rounded-small {
  border-radius: var(--border-radius-small);
}

.rounded-medium {
  border-radius: var(--border-radius-medium);
}

.rounded-full {
  border-radius: 50%;
}

@for $i from 1 through 4 {
  .shadow-level#{$i} {
    filter: var(--shadow-level-#{$i});
  }
}

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

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