# All files / src/Card Card.styles.ts

100% Statements 12/12
100% Branches 8/8
100% Functions 2/2
100% Lines 10/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    2850x
    50x
    50x
    50x

    50x

    236x
    236x

    236x

    236x
    236x

     import styled, { css } from 'styled-components'
    import { borderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { getShadow } from '../_styles/shadows'
    import { CardProps } from './Card.types'

    export const StyledCardContainer = styled.div<{
      $level?: CardProps['level']
      $shadowStrength: Required<CardProps>['shadowStrength']
      $variant?: CardProps['variant']
    }>`
      background-color: ${colors.white};
      border-radius: ${borderRadius.md}px;
      transition: box-shadow 0.2s ease-in-out;
      ${({ $level, $shadowStrength }) => {
        const strength = $level ? Number($level) / 10 : $shadowStrength

        return getShadow(strength)
      }}
      ${({ $variant, $shadowStrength }) =>
        $variant === 'hoverable' &&
        css`
          &:hover {
            ${getShadow($shadowStrength + 1)};
          }
        `}
    `