@use 'mixins/mixins' as *;
@use 'common/var' as *;

@include b(skeleton) {
  @include css-var-from-global(('skeleton', 'circle-size'), ('avatar', 'size'));
}

@mixin circle-size($size) {
  width: $size;
  height: $size;
  line-height: $size;
}

@include b(skeleton) {
  @include e(item) {
    background: getCssVar('skeleton-color');
    display: inline-block;
    height: 16px;
    border-radius: getCssVar('border-radius-xs');
    width: 100%;
  }

  @include e(circle) {
    border-radius: 50%;

    width: getCssVar('skeleton-circle-size');
    height: getCssVar('skeleton-circle-size');
    line-height: getCssVar('skeleton-circle-size');
  }

  @include e(button) {
    height: 32px;
    width: 64px;
    border-radius: getCssVar('border-radius-sm');
  }

  @include e(p) {
    width: 100%;

    @include when(last) {
      width: 61%;
    }

    @include when(first) {
      width: 33%;
    }
  }

  @include e(text) {
    width: 100%;
    height: 16px;
  }

  @include e(caption) {
    height: 12px;
  }

  @include e(subtile) {
    height: 12px;
  }

  @include e(h2) {
    height: 32px;
  }

  @include e(h3) {
    height: 24px;
  }

  @include e(h4) {
    height: 20px;
  }

  @include e(image) {
    width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;

    svg {
      color: getCssVar('color-neutral-4');
      fill: currentColor;
      width: 22%;
      height: 22%;
    }
  }
}