@import '../../themes/default/elements/placeholder.variables';

@if $use-placeholder {
  /*-------------------
  //@-    Content
  --------------------*/

  .ui.placeholder {
    position: static;
    overflow: hidden;
    animation: placeholderShimmer $placeholder-loading-animation-duration linear;
    animation-iteration-count: infinite;
    background-color: $white;
    background-image: $placeholder-loading-gradient;
    background-size: $placeholder-loading-gradient-width 100%;
    max-width: $placeholder-max-width;
  }

  @keyframes placeholderShimmer{
    0% {
      background-position: (-$placeholder-loading-gradient-width) 0
    }
    100% {
      background-position: $placeholder-loading-gradient-width 0
    }
  }

  .ui.placeholder + .ui.placeholder {
    margin-top: $placeholder-consecutive-spacing;
  }
  .ui.placeholder + .ui.placeholder {
    animation-delay: $placeholder-animation-interval;
  }
  .ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: ($placeholder-animation-interval * 2);
  }
  .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: ($placeholder-animation-interval * 3);
  }
  .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder + .ui.placeholder {
    animation-delay: ($placeholder-animation-interval * 4);
  }

  .ui.placeholder,
  .ui.placeholder > :before,
  .ui.placeholder .image.header:after,
  .ui.placeholder .line,
  .ui.placeholder .line:after {
    background-color: $white;
  }

  .ui.placeholder.hidden {
    display:none;
  }

  /* Image */
  .ui.placeholder .image:not(.header):not(.ui):not(.icon) {
    height: $placeholder-image-height;
  }
  .ui.placeholder .square.image:not(.header) {
    height: 0;
    overflow: hidden;
    /* 1/1 aspect ratio */
    padding-top: 100%;
  }
  .ui.placeholder .rectangular.image:not(.header) {
    height: 0;
    overflow: hidden;
    /* 4/3 aspect ratio */
    padding-top: 75%;
  }


  /* Lines */
  .ui.placeholder .line {
    position: relative;
    height: $placeholder-line-margin;
  }
  .ui.placeholder .line:before,
  .ui.placeholder .line:after {
    top: 100%;
    position: absolute;
    content: '';
    background-color: inherit;
  }
  .ui.placeholder .line:before {
    left: 0;
  }
  .ui.placeholder .line:after {
    right: 0;
  }

  /* Any Lines */
  .ui.placeholder .line {
    margin-bottom: $placeholder-line-height;
  }
  .ui.placeholder .line:before,
  .ui.placeholder .line:after {
    height: $placeholder-line-height;
  }
  .ui.placeholder .line:not(:first-child) {
    margin-top: $placeholder-line-height;
  }

  /* Header Image + 2 Lines */
  .ui.placeholder .header {
    position: relative;
    overflow: hidden;
  }

  /* Line Outdent */
  .ui.placeholder .line:nth-child(1):after {
    width: $placeholder-line-one-outdent;
  }
  .ui.placeholder .line:nth-child(2):after {
    width: $placeholder-line-two-outdent;
  }
  .ui.placeholder .line:nth-child(3):after {
    width: $placeholder-line-three-outdent;
  }
  .ui.placeholder .line:nth-child(4):after {
    width: $placeholder-line-four-outdent;
  }
  .ui.placeholder .line:nth-child(5):after {
    width: $placeholder-line-five-outdent;
  }

  /* Header Line 1 & 2*/
  .ui.placeholder .header .line {
    margin-bottom: $placeholder-header-line-height;
  }
  .ui.placeholder .header .line:before,
  .ui.placeholder .header .line:after {
    height: $placeholder-header-line-height;
  }
  .ui.placeholder .header .line:not(:first-child) {
    margin-top: $placeholder-header-line-height;
  }
  .ui.placeholder .header .line:after {
    width: $placeholder-header-line-one-outdent;
  }
  .ui.placeholder .header .line:nth-child(2):after {
    width: $placeholder-header-line-two-outdent;
  }

  /* Image Header */
  .ui.placeholder .image.header .line {
    margin-left: $placeholder-image-width;
  }
  .ui.placeholder .image.header .line:before {
    width: $placeholder-image-text-indent;
  }
  .ui.placeholder .image.header:after {
    display: block;
    height: $placeholder-line-margin;
    content: '';
    margin-left: $placeholder-image-width;
  }

  /* Spacing */
  .ui.placeholder .image .line:first-child,
  .ui.placeholder .paragraph .line:first-child,
  .ui.placeholder .header .line:first-child {
    height: 0.01px;
  }
  .ui.placeholder .image:not(:first-child):before,
  .ui.placeholder .paragraph:not(:first-child):before,
  .ui.placeholder .header:not(:first-child):before {
    height: $placeholder-spacing;
    content: '';
    display: block;
  }

  /* Inverted Content Loader */
  .ui.inverted.placeholder {
    background-image: $placeholder-inverted-loading-gradient;
  }
  .ui.inverted.placeholder,
  .ui.inverted.placeholder > :before,
  .ui.inverted.placeholder .image.header:after,
  .ui.inverted.placeholder .line,
  .ui.inverted.placeholder .line:after {
    background-color: $black;
  }

  /*******************************
              Variations
  *******************************/


  /*-------------------
          Sizes
  --------------------*/

  .ui.placeholder .full.line.line.line:after {
    width: $placeholder-full-line-outdent;
  }
  .ui.placeholder .very.long.line.line.line:after {
    width: $placeholder-very-long-line-outdent;
  }
  .ui.placeholder .long.line.line.line:after {
    width: $placeholder-long-line-outdent;
  }
  .ui.placeholder .medium.line.line.line:after {
    width: $placeholder-medium-line-outdent;
  }
  .ui.placeholder .short.line.line.line:after {
    width: $placeholder-short-line-outdent;
  }
  .ui.placeholder .very.short.line.line.line:after {
    width: $placeholder-very-short-line-outdent;
  }


  /*-------------------
          Fluid
  --------------------*/

  .ui.fluid.placeholder {
    max-width: none;
  }
}

@import '../../themes/default/elements/placeholder.style';