<commit_before>import styled, { css } from 'styled-components';

import { opacity } from '../../../../defaults/opacity';
import { Align } from '../../../../enums';
import {
  center, shadows, robotoRegular, robotoMedium,
} from '../../../mixins';

export const Root = styled.div`
  width: 340px;
  position: absolute;
  background-color: #fafafa;
  border-radius: 4px;
  box-shadow: ${shadows(5)};

  ${center(Align.CenterBoth)};

  ${({ visible }: { visible: boolean }) => css`
    opacity: ${visible ? 1 : 0};
  `};
`;

export const Title = styled.div`
  font-size: 20px;
  color: rgba(0, 0, 0, ${opacity.light.primaryText});
  margin-top: 24px;
  padding-left: 24px;
  padding-right: 32px;

  ${robotoMedium()};
`;
<commit_msg>Improve toggling animation of dialog in keys-manager<commit_after>import styled, { css } from 'styled-components';

import { opacity } from '../../../../defaults/opacity';
import { Align } from '../../../../enums';
import {
  center, shadows, robotoRegular, robotoMedium,
} from '../../../mixins';

export const Root = styled.div`
  width: 340px;
  position: absolute;
  background-color: #fafafa;
  border-radius: 4px;
  will-change: opacity, margin-top;
  transition: 0.2s opacity, 0.2s margin-top;
  box-shadow: ${shadows(5)};

  ${center(Align.CenterBoth)};

  ${({ visible }: { visible: boolean }) => css`
    pointer-events: ${visible ? 'all' : 'none'};
    opacity: ${visible ? 1 : 0};
    margin-top: ${visible ? 0 : -24}px;
  `};
`;

export const Title = styled.div`
  font-size: 20px;
  color: rgba(0, 0, 0, ${opacity.light.primaryText});
  margin-top: 24px;
  padding-left: 24px;
  padding-right: 32px;

  ${robotoMedium()};
`;

{'fraction_non_alphanumeric': 0.2019173157579389, 'fraction_numerical': 0.025763930497303775, 'mean_word_length': 3.3489583333333335, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, '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': '6606895', 'n_tokens_mistral': 629, 'n_tokens_neox': 578, 'n_words': 144}