DefectingCat/styled.ts

const VideoWrapper = styled.div`
  position: fixed;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(102 102 102 / 78%),
    0 4px 6px -4px rgb(107 107 107 / 10%);
  top: 30px;
  left: 30px;
  background-color: #fff;
  width: 640px;
  height: 480px;
`;
type VideoProps = {
  readonly isPublishing: boolean;
};
const PlayVideo = styled.video<VideoProps>`
  width: 640px;
  height: 480px;
  border-radius: 8px;
  overflow: hidden;
  display: ${(props) => (props.isPublishing ? 'block' : 'none')};
`;
const PushVideo = styled.video<VideoProps>`
  width: 240px;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: ${(props) => (props.isPublishing ? 'block' : 'none')};
`;
const VideoTools = styled.div`
  position: absolute;
  bottom: 0;
  background-color: rgb(209 213 219 / 0.5);
  height: 100px;
  transition: all 0.3s ease;
  display: none;
  width: 100%;
  ${VideoWrapper}:hover & {
    display: flex;
  }
`;