import styled from 'styled-components/macro';

import { Icon } from '../../components/Icon/Icon';
import { color } from '../../theme';

export const StyledVerticalFormItem = styled.div`
  display: flex;
  flex-direction: column;
`;

export const StyledHorizontalFieldContainer = styled.div`
  display: flex;
`;

export const StyledHorizontalFormItem = styled.div`
  display: grid;
  grid-column-gap: 6px;
  grid-template-areas: 'control label' 'empty message';
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
`;

export const StyledHorizontalFieldControl = styled.div`
  align-items: center;
  display: flex;
  grid-area: control;
`;

export const StyledHorizontalFieldLabelContainer = styled.div`
  align-items: center;
  align-self: center;
  display: flex;
  gap: 2px;
  grid-area: label;
`;

export const StyledHorizontalFieldLabel = styled.label`
  color: ${color('sys/color/text/primary')};
  font-size: 16px;
  line-height: 28px;
`;

export const StyledHorizontalFieldMessage = styled.div`
  grid-area: message;
`;

export const StyledVerticalFieldLabelContainer = styled.div`
  align-items: center;
  align-self: start;
  display: flex;
  gap: 2px;
  width: 100%;
`;

export const StyledVerticalFieldLabel = styled.label`
  color: ${color('sys/color/text/primary')};
  font-size: 12px;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

export const TunedRequiredMark = styled(Icon)`
  color: ${color('sys/color/danger')};
  max-width: 16px;
  min-width: 16px;
`;