/*
 * ==============================================================================
 * Brand Button Styles
 * ==============================================================================
 * 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
 * 
 * Each brand 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);
}

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

/* ==========================================
 * Default Button
 * ==========================================
 * Generic blue button style
 */
.button.button-default {
  --button-text: #ffffff;
  --button-background: #2457F5;
  --button-border: 1px solid #ffffff;
}

/* ==========================================
 * Amazon
 * ==========================================
 * Black text on white background
 */
.button-amazon {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #212121;
}

/* Amazon Music - Blue gradient background */
.button-amazon-music {
  --button-text: #000000;
  --button-background: #25D1DA;
}

/* Apple App Store - Black background with white text */
.button-appstore {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

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

/* Apple Music - Black background with white text */
.button-apple-music {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Apple Music Alt - Red gradient background */
.button-apple-music-alt {
  --button-text: #ffffff;
  background-image: linear-gradient(to bottom, #FB5C74, #FA233B);
}

/* Apple Podcasts - Black background with white text */
.button-apple-podcasts {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Apple Podcasts Alt - Purple gradient background */
.button-apple-podcasts-alt {
  --button-text: #ffffff;
  background-image: linear-gradient(to bottom, #F452FF, #832BC1);
}

/* Bandcamp - Teal background */
.button-bandcamp {
  --button-text: #ffffff;
  --button-background: #1d9fc3;
}

/* Behance - Blue background */
.button-behance {
  --button-text: #ffffff;
  --button-background: #0057FF;
  --button-border: 1px solid #FFFFFF;
}

/* Bluesky - Blue background */
.button-bluesky {
  --button-text: #FFFFFF;
  --button-background: #1185FE;
}

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

/* Buy Me a Coffee - Yellow background */
.button-coffee {
  --button-text: #000000;
  --button-background: #ffdd00;
}

/* Cal.com - Black background with white text */
.button-cal {
  --button-text: #FFFFFF;
  --button-background: #292929;
  --button-border: 1px solid #FFFFFF;
}

/* Calendly - Blue background */
.button-calendly {
  --button-text: #FFFFFF;
  --button-background: #006BFF;
}

/* Cash App - Green gradient background */
.button-cash-app {
  --button-text: #ffffff;
  background-image: linear-gradient(to bottom, #00d64b, #00c244);
}

/* dev.to - Light gray background */
.button-dev-to {
  --button-text: #000000;
  --button-background: #f5f5f5;
  --button-border: 1px solid #212121;
}

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

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

/* Discord - Purple background */
.button-discord {
  --button-text: #ffffff;
  --button-background: #5865F2;
}

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

/* Etsy - Orange background */
.button-etsy {
  --button-text: #ffffff;
  --button-background: #F45800;
}

/* ==========================================
 * Facebook
 * ==========================================
 * Facebook blue background
 */
.button-faceb {
  --button-text: #ffffff;
  --button-background: #0866FF;
}

/* Facebook Messenger - Facebook blue background */
.button-messenger {
  --button-text: #ffffff;
  --button-background: #0866FF;
}

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

/* Fiverr - Green background */
.button-fiverr {
  --button-text: #ffffff;
  --button-background: #1DBF73;
}

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

/* ==========================================
 * GitHub
 * ==========================================
 * Black background with white text
 */
.button-github {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* GitLab - Purple background */
.button-gitlab {
  --button-text: #ffffff;
  --button-background: #6151b2;
}

/* GoFundMe - Green background */
.button-gofundme {
  --button-text: #ffffff;
  --button-background: #02A95C;
}

/* Goodreads - Beige background with dark border */
.button-goodreads {
  --button-text: #333333;
  --button-background: #f3f1e6;
  --button-border: 1px solid #212121;
}

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

/* Google Play Store - Black background with white text */
.button-playstore {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Google Scholar - White background with black border */
.button-google-scholar {
  --button-text: #000000;
  --button-background: #FFFFFF;
  --button-border: 1px solid #212121;
}

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

/* ==========================================
 * Instagram
 * ==========================================
 * Gradient background (purple to pink to orange)
 */
.button-instagram {
  --button-text: #ffffff;
  background-image: linear-gradient(-135deg, #1400c8, #b900b4, #f50000);
}

/* ==========================================
 * Kick
 * ==========================================
 * Black background with white border
 */
.button-kick {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #ffffff;
}

/* Kick Alt - Green background */
.button-kick-alt {
  --button-text: #000000;
  --button-background: #01e701;
}

/* Kickstarter - Green background */
.button-kickstarter {
  --button-text: #ffffff;
  --button-background: #05ce78;
}

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

/* Ko-fi - Black background with white text */
.button-ko-fi {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* ==========================================
 * Last.fm
 * ==========================================
 * Red background
 */
.button-last-fm {
  --button-text: #ffffff;
  --button-background: #D51007;
}

/* Letterboxd - Dark blue background */
.button-letterboxd {
  --button-text: #ffffff;
  --button-background: #2c3440;
  --button-border: 1px solid #FFFFFF;
}

/* Line - Green background */
.button-line {
  --button-text: #FFFFFF;
  --button-background: #06C755;
}

/* LinkedIn - Blue background */
.button-linked {
  --button-text: #ffffff;
  --button-background: #2867b2;
}

/* ==========================================
 * Mailchimp
 * ==========================================
 * Yellow background
 */
.button-mailchimp {
  --button-text: #000000;
  --button-background: #FFE01B;
}

/* Mastodon - Dark purple background */
.button-mastodon {
  --button-text: #ffffff;
  --button-background: #17063B;
  --button-border: 1px solid #FFFFFF;
}

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

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

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

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

/* Obsidian - Dark gray background */
.button.button-obsidian {
  --button-text: #ffffff;
  --button-background: #262626;
  --button-border: 1px solid #ffffff;
}

/* OnlyFans - Cyan background */
.button-onlyfans {
  --button-text: #ffffff;
  --button-background: #00AEEF;
}

/* ==========================================
 * Patreon
 * ==========================================
 * Black background with white text
 */
.button-patreon {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* PayPal - Dark blue background */
.button-paypal {
  --button-text: #ffffff;
  --button-background: #002991;
  --button-border: 1px solid #FFFFFF;
}

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

/* Product Hunt - White background with black border */
.button-product-hunt {
  --button-text: #000000;
  --button-background: #ffffff;
  --button-border: 1px solid #212121;
}

/* ==========================================
 * Reddit
 * ==========================================
 * Orange background
 */
.button-reddit {
  --button-text: #FFFFFF;
  --button-background: #FF4500;
}

/* ==========================================
 * Shop
 * ==========================================
 * Purple background
 */
.button-shop {
  --button-text: #ffffff;
  --button-background: #5A31F4;
}

/* Signal - Blue background */
.button-signal {
  --button-text: #ffffff;
  --button-background: #3B45FD;
}

/* Signal Alt - Light blue background with black text */
.button-signal-alt {
  --button-text: #3B45FD;
  --button-background: #E3E8FE;
  --button-border: 1px solid #000000;
}

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

/* Snapchat - Yellow background */
.button-snapchat {
  --button-text: #000000;
  --button-background: #fffc00;
}

/* SoundCloud - Orange background */
.button-soundcloud {
  --button-text: #ffffff;
  --button-background: #ff5500;
}

/* ==========================================
 * Spotify
 * ==========================================
 * Green background with dark text
 */
.button-spotify {
  --button-text: #191414;
  --button-background: #1db954;
}

/* Spotify Alt - Black background with white text */
.button-spotify-alt {
  --button-text: #FFFFFF;
  --button-background: #191414;
  --button-border: 1px solid #FFFFFF;
}

/* Square - Blue background */
.button-square {
  --button-text: #FFFFFF;
  --button-background: #006AFF;
}

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

/* Steam - Blue gradient background */
.button-steam {
  --button-text: #ffffff;
  background-image: linear-gradient(90deg, #08BBFF, #2B75FF);
}

/* Steam Alt - Dark blue gradient background */
.button-steam-alt {
  --button-text: #ffffff;
  background-image: linear-gradient(90deg, #09172a, #072a57, #0c5085);
  --button-border: 1px solid #FFFFFF;
}

/* Strava - Orange background */
.button-strava {
  --button-text: #ffffff;
  --button-background: #fc5200;
}

/* Substack - Orange background */
.button-substack {
  --button-text: #ffffff;
  --button-background: #FF6719;
}

/* ==========================================
 * Telegram
 * ==========================================
 * Light blue background
 */
.button-telegram {
  --button-text: #ffffff;
  --button-background: #3faee8;
}

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

/* Threema - Green background */
.button-threema {
  --button-text: #000000;
  --button-background: #3fe669;
}

/* ==========================================
 * TikTok
 * ==========================================
 * Black background with white text
 */
.button-tiktok {
  --button-text: #ffffff;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* Trello - Blue background */
.button-trello {
  --button-text: #ffffff;
  --button-background: #0065ff;
}

/* Tumblr - Black background with white text */
.button-tumb {
  --button-text: #ffffff;
  --button-background: #131313;
  --button-border: 1px solid #FFFFFF;
}

/* Twitch - Purple background */
.button-twitch {
  --button-text: #ffffff;
  --button-background: #9146ff;
}

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

/* ==========================================
 * Venmo
 * ==========================================
 * Blue background
 */
.button-venmo {
  --button-text: #ffffff;
  --button-background: #008CFF;
}

/* Vimeo - Cyan background */
.button-vimeo {
  --button-text: #ffffff;
  --button-background: #1ab7ea;
}

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

/* ==========================================
 * WhatsApp
 * ==========================================
 * Gray background
 */
.button-whatsapp {
  --button-text: #ffffff;
  --button-background: #455a64;
}

/* WordPress - Blue background */
.button-wordpress {
  --button-text: #ffffff;
  --button-background: #3858E9;
}

/* ==========================================
 * X (formerly Twitter)
 * ==========================================
 * Black background with white text
 */
.button-x {
  --button-text: #FFFFFF;
  --button-background: #000000;
  --button-border: 1px solid #FFFFFF;
}

/* ==========================================
 * YouTube
 * ==========================================
 * Gray background with white border
 */
.button-yt {
  --button-text: #ffffff;
  --button-background: #282828;
  --button-border: 1px solid #FFFFFF;
}

/* YouTube Alt - Red background */
.button-yt-alt {
  --button-text: #ffffff;
  --button-background: #FF0000;
}

/* Zoom - Blue background */
.button-zoom {
  --button-text: #ffffff;
  --button-background: #0B5CFF;
  --button-border: 1px solid #FFFFFF;
}