import styled from "styled-components";
import { Arrow } from "./arrow";
export const ArrowLeft = styled(Arrow) `
  height: 16px;
  width: 16px;
  padding-right: 7px;
`;
export const ArrowRight = styled(ArrowLeft) `
  transform: rotate(180deg);
`;
export const Button = styled.button `
  font-family: Medium;
  background-color: unset;
  min-width: unset;
  width: fit-content;
  display: flex;
  align-items: center;
  border: unset;
  cursor: pointer;

  color: ${({ theme }) => theme?.new?.colors?.black900 ?? "unset"};

  :disabled {
    background-color: unset;
    path {
      fill: ${({ theme }) => theme?.new?.colors?.black100 ?? "unset"};
    }
  }

  :hover {
    text-decoration: unset;
  }

  :hover:not(:disabled) {
    color: ${({ theme }) => theme?.new?.colors?.primary900 ?? "unset"};

    path {
      transition: 0.2s;
      fill: ${({ theme }) => theme?.new?.colors?.primary900 ?? "unset"};
    }
  }
`;
export const PageNumber = styled.button `
  height: 20px;
  min-width: 20px;
  width: fit-content;
  border-radius: 10px;
  background-color: unset;
  border: 0;
  transition: unset;
  pointer-events: none;

  color: #000;
  font-size: 12px;
  font-family: Medium;

  &.hoverable {
    pointer-events: auto;
  }

  &.hoverable:hover:not(:disabled) {
    cursor: pointer;
    color: ${({ theme }) => theme?.new?.colors?.white900 ?? "unset"};
    background-color: ${({ theme }) => theme?.new?.colors?.primary950 ?? "unset"};
  }
`;
export const PageNumbers = styled.div `
  display: flex;
  padding: 0 20px;

  > *:not(:last-child) {
    margin-right: 8px;
  }

  .active {
    color: #fff;
    background-color: ${({ theme }) => theme?.new?.colors?.primary950 ?? "unset"};
  }

  .active:disabled {
    opacity: 0.5;
    background-color: ${({ theme }) => theme?.new?.colors?.primary950 ?? "unset"};
  }
`;
export const Container = styled.div `
  display: flex;
  flex-flow: row;
  height: 32px;
  padding: 12px 0;
  align-items: center;
  font-family: Medium;
  font-size: 14px;
  line-height: 18px;

  &.disabled {
    * {
      pointer-events: none;
      opacity: 0.8;
    }
  }
`;
export const Inner = styled.div `
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  width: 380px;
`;
//# sourceMappingURL=pagination.styled.js.map