@procraft/widget-order/src/components/Tabs/styles.ts

Order widget for landing

import styled, { css } from 'styled-components'

export const TabsToolbarStyled = styled.div`
  /* border: 1px solid blue; */

  /* Container */
  > div {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 5px;
  }
`

export const TabStyled = styled.div<{
  active: boolean
}>`
  /* border: 1px solid blue; */
  padding: 2px 5px;
  font-size: 12px;
  cursor: pointer;

  ${({ active }) => {
    if (active) {
      return css`
        background: rgb(51 77 136 / 62%);
        border-radius: 5px;
        color: white;
      `
    }
  }}
`

export const TabsContentStyled = styled.div``

export const TabsStyled = styled.div`
  /* border: 1px solid blue; */
  width: 100%;
`