@use "../../../styles/tokens/color";
@use "../../../styles/tools/convert";

$size: (
  min-height: convert.to-rem(40px),
  width: convert.to-rem(40px),
  padding: 0,
);

// Social media brand colors for hover states
$social-colors: (
  "x": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #067acc,
      border-color: #067acc,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "facebook-2": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #3b5998,
      border-color: #3b5998,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "linkedin-2": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #0077b5,
      border-color: #0077b5,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "instagram": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #e1306c,
      border-color: #e1306c,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "pinterest": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #e60023,
      border-color: #e60023,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "snapchat": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: #000000 "!important",
      background-color: #fffc00,
      border-color: #fffc00,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "tiktok": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #ff2c55,
      border-color: #ff2c55,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "whatsapp": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #25d366,
      border-color: #25d366,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "youtube": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: #ff0000,
      border-color: #ff0000,
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
  "email": (
    default: (
      color: var(--color-text-default),
      background-color: transparent,
    ),
    hover: (
      color: color.$white "!important",
      background-color: var(--color-icon-brand),
      border-color: var(--color-icon-brand),
    ),
    pressed: (
      color: var(--color-text-inverse) "!important",
      background-color: var(--color-fill-contrast),
      border-color: var(--color-border-contrast),
    ),
  ),
);