<commit_before>import styled from 'styled-components'

import {StyledHtmlFormatter} from '../FormattedValue/formatters/HtmlFormatter'
import {StyledUl} from '../Typography'
import {colorizeBorder, colorizeText, declareFocus, declareFont, scale, theme} from '../utilStyles'

const borderWidth = '1.1px' // deliberately uneven to force correct rendering in chrome

export const getTextColor = ({isDisplay, immutable, signal, hasValue}) => {
  if (signal) {
    return 'signal'
  }
  if (hasValue) {
    return 'hasValue'
  }
  if (isDisplay) {
    return 'shade1'
  }
  if (immutable) {
    return 'shade0'
  }

  return 'shade1'
}

export const getBorderColor = ({immutable, isDisplay, signal, isDirty}) => {
  if (isDirty) {
    return 'isDirty'
  }
  if (isDisplay || immutable) {
    return 'transparent'
  }
  if (signal) {
    return 'signal'
  }
  return 'shade1'
}

const declareCursor = ({isDisplay, immutable}) => `cursor: ${!isDisplay && immutable ? 'not-allowed' : 'auto'};`

export const StyledLabelWrapper = styled.div`
  width: calc(100% - ${scale.space(0.5)});
`

export const StyledStatedValueLabel = styled.label`
  &&& {
    ${declareFont({
      fontWeight: ({dirty}) => (dirty ? theme.fontWeight('bold') : theme.fontWeight('regular')),
      lineHeight: 1
    })}
    background-color: ${theme.color('paper')};
    color: ${props => colorizeText[getTextColor(props)](props)};
    left: ${scale.space(-2)};
    margin: calc(${scale.font(0)} / -2) 0 0;
    padding: 1px ${scale.space(-2)}; // 1px to prevent label bottom from being cut
    padding-left: ${({immutable}) => immutable && '0'};
    position: absolute;
    width: auto;
    height: calc(${scale.font(0)} + 1px);
    overflow: hidden;
    top: 0;
    ${props => declareCursor(props)}
    pointer-events: auto;

    span {
      white-space: nowrap;
    }
  }
`

export const StyledStatedValueBox = styled.div`
  &&& {
    border: ${borderWidth} solid ${props => colorizeBorder[getBorderColor(props)](props)};
    padding: ${scale.space(-1)} ${scale.space(-1)} ${scale.space(-2)} ${scale.space(-1)};
    position: relative;
    ${props => !props.immutable && declareFocus(props)}
    ${props => declareCursor(props)}
    margin-top: ${({isDisplay}) => isDisplay && scale.space(-1)};
    padding-left: ${({immutable}) => immutable && scale.space(-2)};
    padding-top: ${({isDisplay, immutable}) => isDisplay && immutable && scale.space(-1)};

    * {
      padding-left: ${({isDisplay}) => isDisplay && '0'};
      margin-bottom: 0;
    }

    > ${StyledHtmlFormatter} {
      padding-top: ${({isDisplay}) => isDisplay && scale.space(-1)};
      position: relative;
      top: 5px;

      p:first-of-type {
        margin-top: 0;
      }
    }
  }
`

export const StyledStatedValueDescription = styled.p`
  &&& {
    ${declareFont({
      fontSize: scale.font(-1)
    })}
  }
`

export const StyledStatedValueError = styled.div``

export const StyledStatedValueWrapper = styled.div`
  &&& {
    margin-bottom: ${scale.space(-1)};
    padding-top: ${scale.space(-2)};

    ${/* sc-selector */ StyledStatedValueBox},
    ${/* sc-selector */ StyledStatedValueDescription},
    ${/* sc-selector */ StyledStatedValueError} {
      margin-bottom: ${scale.space(-2)};

      &:last-child {
        margin-bottom: 0;
      }
    }

    ${/* sc-selector */ StyledStatedValueDescription},
    ${/* sc-selector */ StyledStatedValueError} {
      margin-left: calc(${scale.space(-1)} + ${borderWidth});

      ${StyledUl} {
        margin-left: -${scale.space(-2)};
      }
    }
  }
`
export const StyledInput = styled.input`
  border: 0;
  cursor: ${({args}) => (args.immutable && !args.isDisplay ? 'not-allowed' : 'auto')};
  color: ${({args}) => (args.immutable && !args.isDisplay ? '#545454' : '#000')};
  outline: 0;
  transition: color 200ms;
  width: 100%;
`<commit_msg>refactor(tocco-ui): fix label being cut<commit_after>import styled from 'styled-components'

