import { css } from 'styled-components';

/* eslint-disable theme/no-raw-colors-in-styles */
export const cardsDarkMode = css`
  --card-icon-border-color: var(--color-warm-grey-4);
  --card-icon-bg-color: var(--color-warm-grey-3);
  
  .card-variant-filled {
    --card-bg-color: var(--color-warm-grey-3);
    --card-bg-color-hover: var(--color-brand-subtle-bg-hover, var(--card-bg-color-hover-legacy));
    --card-border-width: 0;
    --card-icon-bg-color: var(--card-bg-color);
    --card-icon-bg-color-hover: transparent;
  }

  .card-variant-outlined {
    --card-icon-bg-color: var(--color-warm-grey-3);
  }

  .card-variant-elevated {
    --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
    --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
  }
`;
/* eslint-enable theme/no-raw-colors-in-styles */