/* ==========================================================================
   Config
   ========================================================================== */

/* ==========================================================================
   Styles
   ========================================================================== */

.gui-image-loader {
  background: $neutral-lightest;
  transition: all $animation-time-micro;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  overflow: hidden;

  img {
    transition: opacity $animation-time-micro;
    opacity: 0;
  }

  .gui-icon {
    position: absolute;
  }
}

/* ==========================================================================
   Modifiers
   ========================================================================== */

.gui-image-loader--show {
  background: none;

  img {
    opacity: 1;
  }
}

.gui-image-loader--errored {
  path {
    fill: $primary-red;
  }
}