import {StyledHtmlFormatter} from '../FormattedValue/formatters/HtmlFormatter'
import {StyledUl} from '../Typography'
import {colorizeBorder, colorizeText, declareFocus, declareFont, scale, theme} from '../utilStyles'

const borderWidth = '1.1px' // deliberately uneven to force correct rendering in chrome

export const getTextColor = ({isDisplay, immutable, signal, hasValue}) => {
  if (signal) {
    return 'signal'
  }
  if (hasValue) {
    return 'hasValue'
  }
  if (isDisplay) {
    return 'shade1'
  }
  if (immutable) {
    return 'shade0'
  }

  return 'shade1'
}

export const getBorderColor = ({immutable, isDisplay, signal, isDirty}) => {
  if (isDirty) {
    return 'isDirty'
  }
  if (isDisplay || immutable) {
    return 'transparent'
  }
  if (signal) {
    return 'signal'
  }
  return 'shade1'
}

const declareCursor = ({isDisplay, immutable}) => `cursor: ${!isDisplay && immutable ? 'not-allowed' : 'auto'};`

export const StyledLabelWrapper = styled.div`
  width: calc(100% - ${scale.space(0.5)});
`

export const StyledStatedValueLabel = styled.label`
  &&& {
    ${declareFont({
      fontWeight: ({dirty}) => (dirty ? theme.fontWeight('bold') : theme.fontWeight('regular')),
      lineHeight: 1
    })}
    background-color: ${theme.color('paper')};
    color: ${props => colorizeText[getTextColor(props)](props)};
    left: ${scale.space(-2)};
    margin: calc(${scale.font(0)} / -2) 0 0;
    padding: 0 ${scale.space(-2)} 0 ${({immutable}) => immutable && '0'}; // if immutable remove left padding
    position: absolute;
    width: auto;
    height: calc(${scale.font(0)} + 1px);
    overflow: hidden;
    top: 0;
    ${props => declareCursor(props)}
    pointer-events: auto;

    span {
      white-space: nowrap;
    }
  }
`

export const StyledStatedValueBox = styled.div`
  &&& {
    border: ${borderWidth} solid ${props => colorizeBorder[getBorderColor(props)](props)};
    padding: ${scale.space(-1)} ${scale.space(-1)} ${scale.space(-2)} ${scale.space(-1)};
    position: relative;
    ${props => !props.immutable && declareFocus(props)}
    ${props => declareCursor(props)}
    margin-top: ${({isDisplay}) => isDisplay && scale.space(-1)};
    padding-left: ${({immutable}) => immutable && scale.space(-2)};
    padding-top: ${({isDisplay, immutable}) => isDisplay && immutable && scale.space(-1)};

    * {
      padding-left: ${({isDisplay}) => isDisplay && '0'};
      margin-bottom: 0;
    }

    > ${StyledHtmlFormatter} {
      padding-top: ${({isDisplay}) => isDisplay && scale.space(-1)};
      position: relative;
      top: 5px;

      p:first-of-type {
        margin-top: 0;
      }
    }
  }
`

export const StyledStatedValueDescription = styled.p`
  &&& {
    ${declareFont({
      fontSize: scale.font(-1)
    })}
  }
`

export const StyledStatedValueError = styled.div``

export const StyledStatedValueWrapper = styled.div`
  &&& {
    margin-bottom: ${scale.space(-1)};
    padding-top: ${scale.space(-2)};

    ${/* sc-selector */ StyledStatedValueBox},
    ${/* sc-selector */ StyledStatedValueDescription},
    ${/* sc-selector */ StyledStatedValueError} {
      margin-bottom: ${scale.space(-2)};

      &:last-child {
        margin-bottom: 0;
      }
    }

    ${/* sc-selector */ StyledStatedValueDescription},
    ${/* sc-selector */ StyledStatedValueError} {
      margin-left: calc(${scale.space(-1)} + ${borderWidth});

      ${StyledUl} {
        margin-left: -${scale.space(-2)};
      }
    }
  }
`

export const StyledInput = styled.input`
  border: 0;
  cursor: ${({args}) => (args.immutable && !args.isDisplay ? 'not-allowed' : 'auto')};
  color: ${({args}) => (args.immutable && !args.isDisplay ? '#545454' : '#000')};
  outline: 0;
  transition: color 200ms;
  width: 100%;
`
{'fraction_non_alphanumeric': 0.18332032266458495, 'fraction_numerical': 0.0156128024980484, 'mean_word_length': 3.301622831561276, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6645172', 'n_tokens_mistral': 2682, 'n_tokens_neox': 2580, 'n_words': 541}