/* Utilities :: Skeleton */

.u-skeleton {
  background: rgba(fabric-color('primary'), 0.3) !important;
  border: none;
  box-shadow: none;
  color: transparent !important;
  pointer-events: none;
  position: relative;

  &:before {
    @include fabric-size(0%, 100%);
    @include absolute(top 0 left 0);
    @include animation('leftToRight 3000ms ease-in-out infinite');
    background: rgba(fabric-color('primary'), 0.4);
    border: none;
    content: '';
    opacity: 1;
  }

  &__text {
    background: rgba(fabric-color('primary'), 0.6) !important;
    border: none !important;
    box-shadow: none;
    color: transparent !important;
    margin-bottom: 0.5rem;
    pointer-events: none;
    position: relative;

    &:before {
      @include fabric-size(0%, 100%);
      @include absolute(top 0 left 0);
      @include animation('leftToRight 3000ms ease-in-out infinite');
      background: rgba(fabric-color('primary'), 1);
      content: '';
      opacity: 1;
    }
    > * {
      color: transparent !important;
    }
  }

  &__heading {
    @include fabric-font-size($fabric-font-size-h1);
  }

  &__toggle {
    &:before {
      background: none !important;
      border: none !important;
    }
    &:after {
      background: fabric-color('grey') !important;
    }
  }
}