/**
 * Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
 */
import * as styled from 'styled-components';
import Theme from 'theme';
import caretUp from 'assets/images/caret-up.svg';

const {colors, spacing} = Theme;

export const IconMenuWrapper = styled.default.div<{margin?: number | string}>`
  margin: ${({margin}) => (margin !== undefined ? margin : '.5rem 0 .5rem 1rem')};
  div {
    outline: none;
  }
  & img{
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
`;
export const IconMenuDropDownWrapper = styled.default.div<{showTail?: boolean; visible?: boolean}>`
  position: fixed;
  width: 200px;
  min-height: 31px;
  right: 2.5rem;
  ${({showTail}) =>
    showTail &&
    styled.css`
      background-image: url(${caretUp});
    `};
  background-position: top 0 right .5rem;
  background-repeat: no-repeat;
  z-index: 9999;
  visibility: hidden;
  ${({visible}) =>
    visible &&
    styled.css`
      visibility: visible;
    `}
`;
export const IconMenuContent = styled.default.div`
  background-color: ${colors.gray100};
  border: 1px solid ${colors.gray200};
  width: 200px;
  overflow: auto;
  border-radius: ${spacing.xxSmall};
  padding: ${spacing.small} 0;
  z-index: 10;
`;

export const IconMenuDropDownItem = styled.default.div`
  padding: ${spacing.small};
  text-decoration: none;
  display: flex;
  align-items: center;
  font-size: 16px;
  cursor: pointer;
  color: ${colors.black};
  background-color: ${colors.white};
  &:hover {
    background-color: ${colors.gray400};
  }
`;
export const DropdownIcon = styled.default.div<{disabled?: boolean}>`
  display: flex;
  justify-content: center;
  cursor: pointer;
  min-width: 1rem;

  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
`;
export const IconMenuPointer = styled.default.div`
  position: absolute;
  background-color: ${colors.gray100};
  transform: rotate(45deg);
`;
