/*--------------
    Loading
---------------*/

.loading.input:not(.icon) {
  position: relative;
  cursor: default;
  text-shadow: none !important;
  color: transparent !important;
  opacity: var(--input-loading-opacity);
  pointer-events: auto;
  transition: var(--input-loading-transition);
}

.loading.icon.input .icon {
  position: relative;
  color: transparent !important;
}

.loading.icon.input > .icon:before,
.loading.input:not(.icon)::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  margin: var(--loader-margin);
  width: var(--loader-size);
  height: var(--loader-size);

  border-radius: var(--circular-radius);
  border: var(--loader-line-width) solid var(--loader-fill-color);
}
.loading.icon.input > .icon:after,
.loading.input:not(.icon)::after {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;

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

  animation: input-spin var(--loader-speed) linear;
  animation-iteration-count: infinite;

  border-radius: var(--circular-radius);

  border-color: var(--loader-line-color) transparent transparent;
  border-style: solid;
  border-width: var(--loader-line-width);

  box-shadow: 0px 0px 0px 1px transparent;
}

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


/* Inverted */
.loading.input.inverted .icon:before,
.loading.input.inverted:before {
  border-color: var(--inverted-loader-fill-color);
}
.loading.input.inverted .icon:after,
.loading.input.inverted:after {
  border-top-color: var(--inverted-loader-line-color);
}