import styled from "styled-components";
import Pattern from "../../assets/images/sign_up.png";
import LayoutBackgroundImage from "../../assets/images/layout_background.png";

/* styles for main layout component */
export const Layout = styled.div`
  background-color: #ffffff;
  height: 100vh;
  width: 100%;
`;

export const MainLayout = styled.div`
  background-color: #ffffff;
  width: 100%;
  height: 100vh;
`;

export const LeftLayout = styled.div`
  background-color: transparent;
  position: fixed;
  width: 280px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  z-index: 10;
`;

export const CenterLayout = styled.div`
  width: 100%;
  /* margin-left: 280px; */
  overflow-x: hidden;
  position: relative;
  height: 100vh;
`;

export const InnerCenterLayout = styled.div`
  /* width: 100%; */
  padding-top: 80px;
  margin-left: 280px;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-width: thin;
  /* "auto" or "thin" depending on browser support */
  scrollbar-color: transparent transparent;
  /* color values for thumb and track */
  height: 100vh;

  &::-webkit-scrollbar {
    width: 6px;
    /* adjust as needed */
    background-color: transparent;
    /* color value for track */
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    /* color value for thumb */
  }
`;
