// NOTE: Double .loader class is used to increase selector specificity
.loader,
.shoptet-icon.loader.loader {
  --loader-size: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--loader-size);
  height: var(--loader-size);

  vertical-align: middle;

  &::before {
    content: '';

    display: inline-block;

    width: calc(var(--loader-size) - 4px);
    height: calc(var(--loader-size) - 4px);

    border: 2px solid rgb(var(--border--controls-low-default--light));
    border-top-color: rgb(var(--border--controls-medium-selected--light));
    border-radius: 50%;

    animation: loader-animation 0.6s linear infinite;
  }
}

.loader--sm {
  --loader-size: 16px;
}

.loader--md {
  --loader-size: 24px;
}

.loader--lg {
  --loader-size: 48px;
}

.loaderArea {
  &--screen {
    position: fixed;
    z-index: var(--elevation--loader);
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    text-align: center;

    background: rgb(var(--background--neutral-base-default--light) / var(--blend--high--light));

    .loader {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.table__cell--actions {
  position: relative;
  min-width: 48px;
}

/* the .loader dimensions mimics `shp-visible` icon button, because currently the icon button is not correcly aligned inside the boundary box */
.shoptet-icon.loader.loader {
  --loader-size: 24px;

  &::before {
    position: unset;
    transform: unset;
    background: none;;
  }
}

@keyframes loader-animation {
  0% {
    transform: rotate(0deg);
  }

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

/* All loaders in Smarty world are hidden by default, but mostly living in DOM */
.loaderArea,
.loader {
  &.hidden {
    display: none;
  }
}