import { css } from 'styled-components';

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-warm-grey-4);
    --card-border-color: var(--color-warm-grey-4);
    --card-border-color-hover: var(--color-warm-grey-3);
    --card-icon-bg-color: var(--card-bg-color);
  }

  .card-variant-outlined {
    --card-border-color: var(--color-warm-grey-4);
    --card-border-color-hover: var(--color-warm-grey-5);
  }
  
  .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;
  }
`;