@import "../../styles/variables.scss";

.circle {
  :global(.identicon) {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
  }
  overflow: hidden;
  border-radius: 50%;
  display: flex;
  align-items: center;
}

.text {
  width: 100%;
  text-align: center;
}

.img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

.orange {
  background-color: $brand-orange;
}

.green {
  background-color: $brand-green;
}

.red {
  background-color: $brand-red;
}

.lightGrey {
  background-color: $brand-lightGrey;
}

.nearWhite {
  background-color: $brand-nearWhite;
}

.small {
  height: $xl-spacing;
  width: $xl-spacing;
}

.medium {
  height: $xl-spacing * 2;
  width: $xl-spacing * 2;
}

.large {
  height: $xxl-spacing * 2;
  width: $xxl-spacing * 2;
}

.hasBorder {
  border: 2px solid $brand-white;
  box-shadow: $base-box-shadow;
}

.loading {
  margin: auto;
}