/*! profile-stats.scss | Vuero | Css ninja 2020-2024 */

.profile-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;

  .profile-stat {
    display: flex;
    align-items: center;
    color: var(--light-text);
    font-family: var(--font);

    span {
      font-size: 0.9rem;
    }

    .lnil {
      font-size: 1.2rem;
      margin-inline-end: 6px;
    }
  }

  .separator {
    height: 25px;
    width: 2px;
    border-inline-end: 1px solid color-mix(in oklab, var(--fade-grey), black 6%);
    margin: 0 10px;
  }

  .socials {
    display: flex;
    justify-content: center;

    a {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 28px;
      width: 28px;
      background: var(--white);
      border: 1px solid color-mix(in oklab, var(--fade-grey), black 6%);
      box-shadow: var(--light-box-shadow);
      border-radius: var(--radius-rounded);
      margin: 0 2px;
      transition: all 0.3s; // transition-all test

      &:hover {
        border-color: var(--primary);

        .iconify {
          color: var(--primary);
        }
      }

      .fab {
        font-size: 0.9rem;
        color: var(--light-text);
        transition: color 0.3s;
      }
    }
  }
}

.is-dark {
  .profile-stats {
    .separator {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 20%);
    }

    .socials {
      a {
        background: color-mix(in oklab, var(--dark-sidebar), white 2%);
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        &:hover,
        &:focus {
          border-color: var(--primary);

          .iconify {
            color: var(--primary);
          }
        }
      }
    }
  }
}
