import r, { css as a } from "styled-components";
import { getBorderColor as d, getCheckRadioIconColor as s } from "./utils.js";
import { getSpacing as i, convertToTransientProps as c, getFontSize as n, getColorAlias as e, getDarkenColor as t } from "../../utils/index.js";
const $ = r.div.withConfig({
  shouldForwardProp: c(["noMargin"])
})`
  position: relative;
  width: ${(o) => o.width ? o.width : "100%"};
  font-family: ${(o) => o.theme.font.familyPrimary};
  margin: ${(o) => o.noMargin ? i("s00") : i("s02", "s00")};
`, f = r.div.withConfig({
  shouldForwardProp: c(["hasLabel"])
})`
  display: flex;
  justify-content: ${(o) => o.hasLabel ? "space-between" : "flex-end"};
  align-items: center;
  ${n("size14")};
  color: ${(o) => o.disabled ? e("contentDisabled") : e("contentSubdued")};
`, m = r.label.withConfig({
  shouldForwardProp: c([
    "hasLabel",
    "hasError",
    "hasFocus"
  ])
})`
  font-weight: ${(o) => o.theme.font.weightBold};
  ${n("size14")};
  margin-bottom: ${i("s01")};
  padding-right: ${i("s02")};
  color: ${(o) => o.disabled ? e("contentDisabled") : e("contentDefault")};
`, x = r.span``, v = r.div.withConfig({
  shouldForwardProp: c([
    "hasError",
    "hasPrefix",
    "hasSuffix"
  ])
})`
  border: 1px solid ${e("borderDefault")};
  border-color: ${(o) => d(o.disabled, o.hasError)};
  background: ${(o) => o.disabled ? e("disabled01") : e("containerDefault")};
  border-radius: ${(o) => o.theme.radius.roundedC};
  display: flex;
  align-items: center;
  padding-left: ${(o) => o.hasPrefix ? "16px" : "0"};
  padding-right: ${(o) => o.hasSuffix ? "16px" : "0"};

  &:hover {
    background: ${(o) => o.disabled ? e("disabled01") : t("hover02", "containerDefault")};
    cursor: ${(o) => o.disabled ? "not-allowed" : "auto"};
  }

  &:focus,
  &:focus-within,
  &:focus-visible {
    background: ${e("containerDefault")};
    ${(o) => !o.hasError && a`
        box-shadow: 0 0 0 2px ${e("focusOuter")};
      `};
  }
`, w = r.div.withConfig({
  shouldForwardProp: c(["noMargin"])
})`
  ${n("size14")};
  color: ${e("contentSubdued")};
  margin-top: ${(o) => i(o.noMargin ? "s00" : "s01")};

  svg {
    margin-right: ${i("s02")};
  }
`, k = r.span`
  margin: 0;
`, C = r.div`
  display: flex;
  align-items: center;
  color: ${e("contentError")};
  margin: ${i("s01", "s00", "s03")};
  ${n("size14")};
  font-weight: ${(o) => o.theme.font.weightRegular};
  svg {
    fill: ${e("contentError")};
    height: 20px;
    margin-right: 8px;
  }
`, h = r.div`
  display: flex;
  flex-flow: row;
  align-items: flex-start;

  input,
  label {
    cursor: pointer;
  }
`, y = r.input.withConfig({
  shouldForwardProp: c(["hasError"])
})`
  --outline-color: transparent;
  --check-radio-bg-color: transparent;
  --border-color: ${({ hasError: o }) => o ? e("supportError") : e("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: ${i("s04")};

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

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

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

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

  &:hover {
    --check-radio-bg-color: ${t("hover01", "containerSubtle")};
  }

  &:checked,
  &[type='checkbox']:indeterminate {
    ${({ hasError: o }) => o ? a`
            --check-radio-bg-color: ${e("supportError")};
            --border-color: ${e("supportError")};
          ` : a`
            --check-radio-bg-color: ${e("interactiveBrand")};
            --border-color: ${e("interactiveBrand")};
          `}
  }

  &:checked:hover {
    ${({ hasError: o }) => o ? a`
            --check-radio-bg-color: ${t(
  "hover01",
  "supportError"
)};
          ` : a`
            --check-radio-bg-color: ${t(
  "hover01",
  "interactiveBrand"
)};
          `}
  }

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

  &:active {
    --check-radio-bg-color: ${t("active01", "containerSubtle")};
    --border-color: ${t("active01", "containerSubtle")};
  }

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

  &:focus,
  &:focus-visible,
  &:focus-within {
    --outline-color: ${e("focusOuter")};
  }
`, E = r.div`
  display: flex;
  flex-flow: column;
`, B = r.label`
  ${n("size16")};
  margin-left: ${i("s02")};
  color: ${e("contentDefault")};
`, g = r.span`
  ${n("size14")};
  color: ${e("contentDefault")};
  display: flex;
  align-items: center;
  margin-top: ${i("s02")};
`, D = r(g)`
  color: ${e("contentError")};

  svg {
    width: 17px;
    height: 17px;
    margin-right: ${i("s02")};
    fill: ${e("contentError")};
  }
`, P = r.div`
  display: flex;
  flex-flow: ${({ orientation: o }) => o};

  & ${h} {
    &:not(:last-child) {
      ${({ orientation: o }) => o === "row" ? a`
              margin-right: ${i("s05")};
            ` : a`
              margin-bottom: ${i("s03")};
            `}
    }
  }
`, R = r.label`
  ${n("size14")};
  color: ${e("contentDefault")};
  font-weight: 700;
  margin-bottom: ${i("s03")};
`;
export {
  k as AssistMessage,
  v as Border,
  D as CheckRadioErrorArea,
  R as CheckRadioGroupLabel,
  P as CheckRadioGroupWrapper,
  g as CheckRadioHintArea,
  y as CheckRadioInput,
  E as CheckRadioInputGroupWrapper,
  B as CheckRadioLabel,
  h as CheckRadioWrapper,
  C as ErrorMessage,
  m as Label,
  f as LabelWrapper,
  w as SupportingText,
  x as Text,
  $ as Wrapper
};
