@keyframes placeHolderShimmer
  0%
    background-position: 100% 0
  100%
    background-position: -200% 0

.panel-group .panel + .panel
  @extend .m-t-sm

.panel
  @extend .m-b-md
  &.animated-background
    animation-duration: 2s
    animation-fill-mode: forwards
    animation-iteration-count: infinite
    animation-name: placeHolderShimmer
    animation-timing-function: linear
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%)
    background-size: 400% 100%

    .placeholder-body
      transform: translateX(-50%)
      width: calc((400px - 40px - 2px) * 1.68) // 1.68 : ratio image svg
      max-width: 100%
      height: 100%
      position: absolute
      top: 0
      left: 50%
      &:before
        content: ' '
        width: 100%
        height: 100%
        position: absolute
        top: 0
        left: 0
        background: white
        margin-left: -100%
      &:after
        content: ' '
        width: 100%
        height: 100%
        position: absolute
        top: 0
        left: 100%
        background: white

    .container-placeholder
      transform: translateY(-50%)
      position: relative
      top: 50%

    .before
      position: relative
      &:before
        content: ' '
        width: 100%
        height: 500px
        position: absolute
        top: 0
        box-shadow: 0px 1px white
        background: white
        margin-top: -500px

    .after
      position: relative
      &:after
        content: ' '
        width: 1000px
        height: 1000px
        position: absolute
        top: 0
        left: 0
        background: white

    .mask-body
      height: calc(400px - 40px - 2px)
      overflow: hidden
      span.before
        &:before
          width: 100px
          height: 2px
          content: ' '
          color: white
          background: white
      img
        width: 100%
        height: auto
        max-height: calc(400px - 40px - 2px)
        box-shadow: 0px 1px white
        &:before
          width: 100px
          height: 2px
          content: ' '
          color: white
          background: white
        &:before
          height: 100px
          width: 100px
          content: ' '
          color: white
          background: white
      span.after
        &:before
          width: 100px
          height: 2px
          content: ' '
          color: white
          background: white
    .mask-heading
      background: transparent
      position: relative
      height: 40px
      width: 100%
      .background-masker
        background: #fff
        position: absolute
        &.mask-top
          width: 100%
          height: 20px
          top: 0
        &.mask-start
          width: 20px
          left: 0
          top: 20px
          height: 20px
        &.mask-end
          width: 40%
          left: 60%
          top: 20px
          height: 20px
  .panel-heading
    position: relative
    .remove
      position: absolute
      top: 50%
      right: 40px
      margin: -10px 0 0 0
    .collapse-title
      .icn
        transform: rotate(90deg)
      &.collapsed .icn
       transform: rotate(0deg)

  .panel-body
    .line
      width: 100%
      height: 1px
      position: relative
      &:before
        content: ''
        height: 1px
        background: $menu-border-color
        position: absolute
        top: 0
        left: -20px
        right: -20px

.panel-light
  @include panel-variant($panel-default-border, $panel-default-text, $panel-light-heading-bg, $panel-default-border)

.panel-group
  .panel
    & + .panel
      margin-top: 10px