/**
 * @file
 * Standard Drupal utilities and helper classes for Wares Point Theme.
 */

/* Screen reader / Visually hidden helper */
.visually-hidden {
  position: absolute !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  white-space: nowrap !important;
}

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  overflow: visible !important;
  clip: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  white-space: normal !important;
}

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Text & Media Alignments */
.align-left {
  float: left;
  margin-right: var(--wp-space-lg);
  margin-bottom: var(--wp-space-md);
}

.align-right {
  float: right;
  margin-left: var(--wp-space-lg);
  margin-bottom: var(--wp-space-md);
}

.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Text alignments */
.text-align-left {
  text-align: left;
}

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

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

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

/* Inline container */
.container-inline div,
.container-inline label {
  display: inline;
}

/* Ajax progress / throbber indicator */
.ajax-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--wp-space-xs);
  padding: 2px 6px;
  font-size: 0.875rem;
  color: var(--wp-brown-deep);
}

.ajax-progress-throbber .throbber {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--wp-sand-primary);
  border-top-color: transparent;
  border-radius: var(--wp-radius-full);
  animation: wp-rotate 0.75s linear infinite;
}

.ajax-progress-fullscreen {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: var(--wp-radius-md);
  background-color: var(--wp-white);
  box-shadow: var(--wp-shadow-lg);
  border: 1px solid var(--wp-sand-primary);
}

@keyframes wp-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}