/*
  Chips and avatars, replacing Vuetify 1.5's v-chip / v-avatar with the same measurements.

  <span class="c-chip white assemblies--text text--darken-2">
    <div class="c-avatar change_sets">3</div>
    Approved
  </span>

  Modifiers: .c-chip--small, .c-chip--label, .c-chip--outline, .c-chip--disabled, .c-avatar--tile.
  Background / text colors come from the usual color classes (e.g. `info`, `white--text`).
*/

.c-chip {
  align-items: center;
  background: var(--cosmic-gray-lighten-2);
  border-radius: 28px;
  color: var(--cosmic-text);
  display: inline-flex;
  font-size: 13px;
  height: 32px;
  justify-content: space-between;
  margin: 4px;
  outline: none;
  padding: 0 12px;
  position: relative;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
  vertical-align: middle;
  white-space: nowrap;
}

.c-chip--small {
  height: 24px;
}

.c-chip--label {
  border-radius: 2px;
}

.c-chip.c-chip--outline {
  background: transparent !important;
  border: 1px solid currentColor;
}

.c-chip--disabled {
  color: var(--cosmic-text-disabled);
  cursor: default;
  pointer-events: none;
  user-select: none;
}

.c-avatar {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 48px;
  justify-content: center;
  min-width: 48px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 48px;
}

.c-avatar img {
  border-radius: 50%;
  display: inline-flex;
  height: inherit;
  width: inherit;
}

.c-avatar--tile,
.c-avatar--tile img {
  border-radius: 0;
}

.c-chip .c-avatar {
  height: 32px;
  margin-left: -12px;
  margin-right: 8px;
  min-width: 32px;
  width: 32px;
}

.c-chip--outline .c-avatar {
  margin-left: -13px;
}

.c-chip--small .c-avatar {
  height: 24px;
  min-width: 24px;
  width: 24px;
}