/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';

const {colors} = Theme;

export const CodeContainer = styled.default.div<{color?: string}>`
  background-color: ${colors.gray200};
  padding: 1rem;
  margin: 1rem 0 0;
  display: flex;
  color: ${({color}) => color || colors.black};
  position: relative;
  width: 100%;

  &>span {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }

  pre {
    width: 100%;
    white-space: pre-wrap;
    max-height: 40vh;
    overflow: auto;
  }

  code {
    word-wrap: break-word;
  }
`;