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

export const RadioContainer = styled.label`
  display: flex;
  align-items: center;
  gap: 8px;

  span {
    ${fonts["body-r"]};
  }
`;

export const RadioStyle = styled.input`
  width: 16px;
  height: 16px;

  appearance: none;

  border-radius: 50px;
  border: 8px solid #fff;

  box-shadow: 0 0 0 1px ${gray[300]};

  cursor: pointer;

  &:checked {
    border: 3px solid ${gray[100]};

    box-shadow: 0 0 0 1px ${primary[500]};
    background-color: ${primary[500]};

    &:disabled {
      border: 3px solid ${gray[100]};

      box-shadow: 0 0 0 1px ${gray[400]};
      background-color: ${gray[400]};
    }
  }

  &:disabled {
    border: 0;

    box-shadow: 0 0 0 1px ${gray[400]};
    background-color: ${gray[100]};

    cursor: inherit;
  }
`;
