.root {
  position: relative;
  display: flex;
  flex-shrink: 0;

  &.xxxlarge {
    width: 128px;
    height: 128px;

    .icon {
      bottom: 13px;
      right: 13px;
    }
  }

  &.xxlarge {
    width: 96px;
    height: 96px;

    .icon {
      bottom: 8px;
      right: 8px;
    }
  }

  &.xlarge {
    width: 64px;
    height: 64px;

    .icon {
      bottom: 5px;
      right: 5px;
    }
  }

  &.large {
    width: 40px;
    height: 40px;

    .icon {
      bottom: 2px;
      right: 2px;
    }
  }

  &.medium {
    width: 32px;
    height: 32px;

    .icon {
      bottom: 1px;
      right: 1px;
    }
  }

  &.small {
    width: 24px;
    height: 24px;

    .icon {
      display: none;
    }
  }
}

.img {
  object-fit: cover;

  &.xxxlarge {
    width: 128px;
    height: 128px;

    &.square {
      border-radius: 16px;
    }
  }

  &.xxlarge {
    width: 96px;
    height: 96px;

    &.square {
      border-radius: 16px;
    }
  }

  &.xlarge {
    width: 64px;
    height: 64px;

    &.square {
      border-radius: 16px;
    }
  }

  &.small {
    width: 24px;
    height: 24px;

    &.square {
      border-radius: 4px;
    }
  }

  &.medium {
    width: 32px;
    height: 32px;

    &.square {
      border-radius: 8px;
    }
  }

  &.large {
    width: 40px;
    height: 40px;

    &.square {
      border-radius: 8px;
    }
  }

  &.circle {
    border-radius: 999px;
  }

  &.loading {
    animation: shimmer 1.6s infinite linear;
    background: linear-gradient(
      to right,
      variables.$color-secondary 8%,
      variables.$color-white 18%,
      variables.$color-secondary 33%
    );
    background-size: 800px 104px;
    position: absolute;
    width: 100%;
    height: 100%;
  }
}

.icon {
  display: none;
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;

  &.active {
    display: inline;
    background-color: variables.$color-success;
  }
}

@keyframes shimmer {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}
