<commit_before>import _get from 'lodash/get'
import styled from 'styled-components'

import {shadeColor, scale, theme} from '../utilStyles'

const declareDivider = ({theme, isOpen, isFramed}) => {
  const cssShared = `
    &:first-child {
      border-bottom-color: ${shadeColor(_get(theme, 'colors.paper'), 1)};
      border-bottom-style: ${isFramed ? 'solid' : 'none'};
    }

    &:last-child,
    &:nth-child(3) {
      border-top-color: ${shadeColor(_get(theme, 'colors.paper'), 1)};
      border-top-style: ${isFramed ? 'solid' : 'none'};
    }
  `

  if (isOpen) {
    return `
      ${cssShared}
      &:first-child {
        border-bottom-width: 1px;
      }

      &:last-child,
      &:nth-child(3) {
        border-top-width: 1px;
      }
    `
  } else {
    return `
      ${cssShared}
      &:first-child {
        border-bottom-width: 0;
      }

      &:last-child {
        border-top-width: 0;
      }

      &:nth-child(3) {
        border-top-width: 1px;
      }
    `
  }
}

export const StyledIconWrapper = styled.span`
  display: none;
  font-size: ${scale.font(1)};

  &:hover {
    color: ${theme.color('secondaryLight')};
  }
`

const StyledPanelHeaderFooter = styled.div`
  && {
    background-color: #f2f2f2;
    display: flex;
    padding: ${({isFramed}) => (isFramed ? '4px 8px 4px 8px' : 0)};
    align-items: center;

    &:hover {
      cursor: pointer;

      ${StyledIconWrapper} {
        display: block;
      }
    }

    > div {
      flex: 1 1 auto;
    }
    ${props => declareDivider(props)}
  }
`

export default StyledPanelHeaderFooter<commit_msg>fix(tocco-ui): fix flicker in Firefox on panel hovers<commit_after>import _get from 'lodash/get'
import styled from 'styled-components'

import {shadeColor, scale, theme} from '../utilStyles'

const declareDivider = ({theme, isOpen, isFramed}) => {
  const cssShared = `
    &:first-child {
      border-bottom-color: ${shadeColor(_get(theme, 'colors.paper'), 1)};
      border-bottom-style: ${isFramed ? 'solid' : 'none'};
    }

    &:last-child,
    &:nth-child(3) {
      border-top-color: ${shadeColor(_get(theme, 'colors.paper'), 1)};
      border-top-style: ${isFramed ? 'solid' : 'none'};
    }
  `

  if (isOpen) {
    return `
      ${cssShared}
      &:first-child {
        border-bottom-width: 1px;
      }

      &:last-child,
      &:nth-child(3) {
        border-top-width: 1px;
      }
    `
  } else {
    return `
      ${cssShared}
      &:first-child {
        border-bottom-width: 0;
      }

      &:last-child {
        border-top-width: 0;
      }

      &:nth-child(3) {
        border-top-width: 1px;
      }
    `
  }
}

export const StyledIconWrapper = styled.span`
  opacity: 0;
  font-size: ${scale.font(1)};

  &:hover {
    color: ${theme.color('secondaryLight')};
  }
`

const StyledPanelHeaderFooter = styled.div`
  && {
    background-color: #f2f2f2;
    display: flex;
    padding: ${({isFramed}) => (isFramed ? '4px 8px 4px 8px' : 0)};
    align-items: center;

    &:hover {
      cursor: pointer;

      ${StyledIconWrapper} {
        opacity: 1;
      }
    }

    > div {
      flex: 1 1 auto;
    }
    ${props => declareDivider(props)}
  }
`

export default StyledPanelHeaderFooter
{'fraction_non_alphanumeric': 0.16474976686353746, 'fraction_numerical': 0.013677339135840846, 'mean_word_length': 2.2803261977573905, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, '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': '7146425', 'n_tokens_mistral': 1226, 'n_tokens_neox': 1171, 'n_words': 220}