@import '../../styles/common';
@import '../../styles/object/o-avatar';

.m-placeholder-block {
  $baseName: &;

  height: $co-component__height;
  border-radius: $co-radius;
  background-color: $co-color__fg__back--lower;

  &--line {
    height: $co-font__size--xsmall;
    border-radius: ($co-font__size--xsmall / 2);
  }

  &--round {
    width: $co-component__height;
    border-radius: 50%;
  }

  &--square {
    display: inline-block;
    min-width: $co-component__height;
  }

  &--rect {
    min-width: 4 * $co-component__height;
  }

  &--avatar {
    @include m-avatar--size(medium);

    border-radius: 50%;

    &#{$baseName}--large {
      @include m-avatar--size(large);
    }

    &#{$baseName}--small {
      @include m-avatar--size(small);
    }
  }

  &--inline-block {
    display: inline-block;
    min-width: 5rem;

    // not sure about that
    // FIXME: fail to compile with sass-dart
    // &:not():first-of-type {
    //   margin-left: map_get($co-margin_, 'xsmall');
    // }
  }

  &--w-small {
    min-width: 3rem;
  }

  &--w-large {
    min-width: 10rem;
  }

  &--w-xlarge {
    min-width: 30rem;
  }
}
