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

const {colors, primaryThemeColor} = theme;

export const MenuLayout = styled.default.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
`;

export const MenuItem = styled.default(Link)`
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 ${paddings.xlarge};
  color: ${colors.white};
  text-transform: capitalize;
  text-decoration: none;
  cursor: pointer;
  &.active {
    color: ${primaryThemeColor};
  }
  &:hover {
    background: ${colors.headerColor};
  }
  & span {
    font-size: 22px;
    margin: 0 ${paddings.medium} 0 0;
  }
`;