import { NavLink } from 'react-router-dom';
import styled from '@emotion/styled';

const Switch = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
`;

const Buttons = styled.div`
  width: max-content;
  height: 2rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.13rem;
  border-radius: 2rem;
  background: var(--GreyLight, rgba(243, 243, 245, 1));
`;

const StyledNavLink = styled(NavLink)`
  width: 10rem;
  width: max-content;
  height: 1.75rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 6;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background-color: inherit;
  border-radius: 0.875rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;

  &&.active {
    background: var(--White, rgba(255, 255, 255, 1));
  }
`;

export { Switch, Buttons, StyledNavLink };