.affiliate-contacts {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin: 0;
}

.affiliate-contacts__box {
  display: grid;
  grid-template-areas: "tabs" "people" "all" "channels";
  align-content: start;
  width: 100%;
  overflow: hidden;
  padding: var(--Space-md, 8px);
  gap: var(--Space-md, 8px);
  border-radius: var(--Radius-radius_3xl, 16px);
  border: 1px solid var(--Outline-low_em, rgba(0, 0, 0, 0.05));
  background: var(--Surface-s0, #fff);
}

.affiliate-contacts__box .ui-nav-switcher {
  width: 100%;
  max-width: 100%;
  flex-shrink: 0;
}
.affiliate-contacts__box .ui-nav-switcher > .ui-nav-switcher__btn {
  flex: 1 1 0;
  justify-content: center;
}

.affiliate-contacts__panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.affiliate-contacts__panel[hidden] {
  display: none;
}

.affiliate-contacts__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.affiliate-contacts__box > .ui-nav-switcher {
  grid-area: tabs;
}

.affiliate-contacts__box > .affiliate-contacts__panel {
  grid-area: people;
}

.affiliate-contacts__box > .affiliate-contacts__all {
  grid-area: all;
  margin-top: 4px;
}

.affiliate-contacts__box > .affiliate-contacts__channels {
  grid-area: channels;
}

.affiliate-contacts__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: var(--Space-3xl, 16px);
  row-gap: 0;
  align-items: center;
  width: 100%;
  padding: var(--Space-md, 8px);
  border-radius: var(--Radius-radius_xl, 12px);
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.affiliate-contacts__row > .ui-avatar {
  grid-column: 1;
  grid-row: 1/span 2;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-weight: 500;
  font-size: var(--ui-avatar-text-size, 14px);
  line-height: 1;
  overflow: visible;
}
.affiliate-contacts__row > .ui-avatar > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.affiliate-contacts__row > b.affiliate-contacts__name {
  font-weight: 500;
}
.affiliate-contacts__row > small.affiliate-contacts__role {
  font-size: 12px;
  font-weight: 400;
}
.affiliate-contacts__row > .affiliate-contacts__name {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}
.affiliate-contacts__row > .affiliate-contacts__role {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
}
.affiliate-contacts__row > .affiliate-contacts__go {
  grid-column: 3;
  grid-row: 1/span 2;
}
.affiliate-contacts__row:not(:has(.affiliate-contacts__role)) > .affiliate-contacts__name {
  grid-row: 1/span 2;
  align-self: center;
}
.affiliate-contacts__row .ui-avatar--verified::after {
  top: -5px;
  right: -9px;
}
.affiliate-contacts__row:hover {
  background: var(--Surface-hover_overlay_inverse, rgba(0, 0, 0, 0.03));
}
.affiliate-contacts__row:hover .affiliate-contacts__name {
  color: var(--Text-primary_med_em, #f83ce9);
}
.affiliate-contacts__row:hover .affiliate-contacts__go {
  color: var(--Text-primary_med_em, #f83ce9);
}

.affiliate-contacts__body {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.affiliate-contacts__name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--Text-high_em, #0a0c11);
  font-family: var(--Typeface-family-body, "Graphik LCG");
  font-size: var(--Typeface-size-body_small, 14px);
  font-weight: var(--Typeface-weight-body-medium, 500);
  line-height: var(--Typeface-line_height-body_small, 20px);
  letter-spacing: var(--Typeface-letter_spacing-none, 0);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-contacts__role {
  display: block;
  max-width: 100%;
  overflow: hidden;
  color: var(--Text-low_em, #8c929c);
  font-family: var(--Typeface-family-body, "Graphik LCG");
  font-size: var(--Typeface-size-caption_big, 12px);
  font-weight: var(--Typeface-weight-body-normal, 400);
  line-height: var(--Typeface-line_height-caption_big, 16px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-contacts__go {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--Text-low_em, #8c929c);
  font-size: 16px;
}

.affiliate-contacts__channels {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--Outline-low_em, rgba(0, 0, 0, 0.05));
  list-style: none;
}

.affiliate-contacts__channel {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) minmax(0, 46%);
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 8px;
  border-radius: 12px;
}
.affiliate-contacts__channel:hover {
  background: var(--Surface-hover_overlay_inverse, rgba(0, 0, 0, 0.03));
}
.affiliate-contacts__channel:hover > a {
  color: var(--Text-primary_med_em, #f83ce9);
}
.affiliate-contacts__channel > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--Surface-s1, #f4f5f7);
  color: var(--Text-med_em, #5b616d);
  font-size: 16px;
  font-style: normal;
  line-height: 1;
}
.affiliate-contacts__channel > i::before {
  display: block;
}
.affiliate-contacts__channel > b {
  min-width: 0;
  overflow: hidden;
  color: var(--Text-high_em, #0a0c11);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.affiliate-contacts__channel > b:has(small) {
  white-space: normal;
}
.affiliate-contacts__channel > b > small {
  display: block;
  overflow: hidden;
  color: var(--Text-low_em, #8c929c);
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.affiliate-contacts__channel > a {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--Text-low_em, #8c929c);
  font-size: 12px;
  line-height: 16px;
  text-align: right;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.affiliate-contacts__footer {
  padding-top: var(--Space-xs, 4px);
}