/**
 * 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';

const {colors, spacing, primaryBorderRadius, fontSizeS, primaryInputHeight, formFieldWidth} = theme;

/* Stylelint-disable property-no-vendor-prefix */
export const SelectContainer = styled.default.div<{width?: number | string}>`
  width: ${({width}) => (width && isNaN(+width) ? width : (width || formFieldWidth) + 'px')};

  select {
    padding: 0 ${paddings.small};
    width: 100%;
    min-width: 12.25rem;
    height: ${primaryInputHeight};
    display: flex;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    background-color: ${colors.white};
    border: none;
    cursor: pointer;
    border-radius: ${primaryBorderRadius};
    appearance: none;
  }

  label {
    display: block;
  }
`;

export const SubLabel = styled.default.p`
  color: ${colors.gray600};
  font-weight: 400;
  font-size: ${fontSizeS};
  margin-top: ${spacing.xxSmall};
`;
