import styled from 'styled-components';

const css = styled.div;

export default css<any>`
    position: relative;

    .input-title {
        font-weight: 600;
        text-transform: uppercase;
        padding-bottom: 3px;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.8);
        position: relative;

        &:after {
            position: absolute;
            font-family: 'Font Awesome 5 Free';
            content: '';
            font-weight: 900;
            //top: 31px;
            bottom: 0px;
            transform: translateY(10px);
            right: 22px;
            width: 0;
            height: 0;
            color: #222;
            z-index: 1;
        }
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 3px;
        padding: 7px 15px;
        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: 13px;
        font-weight: 600;

        ${(props) =>
            props.themeInput === 'gray' &&
            `background: #eee;
            border-color: #eee;
        `}

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

    .error-input {
        color: ${(props) => props.theme.red};
        text-align: left;
        font-weight: 600;
        margin: 0px;
        padding: 0px;
        font-size: 13px;
        margin-top: 2px;
        margin-bottom: 10px;
    }
`;
