@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-skeleton-h-padding: $ink-spacing-md !default;
$ink-skeleton-animation-duration: $ink-animation-duration-base * 4 !default;
$ink-skeleton-row-background-color: $ink-color-grey-6 !default;
$ink-skeleton-row-margin-top: $ink-spacing-sm !default;
$ink-skeleton-row-height: 32px !default;
$ink-skeleton-avatar-size: 64px !default;
$ink-skeleton-avatar-margin-right: $ink-spacing-md !default;
$ink-skeleton-title-width: 40% !default;

@keyframes ink-skeleton-loading {
  50% {
    opacity: 0.6;
  }
}

.ink-skeleton {
  padding: 0 $ink-skeleton-h-padding;
  display: flex;

  &--animate {
    animation: ink-skeleton-loading $ink-skeleton-animation-duration ease infinite;
  }

  &__avatar {
    width: $ink-skeleton-avatar-size;
    height: $ink-skeleton-avatar-size;
    flex: 0 0 auto;
    background-color: $ink-skeleton-row-background-color;
    margin-right: $ink-skeleton-avatar-margin-right;

    &--round {
      border-radius: $ink-border-radius-circle;
    }
  }

  &__content {
    width: 100%;
    padding-top: ($ink-skeleton-avatar-size - $ink-skeleton-row-height) / 2;
  }

  &__title {
    width: $ink-skeleton-title-width;
    height: $ink-skeleton-row-height;
    background-color: $ink-skeleton-row-background-color;
  }

  &__title + &__row {
    margin-top: $ink-skeleton-row-margin-top + 16px;
  }

  &__row {
    width: 100%;
    height: $ink-skeleton-row-height;
    background-color: $ink-skeleton-row-background-color;

    & + & {
      margin-top: $ink-skeleton-row-margin-top;
    }

    &:last-child {
      width: 60%;
    }
  }
}