@use 'sass:map';
@use './variables' as skeleton-variables;
@use './mixins' as skeleton-mixins;

.mdc-skeleton {
  display: flex;
  align-items: flex-start;
  width: 100%;
}

.mdc-skeleton-avatar {
  display: block;
  margin-left: 0;
  margin-right: 16px;
  background: skeleton-variables.$color;

  &.mdc-skeleton-avatar--circle {
    border-radius: 50%;
  }

  @include skeleton-mixins.avatar-size(
    map.get(skeleton-variables.$avatar, 'base')
  );

  &.mdc-skeleton-avatar--large {
    @include skeleton-mixins.avatar-size(
      map.get(skeleton-variables.$avatar, 'large')
    );
  }

  &.mdc-skeleton-avatar--small {
    @include skeleton-mixins.avatar-size(
      map.get(skeleton-variables.$avatar, 'small')
    );
  }
}

.mdc-skeleton__content {
  width: 100%;
}

.mdc-skeleton-paragraph {
  margin: 0;
  padding: 0;
  > li {
    width: 100%;
    height: 16px;
    list-style: none;
    background: skeleton-variables.$color;
    & + li {
      margin-top: 16px;
    }
    &:last-child:not(:first-child):not(:nth-child(2)) {
      width: 61%;
    }
  }
}

.mdc-skeleton-title {
  width: 100%;
  height: 16px;
  margin: 16px 0 0;
  background: skeleton-variables.$color;
  & + .mdc-skeleton-paragraph {
    margin-top: 24px;
  }
}

.mdc-skeleton--with-avatar {
  .mdc-skeleton-title {
    margin-top: 12px;

    & + .mdc-skeleton-paragraph {
      margin-top: 28px;
    }
  }
}

.mdc-skeleton--active {
  .mdc-skeleton-avatar,
  .mdc-skeleton-title,
  .mdc-skeleton-paragraph > li {
    @include skeleton-mixins.color();
  }
}