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

export const TaskInfoContainer = styled.div`
  display: flex;
  align-items: center;
  gap: 1rem;
`;

export const NameTask = styled.div`
  color: var(--Black, rgba(31, 31, 31, 1));
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0rem;
  text-align: left;
`;

export const Switch = styled.div`
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-radius: 2rem;
  padding: 0.13rem;
  height: 2rem;
  background: #f3f3f5;
`;

export const Buttons = styled.div`
  width: max-content;
  height: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
`;

export const StyledNavLink = styled(NavLink)`
  padding: 0.06rem 0.44rem 0.13rem;

  &.active {
    border-radius: 0.88rem;
    height: 1.75rem;
    background-color: white;
  }
`;
