{"size": 1436, "ext": "js", "max_stars_repo_path": "src/molecules/Todos/Todos.style.js", "max_stars_repo_name": "NaseebullahSafi/todo-app", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/molecules/Todos/Todos.style.js", "max_issues_repo_name": "NaseebullahSafi/todo-app", "max_issues_repo_issues_event_min_datetime": "2021-03-10T15:34:47.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T03:23:51.000Z", "max_forks_repo_path": "src/molecules/Todos/Todos.style.js", "max_forks_repo_name": "NaseebullahSafi/todo-app", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 19.4054054054, "max_line_length": 78, "alphanum_fraction": 0.5584958217}
import styled, { css } from "styled-components";

export const StyledList = styled.div`
  .item-enter {
    transform: scale(1.2);
  }

  .item-enter.item-enter-active {
    transition: all 0.6s cubic-bezier(0.23, 1.12, 0.4, 1.12);
    transform: scale(1);
  }

  .item-exit {
    transform: scale(1);
  }

  .item-exit.fade-exit-active {
    transform: scale(0);
    transition: all 0.6s cubic-bezier(0.23, 1.12, 0.4, 1.12);
  }
`;

export const StyledRow = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
`;

export const StyledBtn = styled.button`
  border-radius: 100%;
  padding: 1em;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.15s ease-in;
  cursor: pointer;
  border-radius: 0.4em;
  background-color: white;
  width: 60px;
  height: 60px;
  margin: 1em;

  ${({ disable }) =>
    disable
      ? css`
          opacity: 0.5;
          pointer-events: none;
          transform: scale(0.9);
          cursor: none;
        `
      : ""}

  svg {
    color: #525f7f;
    transition: all 0.15s ease-in;
    fill: transparent;
  }

  &:hover {
    ${({ disableIconHover }) =>
      !disableIconHover
        ? css`
            svg {
              fill: #f5365c;
              stroke: #f5365c;
            }
          `
        : ""}
  }
`;
