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

export const FormContainer = styled.div<{ isError?: boolean }>`
  display: flex;
  flex-direction: column;
  gap: 8px;

  .checkbox_container {
    max-width: 400px;

    display: flex;
    flex-wrap: wrap;
    gap: 16px;
  }

  & > label {
    display: flex;
    gap: 8px;

    ${fonts["body-b"]}

    & > p {
      color: ${blue[500]};
    }
  }

  & > span {
    color: ${({ isError }) => (isError ? red[500] : gray[400])};

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

export const FormMultipleInputContainer = styled.div`
  width: 400px;
  max-width: 400px;

  display: flex;
  align-items: center;
  text-align: center;
  gap: 8px;

  ${fonts["body-r"]}

  & > p {
    color: ${gray[300]};
  }

  & > div {
    & > input {
      text-align: center;

      &::placeholder {
        color: ${gray[300]};
      }
    }

    & > div {
      width: 100%;

      & > input {
        text-align: center;

        &::placeholder {
          color: ${gray[300]};
        }
      }
    }
  }
`;
