import styled, { createGlobalStyle } from "styled-components";

const GlobalScrollStyle = createGlobalStyle`
  body.preview {
    overflow-x: hidden;
  }

  body.preview::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 4px;
  }

  body.preview::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: ${(p: any) => p.theme.colors.iconNonActive};
  }
`;

const Wrapper = styled.div`
  scroll-behavior: smooth;
  height: 100%;
  position: relative;

  .headroom {
    position: relative !important;
  }

  body.preview:not(&) {
    min-width: 0 !important;
  }

	.gdd-keyword {
		background-color: #FFEF9A !important;
		color: #1C1547 !important;
		padding: ${(p) => `0 ${p.theme.spacing.xxs}`};
	}
`;

const Velo = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  right: 0;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1000;
`;

export { Wrapper, Velo, GlobalScrollStyle };
