import styled from 'styled-components'

import { FilterIcon } from '~/resources/icons'


export const FiltersBar = styled.div`
  display: flex;
  align-items: center;
  padding: 8px;
  column-gap: 12px;
  min-height: 40px;
`

export const QueryField = styled.input.attrs({ type: 'text' })`
  border-radius: 1em;
  border: none;
  outline: none;
  box-shadow: 0 0 0 1px #a7a7a7;
  padding: 4px 8px;
  font-size: 12px;
  transition: 0.2s box-shadow ease-in;

  &:focus {
    box-shadow: #0fb876 0px 0px 0px 1px, #78ddb5 0px 0px 0px 3px;
  }
`

export const EventTypeCheckboxBadge = styled.div`
  padding: 4px;
  border-radius: 100%;
  display: inline-block;
`

export const HiddenInput = styled.input.attrs({ type: 'checkbox' })`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
`

export const EventTypeCheckboxLabel = styled.label`
  cursor: pointer;
  transform: translate(-1px, 1px);

  ${EventTypeCheckboxBadge} {
    box-shadow: #d9d9d9 0px 0px 0px 2px;
    filter: saturate(0);
    background: #f1f1f1;
  }

  input:checked ~ ${EventTypeCheckboxBadge} {
    box-shadow: #00b26b 0px 0px 0px 2px;
    filter: saturate(1);
    background: #e6ffec;
  }
`

export const Fieldset = styled.fieldset`
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 6px;
  background: #e5e5e5;
  padding: 4px 6px;
  border-radius: 1rem;
`

export const ShowEventTypeFilters = styled.button`
  display: flex;
  align-items: center;
  border-radius: 1em;
  border: none;
  background: #00ab76;
  font-size: 12px;
  color: #ffffff;
  padding: 4px 12px;
  cursor: pointer;

  &::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 4px;
    background: url(${FilterIcon});
    background-size: 100%;
  }
`

export const ClearEventTypeFilters = styled.button`
  border-radius: 1em;
  border: none;
  background: rgb(111 111 111);
  font-size: 12px;
  margin-left: 4px;
  color: rgb(255 255 255);
  cursor: pointer;
  padding: 4px 8px;
`

export const VDivider = styled.div`
  width: 1px;
  background: #d7d7d7;
  height: 50%;
`
