@import 'mixins/mixins';
@import 'common/var';

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

@include b(skeleton) {
  //.item-bag{
  //  .el-skeleton__item:not(:last-child){
  //    margin-right:16px;
  //  }
  //}
  @include e(item) {
    background: $--color-fill-3;
    display: inline-block;
    height: 32px;
    // border-radius: $--border-radius-base;
    border-radius: $--border-radius-medium;
    width: 100%;
  }

  @include e(circle) {
    // border-radius: 50%;
    border-radius: $--border-radius-circle;
    @include circle-size($--avatar-medium-size);

    @include m(lg) {
      @include circle-size($--avatar-large-size);
    }

    @include m(md) {
      @include circle-size($--avatar-small-size);
    }
  }

  @include e(button) {
    height: 36px;
    width: 64px;
    // border-radius: 4px;
    border-radius: $--border-radius-medium;
  }

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

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

  @include e(text) {
    width: 100%;
    height: $--font-size-medium;
  }

  @include e(caption) {
    height: $--font-size-extra-small;
  }

  @include e(h1) {
    height: $--font-size-extra-large;
  }

  @include e(h3) {
    height: $--font-size-large;
  }

  @include e(h5) {
    height: $--font-size-medium;
  }

  @include e(image) {
    width: unset;
    display: flex;
    align-items: center;
    justify-content: center;
    // border-radius: 0;
    border-radius: $--border-radius-medium;
    .img-bag{
      font-size: $--font-size-base;
      color: $--color-text-3;
      font-weight: $--font-weight-400;
    }
    svg {
      fill: $--svg-monochrome-grey;
      width: 22%;
      height: 22%;
    }
  }

}