@import "../../styles/global-css-settings.scss";
@import "../../styles/typography.scss";

@mixin shine-animation() {
  overflow: hidden;
  &::before {
    display: inline-block;
    content:"";
    opacity: 0.1;
    background-image: linear-gradient(90deg, transparent 0%, var(--placeholder-color) 30%, var(--placeholder-color) 70%, transparent 100%);
    width: 300%;
    height: 300%;
    margin-bottom: 20px;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: shine;
    animation-timing-function: $expand-animation-timing;
  }
  @keyframes shine {
    0% {
      margin-left: -500%;
    }
    100% {
      margin-left: 500%;
    }
  }

  // the better options which does not work
  @keyframes shine2 {
    0% {
      background-position: 500px 0;
    }

    100% {
      background-position: -500px 0;
    }
  }
}

@mixin skeleton($radius: $border-radius-small) {
  @include theme-prop(background, disabled-background-color); // should be replaced with all grey color
  border-radius: $radius;
  @include shine-animation;

}

.monday-style-skeleton {
  &_rectangle {
    $rectangle-default-size: 160px;
    height: $rectangle-default-size;
    width: $rectangle-default-size;
    @include skeleton;
  }

  &_circle {
    $circle-default-size: 40px;
    $circle-radius: 50%;
    height: $circle-default-size;
    width: $circle-default-size;
    @include skeleton($circle-radius);
  }

  &_text {
    width: 162px;
    @include skeleton;
    &--h1 {
      height: $h1-empty-state-height
    }
    &--h2 {
      height: $h2-empty-state-height;
    }
    &--h2 {
      height: $h3-empty-state-height;
    }
    &--h4 {
      height: $h4-empty-state-height;
    }
    &--h5 {
      height: $h5-empty-state-height;
    }
    &--h6 {
      height: $h6-empty-state-height;
    }
    &--h6 {
      height: $p-empty-state-height;
    }
    &--small, &--custom {
      height: $small-empty-state-height;
    }
  }
}