import styled from "styled-components";
import { color } from "../../../../style/varibles";

export const TicketSearchDivStyled = styled.div`
  padding: 0 6px;
  display: flex;
  flex-direction: row;
`;
export const TicketSearchInputBoxStyled = styled.div`
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  margin-right: 12px;
  background-color: ${color.complement.azulOscuro};
  border: 2px solid ${color.pricinpal.blanco};
  color: ${color.pricinpal.blanco};
  border-radius: 4px;
  padding: 6px;
  & svg {
    fill: ${color.gradient.border};
  }
  &:after {
    position: absolute;
    right: 6px;
    content: "";
    display: ${({ spinning }) => (!spinning ? "none" : "block")};
    width: 16px;
    height: 16px;
    border-top: 2px solid ${color.gradient.border};
    border-left: 2px solid ${color.gradient.border};
    border-bottom: 2px solid ${color.gradient.border};
    border-right: 2px solid ${color.pricinpal.naranja};
    border-radius: 50%;
    animation: spining 0.5s infinite linear;
  }
  @keyframes spining {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
`;
export const TicketSearchInputStyled = styled.input`
  width: 100%;
  border: none;
  color: ${color.pricinpal.blanco};
  background-color: ${color.complement.azulOscuro};
  &:focus,
  &:focus-visible {
    border: none;
    background-color: ${color.complement.azulOscuro};
    outline: none;
  }
`;