import styled from 'styled-components';
import Colors from '../Colors';
import Sizes from '../Sizes';
import TextHelper from '../TextHelper';

export const RadioItem = styled.input.attrs(() => ({
  type: 'radio',
}))`
  opacity: 0;
  position: absolute;

  ${({ isClassic }: { isClassic?: boolean}) => isClassic ? `
    & + .radio-item__label {
      position: relative;
      text-transform: none;

      &:after {
        content: '';
        position: absolute;
        display: inline-block;
        width: ${Sizes.s3 + 4}px;
        height: ${Sizes.s3 + 4}px;
        background-color: ${Colors.mongeral};
        margin-right: ${Sizes.s2}px;
        border-radius: 50%;
        border: 2px solid ${Colors.mongeral};
        transform: scale(0.5);
        opacity: 0;
        transition: .25s all ease;
      }
    }

    & + .radio-item__label {
      &:hover:before {
        border: 2px solid ${Colors.regalBlue};
      }
    }

    &:checked {

      & + .radio-item__label {
        &:before {
          border-color: ${Colors.mongeral};
          background-color: ${Colors.mongeral};
          transform: scale(0.5);
        }
  
        &:after {
          transform: scale(1);
          opacity: 1;
          color: ${Colors.mongeral};
          background: none;
        }
      }
    }
  ` : `
    & + .radio-item__label {
      transition: 0.4s all;
      background-size: 205% 100%;
      background-position: right bottom;
      background-repeat: no-repeat;
      background-image: linear-gradient(to left, ${Colors.white} 50%, ${Colors.mongeral} 0%);
    }

    &:checked {

      & + .radio-item__label {
        background-position: left bottom;
        border-color: ${Colors.mongeral};
        color: white;

        &:before {
          border-color: ${Colors.mongeral};
          background-color: ${Colors.regalBlue};
        }
      }
    }
  `}

  
`;

export const LabelItem = styled.label<{htmlFor: string, css?: string}>`
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 10px 20px 10px 10px;
  cursor: pointer;
  font-family: ${TextHelper.fontVariant('medium')};

  &:before {
    content: '';
    transition: 0.4s;
    display: inline-block;
    width: ${Sizes.s3 + 4}px;
    height: ${Sizes.s3 + 4}px;
    margin-right: ${Sizes.s2}px;
    border: 2px solid ${Colors.mongeral};
    border-radius: 50%;
  }
`;