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

:root,
:host {
  --xzx-skeleton-duration: 1.2s;
  --xzx-skeleton-avatar-size: 32px;
  --xzx-skeleton-background: var(--xzx-gray-1);
  --xzx-skeleton-image-size: 96px;
  --xzx-skeleton-image-radius: 24px;
  --xzx-skeleton-paragraph-height: 16px;
  --xzx-skeleton-paragraph-background: var(--xzx-gray-1);
  --xzx-skeleton-paragraph-margin-top: var(--xzx-padding-sm);
  --xzx-skeleton-title-width: 40%;
}

@include b(skeleton) {
  display: flex;
  padding: 0 var(--xzx-padding-md);

  @include e(content) {
    width: 100%;
  }

  @include m(animate) {
    animation: xzx-skeleton-blink var(--xzx-skeleton-duration) ease-in-out infinite;
  }

  &-avatar {
    flex-shrink: 0;
    width: var(--xzx-skeleton-avatar-size);
    height: var(--xzx-skeleton-avatar-size);
    margin-right: var(--xzx-padding-md);
    background: var(--xzx-skeleton-background);

    &--round {
      border-radius: var(--xzx-br-round);
    }
  }

  &-avatar + &__content {
    padding-top: var(--xzx-padding-xs);
  }

  &-image {
    display: flex;
    width: var(--xzx-skeleton-image-size);
    height: var(--xzx-skeleton-image-size);
    align-items: center;
    justify-content: center;
    background: var(--xzx-skeleton-background);

    &--round {
      border-radius: var(--xzx-skeleton-image-radius);
    }

    &__icon {
      width: calc(var(--xzx-skeleton-image-size) / 2);
      height: calc(var(--xzx-skeleton-image-size) / 2);
      font-size: calc(var(--xzx-skeleton-image-size) / 2);
      color: var(--xzx-gray-5);
    }
  }

  &-paragraph {
    height: var(--xzx-skeleton-paragraph-height);
    background: var(--xzx-skeleton-background);

    &--round {
      border-radius: var(--xzx-br-round);
    }

    &:not(:first-child) {
      margin-top: var(--xzx-skeleton-paragraph-margin-top);
    }
  }

  &-title {
    height: var(--xzx-skeleton-paragraph-height);
    background: var(--xzx-skeleton-background);

    &--round {
      border-radius: var(--xzx-br-round);
    }
  }

  &-title {
    width: var(--xzx-skeleton-title-width);
    margin: 0;
  }

  &-title + &-paragraph {
    margin-top: 20px;
  }

}

@keyframes xzx-skeleton-blink {
  50% {
    opacity: 0.6;
  }
}