/* =========================================================
   ELEON DISCORD WIDGET
   HELIOS STYLE
   ========================================================= */


/* =========================================================
   WIDGET
   ========================================================= */

.eleon-discord-widget {
  position: relative;
  width: auto;
  margin: 0px
    0px
    0px;
  padding: 12px;
  border-top: 1px solid
    var(--hd-border);
  border-radius: 0px;
  background:
    var(--hd-surface);
  overflow: hidden;
  box-sizing: border-box;
}


/* SUBTLE DISCORD GLOW */

.eleon-discord-widget::before {
  content: '';

  position: absolute;

  width: 140px;
  height: 140px;

  right: -75px;
  top: -75px;

  border-radius: 50%;

  background:
    rgba(88,101,242,.10);

  filter:
    blur(28px);

  pointer-events: none;
}


.eleon-discord-widget-inner {
  position: relative;

  z-index: 1;
}


/* =========================================================
   TOP
   ========================================================= */

.eleon-discord-top {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  margin-bottom: 12px;
}


/* =========================================================
   BRAND
   ========================================================= */

.eleon-discord-brand {
  display: flex;
  align-items: center;

  gap: 9px;

  min-width: 0;
}


/* =========================================================
   DISCORD ICON
   ========================================================= */

.eleon-discord-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  border-radius: 9px;

  background:
    rgba(88,101,242,.12);

  color:
    #8b95ff;
}


.eleon-discord-logo i {
  margin: 0;
  padding: 0;

  font-size: 17px;
  line-height: 1;
}


/* =========================================================
   HEADING
   ========================================================= */

.eleon-discord-heading {
  display: flex;
  flex-direction: column;

  gap: 2px;

  min-width: 0;
}


.eleon-discord-kicker {
  color:
    #6e9cff;

  font-size: 7px;
  font-weight: 850;
  line-height: 1;

  letter-spacing: .08em;

  text-transform: uppercase;
}


.eleon-discord-title {
  display: block;

  color:
    var(--hd-text);

  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================================================
   JOIN BUTTON
   ========================================================= */

.eleon-discord-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 5px;

  min-height: 31px;

  padding:
    6px
    9px;

  flex: 0 0 auto;

  border:
    1px solid
    rgba(110,156,255,.22);

  border-radius: 8px;

  background:
    rgba(110,156,255,.09);

  color:
    #8eb2ff;

  font-size: 8px;
  font-weight: 800;
  line-height: 1;

  text-decoration: none;

  transition:
    border-color .16s ease,
    background-color .16s ease,
    color .16s ease;
}


.eleon-discord-join:hover {
  border-color:
    rgba(110,156,255,.38);

  background:
    rgba(110,156,255,.14);

  color:
    #a7c1ff;
}


.eleon-discord-join i {
  margin: 0;
  padding: 0;

  font-size: 7px;
}


.eleon-discord-join.is-disabled {
  opacity: .45;

  pointer-events: none;
}


/* =========================================================
   STATUS BOX
   ========================================================= */

.eleon-discord-status {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  min-height: 46px;

  padding:
    8px
    9px;

  border:
    1px solid
    var(--hd-border);

  border-radius: 9px;

  background:
    color-mix(
      in srgb,
      var(--hd-surface) 93%,
      #6e9cff 7%
    );
}


/* =========================================================
   MEMBERS
   ========================================================= */

.eleon-discord-members {
  min-width: 0;

  flex: 1;
}


/* =========================================================
   AVATARS
   ========================================================= */

.eleon-discord-avatars {
  display: flex;
  align-items: center;

  min-height: 28px;

  padding-left: 1px;
}


.eleon-discord-avatar {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  flex: 0 0 28px;

  margin-left: -7px;

  border:
    2px solid
    var(--hd-surface);

  border-radius: 50%;

  background:
    var(--hd-surface);

  box-shadow:
    0 2px 7px
    rgba(0,0,0,.22);
}


.eleon-discord-avatar:first-child {
  margin-left: 0;
}


.eleon-discord-avatar img {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border-radius: inherit;

  object-fit: cover;
}


/* =========================================================
   MEMBER STATUS
   ========================================================= */

.eleon-discord-avatar-status {
  position: absolute;

  right: -1px;
  bottom: -1px;

  width: 7px;
  height: 7px;

  border:
    2px solid
    var(--hd-surface);

  border-radius: 50%;

  background:
    #32d583;
}


.eleon-discord-avatar-status.status-idle {
  background:
    #f5b942;
}


.eleon-discord-avatar-status.status-dnd {
  background:
    #f04455;
}


/* =========================================================
   ONLINE
   ========================================================= */

.eleon-discord-online {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  gap: 3px;

  flex: 0 0 auto;

  white-space: nowrap;
}


.eleon-discord-online-label {
  color:
    var(--hd-subtle);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


.eleon-discord-online-value {
  display: inline-flex;
  align-items: center;

  gap: 5px;
}


.eleon-discord-online-value strong {
  color:
    #4ade80;

  font-size: 14px;
  font-weight: 850;
  line-height: 1;
}


.eleon-discord-dot {
  width: 6px;
  height: 6px;

  flex: 0 0 6px;

  border-radius: 50%;

  background:
    #4ade80;

  box-shadow:
    0 0 7px
    rgba(74,222,128,.45);
}


/* =========================================================
   NO AVATARS
   ========================================================= */

.eleon-discord-no-avatars {
  color:
    var(--hd-subtle);

  font-size: 8px;
  font-weight: 700;
}


/* =========================================================
   ERROR
   ========================================================= */

.eleon-discord-error {
  display: none;

  margin-top: 7px;

  color:
    var(--hd-subtle);

  font-size: 8px;
}


.eleon-discord-widget.has-error
.eleon-discord-error {
  display: block;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.helios-sidebar {
  display: flex;
  flex-direction: column;
}


/* =========================================================
   LIGHT MODE
   ========================================================= */

:root[data-theme="light"]
.eleon-discord-widget {
  box-shadow:
    0 8px 25px
    rgba(35,45,70,.08);
}


:root[data-theme="light"]
.eleon-discord-logo {
  background:
    rgba(88,101,242,.08);

  color:
    #5865f2;
}


/* =========================================================
   COMPACT
   ========================================================= */

@media (max-width: 1250px) {

  .eleon-discord-widget {
    margin-left: 9px;
    margin-right: 9px;

    padding: 10px;
  }


  .eleon-discord-title {
    font-size: 10px;
  }


  .eleon-discord-avatar {
    width: 26px;
    height: 26px;

    flex-basis: 26px;

    margin-left: -6px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .eleon-discord-widget {
    display: none;
  }

}