// Brand colors
$blue: #0957ff;
$blue-hover: #0944c1;
$red: #ec0c43;
$yellow: #fbb03b;
$magenta: #e944ff;
$cyan: #33ccff;
$black: #151515;
$black-l: #06225d;
$blue-gradient: linear-gradient(20deg, $blue-hover 0%, $blue 100%);
$magenta-gradient: linear-gradient(20deg, $magenta 0%, $yellow 100%);
$cyan-gradient: linear-gradient(20deg, $magenta 0%, $cyan 100%);

// Supporting colors
$grey-text-primary: #666666;
$grey-text-light: #999999;
$color-twitter-blue: #1da1f2;
$color-twitter-blue-hover: #1a8cd2;
$color-facebook-blue: #3b5998;
$grey-bg-light: #f6f6f6;
$grey-bg: #eaeaea;
$grey-l: #eeeeee;
$grey-xl: #f8f8f8;
$grey-m: #cccccc;
$shadow-blue: #e4e8f7;
$blue-xl: #f5f8ff;
$blue-xl-border: #e8ecf8;
$blue-bg-l: #d0daf0;
$blue-edit: #33a1cb;

// Fonts
$font-family-default: 'Metropolis', sans-serif;
$font-family-serif: 'Noto Serif TC', serif;

// Mixins

@function getAssetUrl($url) {
    @return '{{(resources.Get "#{$url}" | fingerprint).RelPermalink }}';
}

@mixin icon($url) {
    -webkit-mask: url($url) no-repeat 50% 50%;
    mask: url($url) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
}

