import styled, { css } from 'styled-components';

import { ICheckRadioField } from './CheckRadioField.interface';
import { colors } from '@/styles/variables';
import { pxToRem } from './../../../../styles/variables';

export const StyledCheckRadioField = styled.div<ICheckRadioField>`
  position: relative;

  input[type="checkbox"],
  input[type="radio"] {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;

    cursor: pointer;
    z-index: 5;

    &+label {
      display: inline-block;
      vertical-align: middle;

      position: relative;
      text-align: left;
      margin-bottom: 0;
      padding: 5px 0;
      padding-left: ${pxToRem(34)};

      &:before,
      &:after {
        content: "";
        position: absolute;
        top: 50%;

        cursor: pointer;

        transition: all 0.3s linear;
      }

      &:before {
        left: 0px;
        margin-top: ${pxToRem(-12)};
        width: ${pxToRem(24)};
        height: ${pxToRem(24)};

        background: transparent;
        border: 1px solid currentColor;
        border-radius: 4px;
      }

      &:after {
        opacity: 0;
        visibility: hidden;
      }
    }
  }

  & input[type="checkbox"]+label {
    &:after {
      left: ${pxToRem(5)};
      margin-top: ${pxToRem(-4)};
      width: ${pxToRem(14)};
      height: ${pxToRem(6)};

      border: 2px solid ${colors.white};
      border-top: none;
      border-right: none;

      transform: rotate(-45deg);
    }
  }

  & input[type="radio"]+label {
    &:before,
    &:after {
      border-radius: 50%;
    }

    &::after {
      background: ${colors.white};

      width: ${pxToRem(13)};
      height: ${pxToRem(13)};

      margin-top: ${pxToRem(-6)};
      left: ${pxToRem(5.5)};
    }
  }

  & input[type="checkbox"]:checked+label::before,
  & input[type="radio"]:checked+label::before {
    border-color: ${colors.primary70};
    background: ${colors.primary70};
  }

  & input[type="checkbox"]:checked+label::after,
  & input[type="radio"]:checked+label::after {
    opacity: 1;
    visibility: visible;
  }

  .style-dark & {
    & input[type="checkbox"]+label {
      &:after {
        border-color: ${colors.primary70};
      }
    }

    & input[type="radio"]+label {
      &::after {
        background: ${colors.primary70};
      }
    }
    & input[type="checkbox"]:checked+label::before,
    & input[type="radio"]:checked+label::before {
      border-color: ${colors.white};
      background: ${colors.white};
    }
  }

`;