import styled from 'styled-components';
import { TabsWrapperProps } from './interfaces';

export const TabsWrapperComponent = styled.div<TabsWrapperProps>`
  ${({ background }) => background && `background: ${background};`}
  width:100%;
  -moz-box-shadow: inset 0 -2px #f1f1f1;
  -webkit-box-shadow: inset 0 -2px #f1f1f1;
  box-shadow: inset 0 -2px #f1f1f1;
`;

export const TabsInnerWrapper = styled.div<TabsWrapperProps>`
  ${({ innerMaxWidthPx }) =>
    innerMaxWidthPx && `max-width: ${innerMaxWidthPx}px;`}
  ${({ innerWidthPercent }) =>
    innerWidthPercent && `width: ${innerWidthPercent}%;`}
    margin: 0 auto;
  display: flex;
  align-items: flex-end;
`;