import styled from 'styled-components';

const css = styled.div;

export const SubHeaderContainerStyle = css<any>`
   .results-info {
      display: flex;
      align-items: center;
      padding: 10px 20px;
      font-weight: 600;
      width: 100%;

      .btn-filter {
         background: transparent;
         width: 100%;
         color: ${(props) => props.theme.primary};
         border: 2px solid ${(props) => props.theme.primary};
         font-weight: 600;
         padding: 5px;
         border-radius: 20px;
      }

      .btn-filter-row {
         display: none;
         padding: 5px 0px;
         margin-bottom: 10px;
      }

      .text-results {
         flex: 1;
      }

      @media (max-width: 1000px) {
         flex-direction: column;
         align-items: start;
         padding: 7px 10px;

         .sort {
            width: 100%;
         }

         .text-results {
            padding-top: 5px;
            padding-bottom: 5px;
         }

         .btn-filter-row {
            display: block;
            width: 100%;
         }
      }
   }

   .tags-filter-container {
      padding: 5px 20px;
   }
`;
