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

100% Statements 6/6
100% Branches 6/6
100% Functions 1/1
100% Lines 6/6

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
    28
    29
    302x
    2x
    2x

    2x

    15x
    15x

     import styled, { css } from 'styled-components'
    import { Button } from '../Button/Button'
    import { colors } from '../_styles/colors'

    export const StyledToggleButton = styled(Button)<{ $selected: boolean }>`

      ${({ $selected }) =>
        $selected &&
        css`
          background-color: ${colors.blue50};
          color: ${colors.white};

          &:hover {
            background-color: ${colors.blue40};
            color: ${colors.white};
          }

          &:focus {
            background-color: ${colors.blue50};
            color: ${colors.white};
          }

          &:disabled {
            background-color: ${colors.blue85};
            color: ${colors.white};
          }
        `}
    }
    `