@include b(skeleton-element) {
  @include set-component-css-var('skeleton', $skeleton);
  
  display: block;
  width: 100%;
  height: 100%;

  @include b(skeleton-input) {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 100%;
    background: getCssVar('skeleton', 'bg-color');

    @include m(large) {
      width: 200px;
      min-width: 200px;
      height: 40px;
      line-height: 40px;
    }

    @include m(medium) {
      width: 160px;
      min-width: 160px;
      height: 32px;
      line-height: 32px;
    }

    @include m(small) {
      width: 120px;
      min-width: 120px;
      height: 24px;
      line-height: 24px;
    }
  }

  @include m(active) {
    @include b(skeleton-input) {
      position: relative;
      z-index: 0;
      overflow: hidden;
      background: transparent;

      &::after {
        position: absolute;
        top: 0;
        right: -150%;
        bottom: 0;
        left: -150%;
        content: '';
        background: linear-gradient(
          90deg,
          getCssVar('skeleton', 'bg-color') 25%,
          getCssVar('skeleton', 'transition-color') 37%,
          getCssVar('skeleton', 'bg-color') 63%
        );
        animation: skeleton-element-loading 1.4s ease infinite;
      }
    }
  }

  @keyframes skeleton-element-loading {
    0% {
      transform: translateX(-37.5%);
    }

    100% {
      transform: translateX(37.5%);
    }
  }
}
