import styled from "styled-components";
import { gray, primary } from "../../core/colors/colors";

export const CheckboxStyle = styled.div`
  width: 16px;
  height: 16px;

  display: flex;
  align-items: center;

  position: relative;

  input {
    width: 100%;
    height: 100%;

    appearance: none;

    border: 1px solid ${gray[200]};
    border-radius: 4px;

    background-color: #fff;

    cursor: pointer;

    &:checked {
      border-color: ${primary[500]};

      background-color: #fff;
    }

    &:disabled {
      border-color: ${gray[400]};

      background-color: ${gray[100]};

      cursor: inherit;
    }
  }

  svg {
    width: 12px;
    height: 12px;

    stroke: ${primary[500]};

    position: absolute;
    left: 2px;
  }
`;
