import styled from 'styled-components';

const css = styled.div;

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

      .tab-selector {
         content: '';
         width: 55px;
         height: 30px;
         position: absolute;
         background: black;
         border-radius: 100px;
         z-index: 1;
      }

      .tab {
         margin-top: 0px;
         text-transform: uppercase;
         font-size: 13px;
         height: 30px;
         font-weight: 700;
         padding: 10px 13px;
         text-align: center;
         display: inline-block;
         color: #888;
         transition: 0.3s background;
         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: white;
            font-weight: 800;
            transition: 0.3s all;

            .skeleton {
               color: black;
               background: transparent;
            }

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

         &:hover {
            cursor: pointer;
         }
      }

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