import styled, { css } from "styled-components";
const ICON_SIZE = 20;
const labelTransition = css`
  ${({
  theme: {
    yoga: {
      transition,
      components: { input }
    }
  }
}) => `
    transform: translateY(-${input.height / 2 - 2}px);
    transition-property: transform, font-size, color;
    transition-duration: ${transition.duration[1]}ms;
    transition-timing-function: cubic-bezier(${transition.timing[0].join()});

    font-size: ${input.label.font.size.typed}px;
    line-height: ${input.label.font.lineHeight.typed}px;
  `}
`;
const Field = styled.input`
  width: 100%;

  appearance: none;
  background-color: transparent;
  outline: none;

  position: absolute;
  bottom: 0;
  left: 0;

  border: none;
  box-sizing: border-box;

  ${({
  label,
  placeholder,
  cleanable,
  error,
  value,
  theme: {
    yoga: {
      transition,
      colors,
      baseFont,
      components: { input }
    }
  }
}) => css`
    height: ${input.height}px;
    padding-top: ${input.padding.top}px;
    padding-right: ${cleanable ? ICON_SIZE + input.padding.right * 2 : input.padding.right}px;
    padding-bottom: ${input.padding.bottom}px;
    padding-left: ${input.padding.left}px;

    color: ${input.font.color.focus};
    font-family: ${baseFont.family}, sans-serif;
    font-size: ${input.font.size}px;
    font-weight: ${input.font.weight};
    line-height: ${input.font.lineHeight}px;

    &:focus {
      color: ${input.font.color.focus};

      & ~ legend {
        max-width: max-content;
        transition-property: max-width;
        transition-duration: ${transition.duration[1]}ms;
      }

      & ~ label {
        ${labelTransition}

        color: ${error ? `${colors.feedback.attention[1]}` : `${colors.text.primary}`};
      }

      &::placeholder {
        color: ${input.label.color.default};
      }
    }

    &:disabled {
      cursor: not-allowed;
      color: ${colors.text.disabled};
      -webkit-text-fill-color: ${colors.text.disabled};
      opacity: 1;
    }

    ${placeholder && label ? css`
          &::placeholder {
            color: transparent;
          }
        ` : css`
          &::placeholder {
            color: ${input.label.color.default};
          }
        `}

    ${value && css`
      & ~ legend {
        max-width: max-content;
      }

      & ~ label {
        color: ${error ? `${colors.feedback.attention[1]}` : ""};
        ${labelTransition}
      }
    `}
  `}

  &[type="number"]::-webkit-outer-spin-button,
  &[type="number"]::-webkit-inner-spin-button {
    display: none;
  }

  &:invalid {
    box-shadow: none;
  }
`;
var Field_default = Field;
export {
  Field_default as default
};
