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

const css = styled.div;

export default css<any>`
   position: relative;

   .input-border {
      &.autocomplete-border {
         min-height: 40px;
         height: auto;
         flex-direction: column;
      }

      .input-container {
         width: 100%;

         .input-border {
            border: none;
         }
      }
   }

   .tags {
      flex: 1;
      display: block;
      width: 100%;
      padding: 8px;
      padding-bottom: 0px;
      margin-bottom: -3px;

      .name {
         flex: 1;
         overflow: hidden;
         white-space: nowrap;
      }

      .close-btn {
         padding-left: 8px;
      }

      .tag {
         cursor: pointer;
         margin: 0px 3px 3px 0px;
         background: ${(props) => GetThemeVar(props.theme, 'primary')};
         color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};
         border-radius: 10px;
         padding: 3px 10px;
         font-size: 13px;
         font-weight: 600;
         display: inline-flex !important;
         flex-direction: row;
         max-width: 100%;
         align-items: center;
      }
   }

   .checkbox {
      width: ${(props) => props.size ?? 16}px;
      height: ${(props) => props.size ?? 16}px;
      line-height: ${(props) => props.size ?? 12}px;
      display: inline-block;
      border-radius: 3px;
      border: 2px solid rgba(0, 0, 0, 0.25);
      position: relative;
      ${(props) => props.rounded && `border-radius: 100px;`}
      margin-right: 10px;

      i {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-size: ${(props) => (props.size ?? 18) * 0.6}px;
         display: none;
         color: transparent;
      }

      svg {
         color: transparent;
         width: ${(props) => (props.size ?? 18) * 0.6}px;
         height: ${(props) => (props.size ?? 18) * 0.6}px;
      }

      &:hover {
         cursor: pointer;
      }

      &.active {
         border-color: ${(props) => GetThemeVar(props.theme, 'primary')};
         background: ${(props) => GetThemeVar(props.theme, 'primary')};

         svg {
            color: ${(props) => props.theme.primaryTextInside ?? 'white'};
         }

         i {
            display: block;
         }

         & + .title {
            font-weight: 600;
            color: ${(props) => props.color ?? props.theme.primary};
         }
      }
   }

   .autocomplete-list {
      border-radius: 5px;
      margin-top: 5px;
      position: absolute;
      z-index: 10;
      background: white;
      width: 100%;
      box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.24);
      max-height: 300px;
      overflow: auto;

      li {
         padding: 10px;
         display: block;
         font-weight: 500;
         font-size: 12px;
         display: flex;

         &.selected {
            color: ${(props) => GetThemeVar(props.theme, 'primary')};

            &.active {
               .checkbox {
                  background: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};
                  border-color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};

                  svg {
                     color: ${(props) => GetThemeVar(props.theme, 'primary')};
                  }
               }
            }
         }

         &:hover,
         &.active {
            cursor: pointer;
            padding: 10px;
            background: ${(props) => GetThemeVar(props.theme, 'primary')};
            color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};

            .checkbox {
               border-color: ${(props) => GetThemeVar(props.theme, 'primaryTextInside')};
            }
         }

         &.disabled {
            &:hover {
               background: transparent;
               cursor: default;
               color: initial;
            }
         }
      }
   }
`;
