/*
 * ==============================================================================
 * Extended Brand Button Styles
 * ==============================================================================
 * Additional social media and platform-specific button color schemes
 * Based on LittleLink by Seth Cottle
 * https://littlelink.io
 * 
 * Free to use under the MIT license
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * This file contains extended/less common brand buttons.
 * Each button uses CSS custom properties for flexible theming:
 *   - --button-text: Text color for the button
 *   - --button-background: Background color or gradient
 *   - --button-border: Optional border styling
 * ==============================================================================
 */

/* ==============================================================================
 * Base Button Styles
 * ==============================================================================
 * Shared styles and transitions for all button variants
 * ------------------------------------------------------------------------------ */

/**
 * Base button styling
 * Uses CSS variables for flexible theming
 */
.button,
button {
  color: var(--button-text, #000000);
  background-color: var(--button-background, transparent);
  border: var(--button-border, none);
  transition: filter 0.2s ease, transform 0.2s ease;
}

/**
 * Global button hover effect
 * Provides consistent interactive feedback across all buttons
 */
.button:hover,
button:hover {
  filter: brightness(90%);
  transform: translateY(-1px);
}

/**
 * Button icon styling
 * Allows for icon color filtering if needed
 */
.icon {
  filter: var(--icon-filter, none);
}

/* ==============================================================================
 * Extended Brand-Specific Button Styles
 * ==============================================================================
 * Individual platform color schemes and styling
 * Organized alphabetically by brand name
 * ------------------------------------------------------------------------------ */

/* 500px - White background with black border */
.button-500px {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* Alpha Universe - Black background with white text */
.button-alphauniverse {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* AniList - Dark blue background */
.button-anilist {
  --button-text: #FFFFFF;
  --button-background: #2B2D42;
  --button-border: 1px solid #FFFFFF;
}

/* Audiomack - Black background with white text */
.button-audiomack {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Babylist - Purple background */
.button-babylist {
  --button-text: #FFFFFF;
  --button-background: #6E3264;
  --button-border: 1px solid #FFFFFF;
}

/* Bandsintown - Black background with white text */
.button-bandsintown {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* BeReal - Black background with white text */
.button-bereal {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Big Cartel - Dark gray background */
.button-bigcartel {
  --button-text: #FFFFFF;
  --button-background: #222222;
  --button-border: 1px solid #FFFFFF;
}

/* Bonfire - Salmon background with dark border */
.button-bonfire {
  --button-text: #FFFFFF;
  --button-background: #F49979;
  --button-border: 1px solid #3D4853;
}

/* Cameo - Black background with white text */
.button-cameo {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Clubhouse - Beige background with dark text */
.button-clubhouse {
  --button-text: #1F1F1A;
  --button-background: #F1EFE3;
  --button-border: 1px solid #212121;
}

/* CodePen - White background with black border */
.button-codepen {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* Deezer - Black background with white text */
.button-deezer {
  --button-text: #FFFFFF;
  --button-background: #181818;
  --button-border: 1px solid #FFFFFF;
}

/* Devpost - Dark blue background */
.button-devpost {
  --button-text: #FFFFFF;
  --button-background: #003E54;
  --button-border: 1px solid #FFFFFF;
}

/* Distiller - Red background */
.button-dist {
  --button-text: #FFFFFF;
  --button-background: #ED5C47;
}

/* Filmweb - Black background with white text */
.button-filmweb {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* ==========================================
 * GOG
 * ==========================================
 * Dark gray background
 */
.button-gog {
  --button-text: #FFFFFF;
  --button-background: #303030;
  --button-border: 1px solid #FFFFFF;
}

/* Guilded - Yellow background */
.button-guilded {
  --button-text: #000000;
  --button-background: #F5C400;
}

/* Gumroad - Black background with white text */
.button-gumroad {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* HackerEarth - Dark blue background */
.button-hackerearth {
  --button-text: #FFFFFF;
  --button-background: #2B3352;
}

/* HackerRank - White background with black border */
.button-hackerrank {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* itch.io - Red background */
.button-itchio {
  --button-text: #FFFFFF;
  --button-background: #FA5C5C;
}

/* Layers - White background with black border */
.button-layers {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* LeetCode - White background with black border */
.button-leetcode {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* Lemmy - Green background */
.button-lemmy {
  --button-text: #FFFFFF;
  --button-background: #14854F;
}

/* ListenBrainz - White background with black border */
.button-listenbrainz {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* Matrix - Black background with white text */
.button-matrix {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Micro.blog - Orange background */
.button-microblog {
  --button-text: #FFFFFF;
  --button-background: #FD9927;
}

/* Mixcloud - Purple background */
.button-mixcloud {
  --button-text: #FFFFFF;
  --button-background: #5000FF;
}

/* MyAnimeList - White background with black border */
.button-myanimelist {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* ==========================================
 * NGL
 * ==========================================
 * Orange to pink gradient background
 */
.button-ngl {
  --button-text: #FFFFFF;
  background-image: linear-gradient(-45deg, #ff8d10, #ec1187);
}

/* Nostr - Purple background */
.button-nostr {
  --button-text: #FFFFFF;
  --button-background: #A915FF;
}

/* OP.GG - Blue background */
.button-opgg {
  --button-text: #FFFFFF;
  --button-background: #5383E8;
}

/* OpenSea - Blue background */
.button-opensea {
  --button-text: #FFFFFF;
  --button-background: #0086FF;
  --button-border: 1px solid #0086FF;
}

/* OpenStreetMap - White background with black border */
.button-osm {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* ORCID ID - White background with dark border */
.button-orcid-id {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #212121;
}

/* osu! - Pink background */
.button-osu {
  --button-text: #000000;
  --button-background: #FF8EE6;
}

/* Partiful - Black background with white text */
.button-partiful {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* PeerTube - Cream background */
.button-peertube {
  --button-text: #000000;
  --button-background: #FCE8DB;
  --button-border: 1px solid #000000;
}

/* Pixelfed - White background with black border */
.button-pixelfed {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* PlayStation - Blue background */
.button-playstation {
  --button-text: #FFFFFF;
  --button-background: #0070D1;
}

/* Qobuz - Black background with white text */
.button-qobuz {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* QQ - White background with black border */
.button-qq {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* Ravelry - Light gray background */
.button-ravelry {
  --button-text: #000000;
  --button-background: #F3F4F0;
  --button-border: 1px solid #000000;
}

/* Redbubble - White background with red text */
.button-redbubble {
  --button-text: #e41321;
  --button-background: #ffffff;
  --button-border: 1px solid #212121;
}

/* ResearchGate - White background with dark border */
.button-researchgate {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #212121;
}

/* Revolut - White background with black border */
.button-revolut {
  --button-text: #000000;
  --button-background: #ffffff;
  --button-border: 1px solid black;
}

/* Roll20 - Pink background */
.button-roll20 {
  --button-text: #FFFFFF;
  --button-background: #EC008C;
}

/* SimpleX Chat - Light gray background */
.button-simplex {
  --button-text: #000000;
  --button-background: #F3F6F7;
  --button-border: 1px solid #000000;
}

/* SimpleX Chat Alt - Black background with white text */
.button-simplex-alt {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Skoob - Blue background */
.button-skoob {
  --button-text: #FFFFFF;
  --button-background: #3189C8;
}

/* SpaceHey - Blue background */
.button-spacehey {
  --button-text: #FFFFFF;
  --button-background: #3234CF;
}

/* Tidal - Black background with white text */
.button-tidal {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Trakt - Red background */
.button-trakt {
  --button-text: #ffffff;
  --button-background: #ED1C24;
}

/* Untappd - Yellow background */
.button-untappd {
  --button-text: #000000;
  --button-background: #ffc000;
}

/* Upwork - Green background */
.button-upwork {
  --button-text: #FFFFFF;
  --button-background: #14A800;
}

/* Vero - Black background with white text */
.button-vero {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* VRChat - White background with black border */
.button-vrchat {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* WIP - Yellow background */
.button-wip {
  --button-text: #000000;
  --button-background: #F9DB00;
}

/* Write.as - White background with black border */
.button-writeas {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #000000;
}

/* WriteFreely - Light gray background */
.button-writefreely {
  --button-text: #000000;
  --button-background: #F4F4F4;
  --button-border: 1px solid #000000;
}

/* Xbox - Green background */
.button-xbox {
  --button-text: #FFFFFF;
  --button-background: #107C10;
}

/* Xing - Teal background */
.button-xing {
  --button-text: #FFFFFF;
  --button-background: #026466;
}