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

96.29% Statements 26/27
79.41% Branches 27/34
100% Functions 4/4
95.23% Lines 20/21

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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    1122x
    2x
    2x
    2x
    2x

    2x

    10x

    10x

    2x

    25x
    25x

    25x
    25x
    2x

    23x
    6x

    17x
    4x

    2x

    2x

     import styled, { css } from 'styled-components'
    import { getTypographyIntent } from '../Typography/Typography.styles'
    import { borderRadius } from '../_styles/borderRadius'
    import { colors } from '../_styles/colors'
    import { spacing } from '../_styles/spacing'

    export const StyledContainer = styled.div<{ block?: boolean }>`
      align-items: center;
      display: ${({ block }) => (block ? 'flex' : 'inline-flex')};
      height: 36px;
      justify-content: center;
      width: ${({ block }) => (block ? '100%' : null)};
    `

    export const StyledSegment = styled.label<{
      $disabled: boolean
      $focused: boolean
      $active: boolean
    }>`
      align-items: center;
      border-radius: 0;
      border: 1px solid ${colors.gray85};
      cursor: pointer;
      display: flex;
      flex: 1 1 auto;
      height: 100%;
      justify-content: center;
      min-width: 0;
      outline: 0;
      padding: 0 ${spacing.md}px;
      position: relative;
      background-color: ${colors.white};
      color: ${colors.gray45};

      &:hover {
        background-color: ${colors.gray94};
        border-color: ${colors.gray85};
        color: ${colors.gray45};
      }

      ${({ $focused = false }) => {
        Iif ($focused) {
          return css`
            border-color: ${colors.blue40};
            box-shadow: 0 0 0 1px ${colors.blue40};
            z-index: 1;
          `
        }
      }}

      ${({ $disabled = false, $active = false }) => {
        if ($disabled && $active) {
          return css`
            &,
            &:hover,
            &:disabled {
              background-color: ${colors.gray85};
              border-color: ${colors.gray85};
              color: ${colors.white};
              pointer-events: none;
            }
          `
        } else if ($disabled) {
          return css`
            &,
            &:hover,
            &:disabled {
              background-color: ${colors.white};
              border-color: ${colors.gray85};
              color: ${colors.gray85};
              pointer-events: none;
          `
        } else if ($active) {
          return css`
            &,
            &:hover {
              background-color: ${colors.blue50};
              border-color: ${colors.blue50};
              color: ${colors.white};
            }
          `
        }
      }};
    `

    export const StyledSegmentDisabledInteractiveWrapper = styled.div`
      display: flex;
      flex: 1 1 auto;
      min-width: 0;
      height: 100%;
      margin-right: -1px;

      &:first-child ${StyledSegment} {
        border-bottom-left-radius: ${borderRadius.md}px;
        border-top-left-radius: ${borderRadius.md}px;
      }

      &:last-child ${StyledSegment} {
        border-bottom-right-radius: ${borderRadius.md}px;
        border-top-right-radius: ${borderRadius.md}px;
      }
    `

    export const StyledLabel = styled.span`
      ${getTypographyIntent('body')};

      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    `