'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var styled = require('styled-components');
var utils = require('./utils.js');
var index = require('../../utils/index.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

const Wrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['noMargin']),
}) `
  position: relative;
  width: ${(props) => (props.width ? props.width : '100%')};
  font-family: ${(props) => props.theme.font.familyPrimary};
  margin: ${(props) => props.noMargin ? index.getSpacing('s00') : index.getSpacing('s02', 's00')};
`;
const LabelWrapper = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['hasLabel']),
}) `
  display: flex;
  justify-content: ${(props) => props.hasLabel ? 'space-between' : 'flex-end'};
  align-items: center;
  ${index.getFontSize('size14')};
  color: ${(props) => props.disabled
    ? index.getColorAlias('contentDisabled')
    : index.getColorAlias('contentSubdued')};
`;
const Label = styled__default['default'].label.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'hasLabel',
        'hasError',
        'hasFocus',
    ]),
}) `
  font-weight: ${(props) => props.theme.font.weightBold};
  ${index.getFontSize('size14')};
  margin-bottom: ${index.getSpacing('s01')};
  padding-right: ${index.getSpacing('s02')};
  color: ${(props) => props.disabled
    ? index.getColorAlias('contentDisabled')
    : index.getColorAlias('contentDefault')};
`;
const Text = styled__default['default'].span ``;
const Border = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps([
        'hasError',
        'hasPrefix',
        'hasSuffix',
    ]),
}) `
  border: 1px solid ${index.getColorAlias('borderDefault')};
  border-color: ${(props) => utils.getBorderColor(props.disabled, props.hasError)};
  background: ${(props) => props.disabled
    ? index.getColorAlias('disabled01')
    : index.getColorAlias('containerDefault')};
  border-radius: ${(props) => props.theme.radius.roundedC};
  display: flex;
  align-items: center;
  padding-left: ${(props) => (props.hasPrefix ? '16px' : '0')};
  padding-right: ${(props) => (props.hasSuffix ? '16px' : '0')};

  &:hover {
    background: ${(props) => props.disabled
    ? index.getColorAlias('disabled01')
    : index.getDarkenColor('hover02', 'containerDefault')};
    cursor: ${(props) => (props.disabled ? 'not-allowed' : 'auto')};
  }

  &:focus,
  &:focus-within,
  &:focus-visible {
    background: ${index.getColorAlias('containerDefault')};
    ${(props) => !props.hasError &&
    styled.css `
        box-shadow: 0 0 0 2px ${index.getColorAlias('focusOuter')};
      `};
  }
`;
const SupportingText = styled__default['default'].div.withConfig({
    shouldForwardProp: index.convertToTransientProps(['noMargin']),
}) `
  ${index.getFontSize('size14')};
  color: ${index.getColorAlias('contentSubdued')};
  margin-top: ${(props) => index.getSpacing(props.noMargin ? 's00' : 's01')};

  svg {
    margin-right: ${index.getSpacing('s02')};
  }
`;
const AssistMessage = styled__default['default'].span `
  margin: 0;
`;
const ErrorMessage = styled__default['default'].div `
  display: flex;
  align-items: center;
  color: ${index.getColorAlias('contentError')};
  margin: ${index.getSpacing('s01', 's00', 's03')};
  ${index.getFontSize('size14')};
  font-weight: ${(props) => props.theme.font.weightRegular};
  svg {
    fill: ${index.getColorAlias('contentError')};
    height: 20px;
    margin-right: 8px;
  }
`;
const CheckRadioWrapper = styled__default['default'].div `
  display: flex;
  flex-flow: row;
  align-items: flex-start;

  input,
  label {
    cursor: pointer;
  }
`;
const CheckRadioInput = styled__default['default'].input.withConfig({
    shouldForwardProp: index.convertToTransientProps(['hasError']),
}) `
  --outline-color: transparent;
  --check-radio-bg-color: transparent;
  --border-color: ${({ hasError }) => hasError
    ? index.getColorAlias('supportError')
    : index.getColorAlias('interactiveForm')};

  &[type='radio'],
  &[type='checkbox'] {
    transition: all 0.2s linear;
    margin: 0;
    appearance: none;
    background-color: var(--check-radio-bg-color);
    border: 1px solid var(--border-color);
    outline: 2px solid var(--outline-color);
    outline-offset: 1px;
    background-repeat: no-repeat;
  }

  &[type='radio'] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    max-height: 22px;
    border-radius: 50%;
    background-position: center;
    background-size: ${index.getSpacing('s04')};

    &:checked {
      background-image: ${({ disabled }) => {
    const iconColor = utils.getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23${iconColor}'/%3e%3c/svg%3e")`;
}};
    }
  }

  &[type='checkbox'] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-height: 20px;
    border-radius: 2px;

    &:checked {
      background-image: ${({ disabled }) => {
    const iconColor = utils.getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23${iconColor}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")`;
}};
    }

    &:indeterminate {
      background-image: ${({ disabled }) => {
    const iconColor = utils.getCheckRadioIconColor(disabled);
    return `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23${iconColor}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")`;
}};
    }
  }

  &:hover {
    --check-radio-bg-color: ${index.getDarkenColor('hover01', 'containerSubtle')};
  }

  &:checked,
  &[type='checkbox']:indeterminate {
    ${({ hasError }) => hasError
    ? styled.css `
            --check-radio-bg-color: ${index.getColorAlias('supportError')};
            --border-color: ${index.getColorAlias('supportError')};
          `
    : styled.css `
            --check-radio-bg-color: ${index.getColorAlias('interactiveBrand')};
            --border-color: ${index.getColorAlias('interactiveBrand')};
          `}
  }

  &:checked:hover {
    ${({ hasError }) => hasError
    ? styled.css `
            --check-radio-bg-color: ${index.getDarkenColor('hover01', 'supportError')};
          `
    : styled.css `
            --check-radio-bg-color: ${index.getDarkenColor('hover01', 'interactiveBrand')};
          `}
  }

  &:disabled,
  &:checked:hover:disabled,
  &[type='checkbox']:indeterminate:disabled {
    --check-radio-bg-color: ${index.getColorAlias('disabled01')};
    --border-color: ${index.getColorAlias('disabled01')};
  }

  &:active {
    --check-radio-bg-color: ${index.getDarkenColor('active01', 'containerSubtle')};
    --border-color: ${index.getDarkenColor('active01', 'containerSubtle')};
  }

  &:checked:active,
  &[type='checkbox']:checked:indeterminate:active {
    --check-radio-bg-color: ${index.getDarkenColor('active01', 'interactiveBrand')};
    --border-color: ${index.getDarkenColor('active01', 'interactiveBrand')};
  }

  &:focus,
  &:focus-visible,
  &:focus-within {
    --outline-color: ${index.getColorAlias('focusOuter')};
  }
