import styled from 'styled-components';
import { ThemeDefault } from '../../types/theme.interface';

const css = styled.div;

export const TabsContainer = css<any>`
   .tabs {
      white-space: nowrap;
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
      position: relative;

      .tab-selector {
         content: '';
         width: 55px;
         height: 30px;
         position: absolute;
         background: ${(props) => props.backgroundActiveColor ?? props.theme.primary ?? ThemeDefault.primary};
         border-bottom: 0px solid
            ${(props) => props.backgroundActiveColor ?? props.theme.primary ?? ThemeDefault.primary};
         border-radius: 100px;
         ${(props) => !props.activeButtonRounded && 'background: transparent;'};
         ${(props) => !props.activeButtonRounded && 'border-width: 2px;'};
         ${(props) => !props.activeButtonRounded && 'border-radius: 0px;'};
         z-index: 1;
      }

      .tab {
         margin-top: 0px;
         //text-transform: uppercase;
         font-size: 14px;
         height: 30px;
         font-weight: 600;
         text-align: center;
         display: inline-block;
         color: ${(props) => props.textColor ?? '#888'};
         z-index: 2;
         position: relative;
         line-height: 0px;
         padding: 15px 17px;
         border-radius: 100px;
         transition: 0.3s all;

         .skeleton {
            color: #eee;
            background: #eee;
         }

         &.active {
            color: ${(props) =>
               props.textActiveColor ?? props.theme.primaryTextInside ?? ThemeDefault.primaryTextInside};
            transition: 0.3s all;
            ${(props) =>
               !props.activeButtonRounded &&
               `color: ${props.textActiveColor ?? props.theme.primary ?? ThemeDefault.primary};`};

            .skeleton {
               color: ${(props) => props.color ?? props.theme.primary ?? ThemeDefault.primary};
               background: transparent;
            }

            .badge {
               background: ${(props) => props.theme.primary};
            }
         }

         &:hover {
            cursor: pointer;
         }
      }

      .badge {
         background: #cacaca;
         color: white;
         font-size: 11px;
         margin-left: 5px;
      }
   }
`;
