import styled from 'styled-components';

const css = styled.div;

export const Container = css<any>`
   position: relative;

   .select-box {
      position: relative;
      width: 100%;

      .select-icon {
         position: absolute;
         height: 100%;
         right: 0px;
         top: 0px;
         width: 30px;
         text-align: center;
         display: flex;
         font-size: 17px;
         justify-content: center;
         align-items: center;
         pointer-events: none;
         z-index: 1;

         &:hover {
            cursor: pointer;
         }
      }
   }

   select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: 3px;
      padding: 7px 15px;
      padding-right: 40px;
      width: 100%;
      background: white;
      border: 2px solid rgba(0, 0, 0, 0.25);
      color: #444;
      font-weight: 500;
      padding-right: 26px;
      border-radius: 3px;
      font-size: 14px;
      font-weight: 600;
      z-index: 1;
      position: relative;
      background: transparent;

      &:hover {
         cursor: pointer;
      }

      &.has-error {
         border-color: ${(props) => props.theme.red} !important;
      }

      &:focus,
      &.focus {
         border-color: ${(props) => props.theme.primary};
      }
   }
`;
