@use 'backend' as *;

#{c(memberList container)} {
  background: none;
  border: none;
}
#{c(memberList wrap)} {
  background: none;
  border: none;
}
#{c(memberList members)} {
  background: hsl(from cv('shading.bg') h s l/calc(cv('shading.percent') * 0.3));
}

// PLACEHOLDER
#{c(memberList placeholderUsernameMultiple)},
#{c(memberList placeholderAvatar)},
#{c(memberList placeholderUsername)} {
  background: cv('shading.card');
}

// MEMBER GROUP
#{c(memberList group)} {
  display: flex;
  color: cv('color.main');
  font-weight: 700;
  align-items: center;
  &:before {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to left, currentColor 50%, transparent);
    margin-right: 5px;
  }
  &:after {
    content: '';
    height: 2px;
    flex-grow: 1;
    background: linear-gradient(to right, currentColor 50%, transparent);
    margin-left: 5px;
  }
}

// RECENT ACTIVITY
#{c(memberList activityContainer)} {
  background: cv('shading.card');
  border-radius: 8px;
  border-width: 2px;
  padding-left: 10px;
}
#{c(memberList activityContainerSelected)} {
  &,
  &:hover {
    background: cv('shading.card');
    border-color: cv('color.main');
  }
}

// ACITIVITY POPOUT
#{c(memberList activityPopoutWrapper)},
#{c(memberList activityPopoutInteractions)} {
  background: cv('shading.popout');
}
#{c(memberList activityPopoutInteractionsHeader)} {
  border: none;
}

// MEMBER
#{c(memberList member)} {
  background: transparent;
  backface-visibility: hidden;
}
#{c(memberList memberInner)} {
  position: relative;
  width: 100%;
  transition: all 0.15s ease-in-out, transform 0.1s ease-in-out;
  z-index: 1;
  &:active {
    transform: scale(0.9);
  }
}
#{c(memberList name)} {
  width: fit-content;
}
#{c(memberList member)} {
  #{c(memberList nameContainer)} {
    position: static;
    transition: all 0.15s ease-in-out;
    z-index: unset;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right, cv('shading.hover') 90%, transparent);
      border-radius: 3px;
      opacity: 0;
      transition: all 0.15s ease-in-out;
      z-index: -1;
    }
    &:after {
      content: '';
      position: absolute;
      top: 0;
      right: 100%;
      bottom: 0;
      left: 0;
      background: linear-gradient(to right, cv('color.main') 90%, transparent);
      border-radius: 3px;
      opacity: 0.8;
      transition: all 0.3s ease-in-out;
      z-index: -1;
    }
    &[style^='color:'] {
      &:before,
      &:after {
        background: linear-gradient(to right, currentColor 90%, transparent);
      }
    }
  }
  #{c(memberList nameContainer)} {
    #{c(memberList nameplated)} & {
      &[style^='color:'] {
        &:before,
        &:after {
          background: linear-gradient(to right, currentColor, transparent);
        }
      }
    }
  }
}

// ACTIVITY STATUS
#{c(memberList activityText)} {
  color: cv('text.muted');
  transition: all 0.15s ease-in-out;
  strong {
    color: cv('color.main');
    font-weight: 700;
    transition: all 0.15s ease-in-out;
  }
}

// HOVER
#{c(memberList member)} {
  &:hover {
    #{c(memberList childContainer)} {
      background: transparent;
    }
    #{c(memberList nameContainer)} {
      &:before {
        opacity: 1;
      }
      &[style^='color:']:before {
        opacity: 0.07;
      }
    }
  }
}

// SELECTED
#{c(memberList selected)} {
  #{c(memberList childContainer)} {
    background-color: transparent;
  }
  #{c(memberList nameContainer)} {
    -webkit-text-fill-color: var(--interactive-active);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    &:after {
      right: 0;
    }
  }
  #{c(memberList activityText)},
  strong {
    color: var(--interactive-active);
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
  }
  #{c(memberList ownerIcon)} {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.7));
  }
}

// QUEST POPOUT
#{c(memberList quest container)} {
  background: cv('shading.popout');
}
#{c(memberList quest button)} {
  background: cv('color.main');
  border: none;
}