/* Helper classes, as in the app (web-frontend core/assets/scss/helpers.scss). */

.clearfix::after {
  clear: both;
  content: '';
  display: table;
}

.hidden {
  display: none;
}

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

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

.background-white {
  background-color: var(--palette-white) !important;
}

.color-primary {
  color: var(--palette-slate-500) !important;
}

.color-success {
  color: var(--palette-green-300) !important;
}

.color-warning {
  color: var(--palette-yellow-300) !important;
}

.color-error {
  color: var(--palette-red-300) !important;
}

.color-neutral {
  color: var(--palette-neutral-100) !important;
}

.opacity-0 {
  opacity: 0 !important;
}

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

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

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

.border-none,
.border-none:focus,
.border-none:focus-within {
  border: none !important;
  box-shadow: none !important;
}

.border-bottom-1 {
  border-bottom: 1px solid var(--palette-neutral-300) !important;
}

.background-none,
.background-none:hover,
.background-none::after,
.background-none::before {
  background: none !important;
}

.padding-none {
  padding: 0 !important;
}

.p-t-0 {
  padding-top: 0 !important;
}
.p-t-2 {
  padding-top: 16px !important;
}

.p-b-0 {
  padding-bottom: 0 !important;
}

.p-h-0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.p-h-1 {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.p-h-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.p-h-3 {
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.p-h-4 {
  padding-left: 48px !important;
  padding-right: 48px !important;
}

.p-v-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.p-v-1 {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.p-v-2 {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}
.p-v-3 {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}
.p-v-4 {
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.margin-none {
  margin: 0 !important;
}

.m-t-0 {
  margin-top: 0 !important;
}
.m-t-1 {
  margin-top: 8px !important;
}
.m-t-2 {
  margin-top: 16px !important;
}
.m-t-3 {
  margin-top: 32px !important;
}
.m-t-4 {
  margin-top: 48px !important;
}
.m-t-auto {
  margin-top: auto !important;
}

.m-b-0 {
  margin-bottom: 0 !important;
}
.m-b-1 {
  margin-bottom: 8px !important;
}
.m-b-2 {
  margin-bottom: 16px !important;
}
.m-b-3 {
  margin-bottom: 32px !important;
}
.m-b-4 {
  margin-bottom: 48px !important;
}
.m-b-auto {
  margin-bottom: auto !important;
}

.m-l-auto {
  margin-left: auto !important;
}

.m-l-0 {
  margin-left: 0 !important;
}

.m-l-1 {
  margin-left: 8px !important;
}

.m-l-2 {
  margin-left: 16px !important;
}

.m-l-3 {
  margin-left: 32px !important;
}

.m-l-4 {
  margin-left: 48px !important;
}

.m-r-auto {
  margin-right: auto !important;
}

.m-r-0 {
  margin-right: 0 !important;
}

.m-r-1 {
  margin-right: 8px !important;
}

.m-r-2 {
  margin-right: 16px !important;
}

.m-r-3 {
  margin-right: 32px !important;
}

.m-r-4 {
  margin-right: 48px !important;
}

.resizing-horizontal {
  cursor: col-resize !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

/* This selector can only be used to temporarily show an element for calculating
   positions. */
.forced-block {
  display: block !important;
}

/* Sometimes we forcefully want to disable the user-select property to initial
   because the element is for example being edited via a contenteditable attribute
   which does not work in combination with the user-select: none; property in Safari. */
.forced-user-select-initial {
  user-select: initial !important;
}

.forced-text-overflow-initial {
  text-overflow: initial !important;
}

.forced-pointer-events-auto {
  pointer-events: auto !important;
}

.pointer-events-none {
  pointer-events: none !important;
}

.prevent-scroll {
  overflow: hidden !important;
}

.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

.text-align-center {
  text-align: center !important;
}

.remove-number-input-controls {
  appearance: textfield !important;
}
.remove-number-input-controls::-webkit-outer-spin-button,
.remove-number-input-controls::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

.flex {
  display: flex;
  gap: var(--gap, 8px);
}

.flex-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap, 8px);
}

.flex-column {
  display: flex;
  flex-direction: column;
  gap: var(--gap, 16px);
}

.flex-row-centered {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap, 8px);
}

.field-sizing-content {
  field-sizing: content !important;
}

.width-stretch {
  width: stretch !important;
  max-width: stretch !important;
  flex-grow: 1 !important;
  flex-shrink: 1 !important;
  flex-basis: 0 !important;
}

.width-auto {
  width: auto !important;
}

.height-stretch {
  height: stretch !important;
  max-height: stretch !important;
}

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

.flex-100 {
  width: 100% !important;
  flex-basis: 100% !important;
}

.align-items-center {
  display: flex !important;
  align-items: center !important;
}

.justify-content-center {
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

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

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

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  50% {
    transform: rotate(360deg);
  }

  100% {
    transform: rotate(720deg);
  }
}

.rotate-90 {
  rotate: 90deg !important;
}

.rotate-180 {
  rotate: 180deg !important;
}

.rotate-270 {
  rotate: 270deg !important;
}

.flip-h {
  transform: scaleX(-1) !important;
}

.flip-v {
  transform: scaleY(-1) !important;
}