@import '../../styles/common';
@import 'mixin';

.rs-avatar {
  background-color: var(--rs-avatar-bg);
  color: var(--rs-avatar-text);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  overflow: hidden;
  position: relative;

  .avatar-md();

  & > .rs-icon {
    vertical-align: middle;
  }

  &-image {
    &::before {
      content: attr(alt);
      position: absolute;
      width: 100%;
      height: inherit;
      top: 0;
      left: 0;
      background: var(--rs-avatar-bg);
      text-align: center;
      padding: 0 2px;
    }
  }

  &-icon {
    position: absolute;
  }

  &-bordered {
    --rs-ring-offset-shadow: var(--rs-avatar-offset-color) 0 0 0 2px;
    --rs-ring-shadow: var(--rs-avatar-ring-color) 0 0 0 4px;
    box-shadow: var(--rs-ring-offset-shadow), var(--rs-ring-shadow), 0 0 #0000;
  }

  &-circle {
    border-radius: 50%;
  }

  &-xxl {
    .avatar-xxl();
  }

  &-xl {
    .avatar-xl();
  }

  &-lg {
    .avatar-lg();
  }

  &-sm {
    .avatar-sm();
  }

  &-xs {
    .avatar-xs();
  }
}

each(@spectrum, .(@color) {
  .rs-avatar-@{color} {
    --rs-avatar-bg: var(~'--rs-@{color}-500');
    --rs-avatar-ring-color: var(~'--rs-@{color}-500');
  }
});