import styled from 'styled-components';
import { GetThemeVar } from '../../../support/GetThemeVar';

const css = styled.div;

export const FiltersContainerStyle = css<any>`
   display: contents;

   .filters {
      .filters-title {
         font-size: 20px;
         font-weight: 500;
         line-height: 20px;
         margin-bottom: 25px;

         .clear-filters {
            float: right;
            text-transform: uppercase;
            color: ${(props) => GetThemeVar(props.theme, 'primary')};
            font-size: 14px;
            font-weight: 600;
            vertical-align: middle;
            line-height: 20px;
            cursor: pointer;
         }
      }
   }

   .filters-mobile {
      display: flex;
      flex-direction: column;
      max-height: 100%;
      min-height: 0px;
      height: 100%;

      .filters-title {
         flex: 0;
         padding: 20px 20px;
         font-size: 20px;
         font-weight: 600;
         margin-bottom: 0px;

         .close-btn {
            position: absolute;
            right: 20px !important;
            top: 20px !important;
            cursor: pointer;
            z-index: 10;
         }
      }

      .filters-btn {
         flex: 0;
         padding: 10px;

         .btn {
            width: 100%;
            padding: 10px;
            font-size: 15px;
            font-weight: 600;
         }
      }

      .clear-filters {
         //display: inline-block;
         //font-weight: 800;
         font-size: 13px;
         padding: 7px 0px;
         margin-top: 5px;
         font-weight: bold;
         cursor: pointer;
         //right: 50px;
         //top: 22px;
      }
   }

   .filters-body {
      flex: 1;
      overflow-y: auto;
      padding: 0px 20px;
   }
`;

export const FiltersMobileStyle = css<any>`
   display: flex;
   flex-direction: column;
   max-height: 100%;
   min-height: 0px;
   height: 100%;
   background: white;
   width: 100%;
   z-index: 100;

   .filters-title {
      flex: 0;
      padding: 15px 20px;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 0px;

      .close-btn {
         position: absolute;
         right: 20px !important;
         top: 20px !important;
         cursor: pointer;
         z-index: 10;
      }
   }

   .filters-btn {
      flex: 0;
      padding: 10px;

      .btn {
         width: 100%;
         padding: 10px;
         font-size: 15px;
         font-weight: 600;
      }
   }

   .clear-filters {
      font-size: 13px;
      padding: 7px 0px;
      margin-top: 0px;
      font-weight: bold;
      cursor: pointer;
      display: table;
   }

   .filters-body {
      flex: 1;
      overflow-y: auto;
      padding: 10px 20px;
   }
`;
