@use "../theme/theme";
@use "../lookAndFeel/lookAndFeel";
@use "../lookAndFeel/feel";

.viewers-online {
  .viewer-pill {
    padding:       4px;
    overflow:      hidden;
    border-radius: 21px;
    align-items:   center;

    .viewer-pill-avatar {
      width:         32px;
      height:        32px;
      border-radius: 16px;
      overflow:      hidden;
      background:    white;

      img {
        width:      32px;
        height:     32px;
        object-fit: cover;
      }
    }

    .viewer-pill-title {
      padding-left:  6px;
      padding-right: 14px;
      font-size:     0.8em;
      line-height:   1.3em;
    }
  }

  .viewers-users-group {
    // More horizontal space for pills, 
    // it's acceptable for them to overflow a little.
    margin-right: -12px;
  }

  .viewers-users {
    max-width: 90%;

    .circle {
      border-radius: 32px;
      overflow:      hidden;
      margin-right:  -12px;
      width:         32px;
      height:        32px;

      @include feel.var(--tile-color,
              (light:lookAndFeel.$modern-tile-background-light, dark:lookAndFeel.$modern-tile-background-dark),
              (light:white, dark:#1a1a1a));
      border:        3px solid var(--tile-color);

      &.circle-number {
        text-align:  center;
        line-height: 28px;
        font-size:   0.8em;
      }

      @include theme.light {
        background: white;
      }
      @include theme.dark {
        background: #2e2e2e;
      }

      &.circle-number-muted {
        @include theme.light {
          color:      #888;
          background: #f5f5f5;
        }
        @include theme.dark {
          color:      #777;
          background: #252525;;
          border:     1px solid #3f3f3f;
        }
      }

      &.circle-user-avatar {
        background: white;
      }
    }
  }
}
