import styled from "styled-components";

export const Container = styled.div`
  display: flex;
  flex-direction: ${(props) => props.direction};
  gap: 10px;
`;

export const RadioWrapper = styled.label`
  display: flex;
  align-items: center;
  cursor: pointer;
  &:not(:last-child) {
    margin-right: 16px;
  }
`;

export const RadioInput = styled.input.attrs({ type: "radio" })`
  position: absolute;
  opacity: 0;
  cursor: pointer;
`;

export const RadioControl = styled.span`
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(159, 159, 159, 0.365);
  transition: all 0.2s ease-in-out;

  ${RadioInput}:checked + & {
    border-color: ${(props) => props.color || "rgba(159, 159, 159, 0.365)"};
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 70%;
      height: 70%;
      border-radius: 50%;
      background-color: ${(props) =>
        props.color || "rgba(159, 159, 159, 0.365)"};
      transform: translate(-50%, -50%);
    }
  }
`;

export const RadioLabel = styled.span`
  margin-left: 8px;
  font-size: ${(props) =>
    props.labelSize ? props.labelSize : "16px"};
  font-weight: 700;
  color: ${(props) =>
    props.checked ? props.color : "rgba(159, 159, 159, 0.365)"};
`;