body {
    --close-btn-background: var(--gray-200);
    --create-page-main-header-background: var(--midnight-800);
}

/* stylelint-disable custom-property-pattern */
$platform-colors: (
    'amazonMusic': var(--color-amazonMusic),
    'appleMusic': var(--color-appleMusic),
    'deezer': var(--color-deezer),
    'facebook': var(--color-facebook),
    'googlePlay': var(--color-googlePlay),
    'instagram': var(--color-instagram),
    'napster': var(--color-napster),
    'pandora': var(--color-pandora),
    'soundcloud': var(--color-soundCloud),
    'spotify': var(--color-spotify),
    'tiktok': var(--color-tikTok),
    'twitter': var(--color-twitter),
    'vKontakte': var(--color-vKontakte),
    'vk': var(--color-vKontakte),
    'ok': var(--color-odnoklassniki),
    'youtube': var(--color-youtube),
    'line': var(--color-line-japan),
);
$source-of-streams-colors: (
    'ACTIVE': var(--dataviz-2),
    'COLLECTION': var(--dataviz-3),
    'PASSIVE': var(--dataviz-1),
    'UNKNOWN': var(--gray-500),
);

// TODO: can any of these be cleaned up? e.g. gray-50 is a figma variable.
:root {
    --link-color: #{$link-color};
    --color-amazonMusic: #f90;
    --color-appleMusic: #f04861;
    --color-deezer: #ffed00;
    --color-facebook: #4460a0;
    --color-googlePlay: #4285f4;
    --color-instagram: #c32aa3;
    --color-line-japan: #07b53b;
    --color-napster: #111;
    --color-odnoklassniki: #ee8208;
    --color-pandora: #00a0ee;
    --color-soundCloud: #fe5000;
    --color-spotify: #1ed760;
    --color-tikTok: #000;
    --color-twitter: #1da1f2;
    --color-vKontakte: #45668e;
    --color-youtube: #f00;
}
/* stylelint-enable custom-property-pattern */