@import '../settings/variables';

.c-thumbnail {
  border-radius: 50%;
  margin: $user-icon-padding;
  width: 1em;
  height: 1em;

  &--with-hover-opacity {
    opacity: 0.85;
    &:hover {
      opacity: 1;
    }
  }

  &--size-small {
    font-size: $small-icon-size;
  }

  &--size-medium {
    font-size: $medium-icon-size;
  }

  &--size-big {
    font-size: $big-icon-size;
  }

  &--size-enormous {
    font-size: $enormous-icon-size;
  }

  &--rectangular {
    border-radius: 0.05em;
  }

  &--vessel {
    object-fit: cover;
    width: 104px;
    height: 74px;

    @include media-breakpoint-up(lg) {
      width: 188px;
      height: 134px;
    }
  }
}