`;
const CheckRadioInputGroupWrapper = styled__default['default'].div `
  display: flex;
  flex-flow: column;
`;
const CheckRadioLabel = styled__default['default'].label `
  ${index.getFontSize('size16')};
  margin-left: ${index.getSpacing('s02')};
  color: ${index.getColorAlias('contentDefault')};
`;
const CheckRadioHintArea = styled__default['default'].span `
  ${index.getFontSize('size14')};
  color: ${index.getColorAlias('contentDefault')};
  display: flex;
  align-items: center;
  margin-top: ${index.getSpacing('s02')};
`;
const CheckRadioErrorArea = styled__default['default'](CheckRadioHintArea) `
  color: ${index.getColorAlias('contentError')};

  svg {
    width: 17px;
    height: 17px;
    margin-right: ${index.getSpacing('s02')};
    fill: ${index.getColorAlias('contentError')};
  }
`;
const CheckRadioGroupWrapper = styled__default['default'].div `
  display: flex;
  flex-flow: ${({ orientation }) => orientation};

  & ${CheckRadioWrapper} {
    &:not(:last-child) {
      ${({ orientation }) => orientation === 'row'
    ? styled.css `
              margin-right: ${index.getSpacing('s05')};
            `
    : styled.css `
              margin-bottom: ${index.getSpacing('s03')};
            `}
    }
  }
`;
const CheckRadioGroupLabel = styled__default['default'].label `
  ${index.getFontSize('size14')};
  color: ${index.getColorAlias('contentDefault')};
  font-weight: 700;
  margin-bottom: ${index.getSpacing('s03')};
`;

exports.AssistMessage = AssistMessage;
exports.Border = Border;
exports.CheckRadioErrorArea = CheckRadioErrorArea;
exports.CheckRadioGroupLabel = CheckRadioGroupLabel;
exports.CheckRadioGroupWrapper = CheckRadioGroupWrapper;
exports.CheckRadioHintArea = CheckRadioHintArea;
exports.CheckRadioInput = CheckRadioInput;
exports.CheckRadioInputGroupWrapper = CheckRadioInputGroupWrapper;
exports.CheckRadioLabel = CheckRadioLabel;
exports.CheckRadioWrapper = CheckRadioWrapper;
exports.ErrorMessage = ErrorMessage;
exports.Label = Label;
exports.LabelWrapper = LabelWrapper;
exports.SupportingText = SupportingText;
exports.Text = Text;
exports.Wrapper = Wrapper;
