$loader-size: 12px;
$loader-color: $color-blue-500;

@mixin loader($color: $loader-color, $size: $loader-size) {
  content: "";
  position: absolute;
  display: block;
  left: calc(50% - ( #{$size} / 2 ));
  top: calc(50% - ( #{$size} / 2 ));
  height: $size;
  width: $size;
  border: 2px solid $color;
  border-radius: 50%;
  border-right-color: transparent;
  border-top-color: transparent;
  animation: spin-around 0.5s infinite linear;
}

@mixin paneLoader {
  position: relative;
  min-height: 224px;
  margin-top: 0;

  * {
    display: none;
  }

  &::before {
    content: attr(data-loading);
    top: calc(50% + 12px);
    left: 0;
    width: 100%;
    text-align: center;
    position: absolute;
    font-size: $font-m;
    color: $color-blue-500;
  }

  &::after {
    @include loader;
  }
}

@mixin scrollBar {
  overflow: auto;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: $color-grey-100;
    border-radius: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background: $color-grey-300;
    border-radius: 8px;
  }
}

@mixin ctrl-error {
  input,
  textarea,
  select {
    border-color: $form-ctrl-error-border-color;

    &:focus:required:invalid:focus, // @override global.css
    &:focus {
      box-shadow: $form-ctrl-error-focus-shadow !important; // @override important
      border: $form-ctrl-error-border !important; // @override important
    }
  }

  .o-input-addon {
    border-color: $form-ctrl-error-border-color;
  }

  & + .o-form-hint {
    color: $color-red-500;

    &::before {
      content: "\f06a";
      color: $color-red-500;
    }
  }
}

@mixin ctrl-success {
  input,
  textarea,
  select {
    border-color: $form-ctrl-success-border-color;

    &:focus:required:invalid:focus, // @override global.css
    &:focus {
      box-shadow: $form-ctrl-success-focus-shadow !important; // @override important
      border: $form-ctrl-success-border !important; // @override important
    }
  }

  .o-input-addon {
    border-color: $form-ctrl-success-border-color;
  }

  & + .o-form-hint {
    color: $color-green-600;

    &::before {
      content: "\f058";
      color: $color-green-500;
    }
  }
}