/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import {theme, paddings} from 'components/shared/theme';
import {ToggleContainer} from 'components/toggle/style';

const {
  colors,
  footerHeight,
  typography: {fontSizeS}
} = theme;

export const Overlay = styled.default.div`
  position: fixed;
  width: 100%;
  min-height: calc(100% - 3.5rem - ${footerHeight});
  top: 3.5rem;
  right: 0;
  background: ${colors.headerColor};
  opacity: .7;
  z-index: 9;
`;

export const MenuView = styled.default.div`
  display: block;
  position: fixed;
  left: 0;
  top: 3.5rem;
  height: calc(100% - 3.5rem - ${footerHeight});
  background-color: ${colors.black};
  width: 292px;
  padding-top: ${paddings.small};
  z-index: 11;
  box-shadow: 2px 0px 1px rgba(1,1,1, .9);
`;

export const SnapToBottom = styled.default.div`
  width: inherit;
  position: absolute;
  bottom: 0;
`;

export const FooterContainer = styled.default.div`
  width: 100%;
  position: relative;
  color: ${colors.gray300};
  font-size: ${fontSizeS};
  padding: 0 ${paddings.medium};

  a {
    text-decoration: none;
    color: ${colors.lightBlue};
    padding: 1rem 0;
    display: block;
  }

  ${ToggleContainer} {
    justify-content: flex-start;
  }
`;
