"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const styled_components_1 = require("styled-components");
const checkboxStyle = styled_components_1.css `
  .ag-checkbox-input-wrapper::after,
  .ag-checkbox-input-wrapper.ag-checked::after {
    content: '';
  }

  .ag-checkbox-input-wrapper {
    background-color: ${({ theme }) => theme.checkbox.bg};
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid ${({ theme }) => theme.checkbox.border};

    &:hover,
    &:active,
    &:focus {
      border-color: ${({ theme }) => theme.main};
    }

    &.ag-checked {
      background-image: linear-gradient(
        180deg,
        ${({ theme }) => theme.gradient.from} 0%,
        ${({ theme }) => theme.gradient.to} 100%
      );
      border: none;
    }
  }

  .ag-checkbox-input-wrapper.ag-checked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 25%;
    width: 6px;
    height: 9px;
    border: 2px solid ${({ theme }) => theme.checkbox.checker};
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) translate(-50%, -50%);
  }

  .ag-checkbox-input-wrapper:focus-within,
  .ag-checkbox-input-wrapper:active {
    box-shadow: none;
  }
`;
exports.default = checkboxStyle;
