<commit_before>import styled from '../styled'
import baseStyles from '../../styles/resets/baseStyles.css'
import { getColor } from '../../styles/utilities/color'

export const config = {
  size: {
    default: '28px',
    md: '28px',
    sm: '20px',
  },
  boxShadowColor: '193, 203, 212', // grey.600
  outlineColor: getColor('green.500'),
  transition: 'all 200ms ease-in-out',
}

export const RateActionUI = styled('button')`
  -webkit-user-drag: none;
  ${baseStyles};
  appearance: none;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 3px 6px 0 rgba(${config.boxShadowColor}, 0.5);
  height: ${config.size.default};
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  transition: ${config.transition};
  user-select: none;
  width: ${config.size.default};
  will-change: box-shadow, transform;
  z-index: 0;

  &:after {
    content: '';
    border-radius: 50%;
    border: 2px solid ${config.outlineColor};
    display: none;
    height: 28px;
    left: -4px;
    pointer-events: none;
    position: absolute;
    top: -4px;
    width: 28px;
    will-change: transform;

    @keyframes HSDSRateActionSelected {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(1);
      }
    }
  }

  &.is-active {
    &:after {
      animation: HSDSRateActionSelected 200ms
        cubic-bezier(0.39, 0.575, 0.565, 1) both;
      display: block;
    }
  }

  &[disabled] {
    pointer-events: none;
  }

  &:hover,
  &:focus {
    outline: none;
    box-shadow: 0 4px 7px 0 rgba(${config.boxShadowColor}, 0.6);
    transform: scale(1.3);
    z-index: 1;
  }

  &.is-md {
    width: ${config.size.md};
    height: ${config.size.md};
  }
  &.is-sm {
    width: ${config.size.sm};
    height: ${config.size.sm};
  }
`<commit_msg>RateAction: Fix active circle sizing (#485)<commit_after>import styled from '../styled'
import baseStyles from '../../styles/resets/baseStyles.css'
import { getColor } from '../../styles/utilities/color'

export const config = {
  size: {
    default: '28px',
    md: '28px',
    sm: '20px',
  },
  boxShadowColor: '193, 203, 212', // grey.600
  outlineColor: getColor('green.500'),
  transition: 'all 200ms ease-in-out',
}

export const RateActionUI = styled('button')`
  -webkit-user-drag: none;
  ${baseStyles};
  appearance: none;
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 0 3px 6px 0 rgba(${config.boxShadowColor}, 0.5);
  height: ${config.size.default};
  margin: 0;
  outline: none;
  padding: 0;
  position: relative;
  transition: ${config.transition};
  user-select: none;
  width: ${config.size.default};
  will-change: box-shadow, transform;
  z-index: 0;

  &:after {
    ${baseStyles};
    content: '';
    border-radius: 50%;
    border: 2px solid ${config.outlineColor};
    display: none;
    height: calc(${config.size.default} + 4px);
    left: -4px;
    pointer-events: none;
    position: absolute;
    top: -4px;
    width: calc(${config.size.default} + 4px);
    will-change: transform;

    @keyframes HSDSRateActionSelected {
      0% {
        transform: scale(0.5);
      }
      100% {
        transform: scale(1);
      }
    }
  }

  &.is-active {
    &:after {
      animation: HSDSRateActionSelected 200ms
        cubic-bezier(0.39, 0.575, 0.565, 1) both;
      display: block;
    }
  }

  &[disabled] {
    pointer-events: none;
  }

  &:hover,
  &:focus {
    outline: none;
    box-shadow: 0 4px 7px 0 rgba(${config.boxShadowColor}, 0.6);
    transform: scale(1.3);
    z-index: 1;
  }

  &.is-md {
    width: ${config.size.md};
    height: ${config.size.md};
  }
  &.is-sm {
    width: ${config.size.sm};
    height: ${config.size.sm};

    &:after {
      height: calc(${config.size.sm} + 4px);
      width: calc(${config.size.sm} + 4px);
    }
  }
`
{'fraction_non_alphanumeric': 0.16951829428797052, 'fraction_numerical': 0.040800210581732034, 'mean_word_length': 2.6363636363636362, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '5618588', 'n_tokens_mistral': 1508, 'n_tokens_neox': 1391, 'n_words': 311}