import styled from 'styled-components';

export const StyledContainer = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: stretch;
  padding: 0;
  max-width: 100%;
  margin-top: 11px;
  margin-bottom: 0;
`;

export const StyledContentWrapper = styled.div`
  display: flex;
  gap: 12px;
`;

export const StyledInfoBox = styled.div`
  border-radius: 20px;
  border: 1px solid #e2e0db;
  background: #fff;
  color: #8e8a85;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.07px;
  padding: 6px 10px;
`;

export const StyledLabel = styled.div`
  color: #8e8a85;

  font-size: 13px;
  font-weight: 400;
  line-height: 16px;
  display: flex;
  align-items: center;
`;

export const StyledDropdownData = styled.select`
  font-size: 0.875rem;
  padding: 6px 10px;
  background-color: white;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  color: #71717a;
`;

export const StyledPaginationWrapper = styled.div`
  display: flex;
  gap: 0;
  background-color: white;
  border: 1px solid rgba(208, 213, 221, 0.5);
  border-radius: 9999px;
`;

export const StyledPaginationItem = styled.button<{ active?: boolean }>`
  background: ${({ active }) =>
    active ? 'rgba(208, 213, 221, 0.80)' : 'white'};
  color: ${({ active }) => (active ? 'black' : 'black')};
  border: none;
  border-left: 1px solid rgba(208, 213, 221, 0.5);
  padding: 0.5em 1em;
  border-radius: 0;
  cursor: pointer;
  &:hover {
    background: rgba(208, 213, 221, 0.8);
    color: #000;
  }
  &:disabled {
    background: #f0f0f0;
    cursor: not-allowed;
  }
  &:first-child {
    border-radius: 100px;
    padding: 0 1em;
    display: flex;
    align-items: center;
  }
  &:last-child {
    border-radius: 0 100px 100px 0;
    padding: 0 1em;
    display: flex;
    align-items: center;
  }
`;
export const StyledDropdown = styled.div`
  position: relative;
  display: inline-block;
`;
export const StyledPaginationIcon = styled.img`
  width: 1.5rem;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
`;
