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

const css = styled.div;

export default css<any>`
   .nav-actions {
      background: ${(props) =>
         props.background || props.theme?.navActions?.backgroundColor || props.theme.primary || ThemeDefault.primary};
      width: 100%;

      .deselect {
         font-size: 16px;
         color: ${(props) => props.color || props.theme?.navActions?.textColor || ThemeDefault.primaryTextInside};
         padding-left: 14px;
         background: rgba(0, 0, 0, 0.12);

         &:hover {
            cursor: pointer;
         }
      }

      .count-items {
         font-size: 16px;
         color: ${(props) => props.color || props.theme?.navActions?.textColor || ThemeDefault.primaryTextInside};
         padding-left: 14px;
         background: rgba(0, 0, 0, 0.12);
         padding-right: 15px;
      }

      .actions {
         text-align: left;

         @media only screen and (max-width: 1024px) {
            text-align: right;
         }

         .header-icon {
            color: ${(props) => props.color || props.theme?.navActions?.textColor || ThemeDefault.primaryTextInside};
            display: inline-block;
            font-size: 18px;
            width: 40px;
            height: 40px;
            margin-left: 5px;
            line-height: 40px;
            position: relative;
            text-align: center;
            cursor: pointer;

            i {
               position: relative;
               z-index: 2;
            }

            &:before {
               position: absolute;
               top: 50%;
               left: 50%;
               transform: translate(-50%, -50%);
               content: '';
               background: rgba(0, 0, 0, 0.1);
               width: 0px;
               height: 0px;
               position: absolute;
               border-radius: 100%;
               transition: 0.2s all;
               z-index: 1;
            }

            &:hover {
               &:before {
                  width: 40px;
                  height: 40px;
                  transition: 0.2s all;
               }
            }
         }
      }
   }
`;
