#about-page {
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  overflow-y: auto;

  .version-info {
    text-align: center;
    margin-bottom: 32px;

    .version-title {
      font-size: 24px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .version-number {
      color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
      font-size: 14px;
    }
  }

  .info-section {
    width: 100%;
    max-width: 400px;
    min-height: fit-content;
    height: auto;
    background: color-mix(in srgb,
        var(--popup-background-color) 20%,
        transparent);
    border-radius: 12px;
    overflow: visible;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;

    .info-item {
      display: flex;
      align-items: center;
      padding: 16px;
      color: var(--secondary-text-color);
      text-decoration: none;
      border-bottom: 1px solid var(--border-color);
      transition: background 0.2s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background: color-mix(in srgb,
            var(--popup-background-color) 40%,
            transparent);
      }

      .info-item-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        display: flex;
        align-items: center;
        font-size: 24px;
      }

      .info-item-text {
        flex: 1;
        font-size: 15px;

        .info-item-subtext {
          color: color-mix(in srgb, var(--primary-text-color) 60%, transparent);
          font-size: 13px;
          margin-top: 2px;
        }
      }
    }
  }

  .social-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 400px;

    .social-link {
      display: inline-flex;
      align-items: center;
      padding: 12px;
      background: color-mix(in srgb,
          var(--popup-background-color) 20%,
          transparent);
      border-radius: 12px;
      color: var(--secondary-text-color);
      text-decoration: none;
      transition: all 0.2s ease;

      &:hover {
        background: color-mix(in srgb,
            var(--popup-background-color) 40%,
            transparent);
        transform: translateY(-1px);
      }

      .social-icon {
        width: 24px;
        height: 24px;
        margin-right: 12px;
        font-size: 24px;
        display: flex;
        align-items: center;
      }
    }
  }

  .icon {
    height: 100%;
    width: 100%;
  }

  .foxbiz {
    background-image: url(./foxbiz.svg);
  }

  .discord {
    background-image: url(./discord.svg);
  }
}