import o from "styled-components";
import { getColorAlias as t, getFontSize as r, getDefaultTransition as a } from "../../../utils/index.js";
import { getTextAreaPadding as i } from "../utils.js";
const s = o.textarea`
  color: ${(e) => e.disabled ? t("contentDisabled") : t("contentDefault")};
  font-family: ${(e) => e.theme.font.familyPrimary};
  background: ${(e) => e.disabled ? t("disabled01") : "transparent"};
  ${r("size16")};
  border-radius: ${(e) => e.theme.radius.roundedC};
  ${(e) => i(e.variant)};
  width: 100%;
  margin: 2px;
  border: none;
  outline: none;
  resize: vertical;
  height: ${(e) => e.height};
  ${a()};

  &::placeholder {
    color: ${(e) => e.disabled ? t("contentDisabled") : t("contentSubdued")};
    font-weight: ${(e) => e.theme.font.weightRegular};
  }

  &:hover {
    cursor: ${(e) => e.disabled ? "not-allowed" : "auto"};
  }

  &:focus:hover {
    background: ${(e) => e.disabled ? t("disabled01") : t("containerDefault")};
  }
`;
export {
  s as TextAreaInput
};
