/**
 * 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 {IInput} from '../input';

const {colors, primaryBorderRadius, spacing, formFieldWidth, formFieldMaxWidth} = theme;

export const ComponentWrapper = styled.default.div<IInput>`
  position: relative;
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formFieldWidth) + 'px')};
  max-width: ${formFieldMaxWidth}px;
  display: flex;
  flex-direction: column;
`;
export const AdvancedSelectContainer = styled.default.div`
  color: ${colors.white};
  width: ${theme.formFieldWidth}px;
  height: ${theme.formFieldMaxHeight}px;
  background-color: ${colors.gray500};
  border-radius: ${primaryBorderRadius};
  padding: ${paddings.small};
  margin-top: 0;
`;

export const SelectInput = styled.default.input`
  background-color: ${colors.transparent};
  border: none;
  line-height: 24px;
  width: 100%;
  color: ${colors.black};
  padding: 0 ${paddings.xsmall};
`;

export const InputContainer = styled.default.div`
  display: flex;
  flex-wrap: wrap;
  border: none;
  border-radius: ${primaryBorderRadius};
  background-color: ${colors.white};
  padding: ${paddings.xsmall};
  min-height: 40px;
  overflow-y: auto;

  input {
    flex: 1;
  }
`;

export const TagOptions = styled.default.div<{height: number}>`
  height: 200px;
  flex: 1;
  overflow-y: auto;
  margin-top: ${spacing.xSmall};
  padding: ${paddings.xsmall};
  ${({height}) =>
    height &&
    styled.css`
      height: ${height}px;
    `}
`;
