import styled, { css } from "styled-components";
const Z_INDEX = 3102;
export const Select = styled.button `
  ${({ theme }) => css `
    display: flex;
    align-items: center;
    flex: 1;
    box-sizing: border-box;
    height: inherit;
    border: 0;
    background: transparent;
    padding: ${theme?.new?.select?.padding};
    color: ${theme?.new?.select?.color};
    font-size: ${theme?.new?.select?.typography.fontSize};
    line-height: ${theme?.new?.select?.typography.fontSize};
    font-weight: ${theme?.new?.select?.typography.fontWeight};
    font-family: ${theme?.new?.select?.fontFamily};
  `}
`;
export const Placeholder = styled.span `
  display: flex;
  width: 100%;
  color: ${({ theme }) => theme?.new?.select?.placeholderColor};
`;
export const Container = styled.fieldset `
  ${({ theme }) => css `
    display: flex;
    position: relative;
    width: ${theme?.new?.select?.width};
    height: ${theme?.new?.select?.height};
    padding: 0;
    margin: 0;
    border: 0;

    background: ${theme?.new?.select?.background};
    border-bottom: ${theme?.new?.select?.borderBottom};
    border-radius: ${theme?.new?.select?.borderRadius};

    :hover {
      background: ${theme?.new?.select?.hoverBackground};
    }

    &.read-only {
      background: ${theme?.new?.select?.hoverBackground};
    }

    &.error {
      :after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 100%;
        background: ${theme?.new?.select?.labelErrorColor};
      }
    }

    &.leading-icon {
      ${Select} {
        padding-left: unset;
      }
    }

    &.trailing-icon {
      ${Select} {
        padding-right: unset;
      }
    }

    ${Select} {
      &.error {
        & ~ ${Title} > ${Label} {
          color: ${theme?.new?.select?.labelErrorColor};
        }
      }

      :disabled {
        > :not(${Placeholder}) {
          color: ${theme?.new?.select?.disabledColor};
        }
      }

      :focus {
        outline: unset;
      }
    }
  `}
`;
export const LeadingIcon = styled.div `
  ${({ theme }) => css `
    display: flex;
    align-items: center;
    width: ${theme?.new?.select?.leadingIconWidth};
    height: ${theme?.new?.select?.leadingIconHeight};
    margin: ${theme?.new?.select?.leadingIconMargin};
  `}
`;
export const TrailingIcon = styled.div `
  ${({ theme }) => css `
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: ${theme?.new?.select?.trailingIconWidth};
    height: ${theme?.new?.select?.trailingIconHeight};
    margin: ${theme?.new?.select?.trailingIconMargin};
    :before {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      width: inherit;
      height: inherit;
    }
  `}
`;
export const Title = styled.div `
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin: ${({ theme }) => theme?.new?.select?.titleMargin};
`;
export const Label = styled.label `
  ${({ theme }) => css `
    color: ${theme?.new?.select?.labelColor};
    font-size: ${theme?.new?.select?.labelTypography.fontSize};
    font-weight: ${theme?.new?.select?.labelTypography.fontWeight};
    line-height: ${theme?.new?.select?.labelTypography.lineHeight};
    font-family: ${theme?.new?.select?.fontFamily};
  `}
`;
export const Link = styled.span `
  color: ${({ theme }) => theme?.new?.select?.linkColor};
  font-size: ${({ theme }) => theme?.new?.select?.linkTypography.fontSize};
  line-height: ${({ theme }) => theme?.new?.select?.linkTypography.lineHeight};
  font-weight: ${({ theme }) => theme?.new?.select?.linkTypography.fontWeight};
  font-family: ${({ theme }) => theme?.new?.select?.fontFamily};

  user-select: none;

  :hover {
    cursor: pointer;
  }
`;
export const SelectOption = styled.div `
  ${({ theme }) => css `
    display: flex;
    align-items: center;
    box-sizing: border-box;

    width: 100%;
    min-height: ${theme?.new?.select?.optionMinHeight};

    color: ${theme?.new?.select?.color};
    font-size: ${theme?.new?.select?.typography.fontSize};
    line-height: ${theme?.new?.select?.typography.fontSize};
    font-weight: ${theme?.new?.select?.typography.fontWeight};
    font-family: ${theme?.new?.select?.fontFamily};
    border-radius: ${theme?.new?.select?.optionBorderRadius};
  `}
`;
export const SelectedModal = styled.div `
  ${({ theme }) => css `
    box-sizing: border-box;
    position: fixed;
    opacity: 0;
    overflow: auto;
    border-radius: ${theme?.new?.select?.modalBorderRadius};
    background: ${theme?.new?.select?.modalBackground};
    box-shadow: ${theme?.new?.select?.modalBoxShadow};
    padding: ${theme?.new?.select?.modalPadding};
    max-height: 250px;
    z-index: ${Z_INDEX};

    ${SelectOption} {
      padding: ${theme?.new?.select?.optionPadding};
      font-weight: ${theme?.new?.select?.optionFontWeight};

      &.selected {
        font-weight: ${theme?.new?.select?.optionSelectedFontWeight};
      }

      :hover {
        cursor: pointer;
        background: ${theme?.new?.select?.optionHoverBackground};
        color: ${theme?.new?.select?.optionHoverColor};
      }
    }
  `}
`;
//# sourceMappingURL=select.styled.js.map