/*********************
 * Fields
**********************/
.bb-form-field {
    background:var(--form-bg); color:var(--form-color);
    font-size:var(--form-font-size); font-family:var(--form-font);

    width:100%; height:var(--form-field-height); display:block;
    padding:5px var(--form-field-padding-h); margin:0 !important;
    -webkit-appearance:none !important; -webkit-border-radius:var(--form-radius) !important; border-radius:var(--form-radius) !important;
    border:var(--form-border-width) solid var(--form-border-color);
    transition:var(--bb-transition);
}


/*********************
 * Textarea
**********************/
textarea.bb-form-field {
    height:var(--form-field-size);
    padding:15px var(--form-field-padding-h);
    resize:vertical;
    transition:border-color .3s, background-color .3s, color .3s;
}

/* Textarea size */
textarea.bb-form-field.large {--form-field-size:200px;}
textarea.bb-form-field.medium {--form-field-size:160px;}
textarea.bb-form-field.small {--form-field-size:120px;}
@media only screen and (max-width:480px) {
    /* Textarea size */
    textarea.bb-form-field.large {--form-field-size:160px;}
    textarea.bb-form-field.medium {--form-field-size:120px;}
    textarea.bb-form-field.small {--form-field-size:80px;}
}


/*********************
 * Hover & focus
**********************/
.bb-form-field:not([readonly]):hover,
.bb-form-field:not([readonly]):focus {
    --form-placeholder-color:rgba(255, 255, 255, .2);
    --form-border-color:var(--form-border-color-hover);

    background:var(--form-bg-hover); color:var(--form-color-hover);
}


/*********************
 * A11y
**********************/
.bb-form-field:not([readonly]):focus-visible {
    box-shadow:0 0 0 1px var(--form-border-color-hover); border-color:var(--form-border-color-hover);
    transition:none;
}


/*********************
 * Error
**********************/
.bb-form-field[aria-invalid="true"],
.bb-form-field[aria-invalid="true"]:hover {
    --form-border-color:var(--form-color-error);
    --form-border-color-hover:var(--form-color-error);
    box-shadow:0 0 0 1px var(--form-color-error);
}


/*********************
 * Readonly
**********************/
.bb-form-field[readonly] {
    --form-bg:rgba(0, 0, 0, .03);
    --form-border-color:rgba(0, 0, 0, .03);
}


/*********************
 * File
**********************/
input.bb-form-field[type="file"] {
    display:flex; align-items:flex-start;
    padding-top:calc((var(--form-field-height) - 26px) * 0.5);
    cursor:pointer; position:relative; color:rgba(255, 255, 255, .5);
}

/* choose file button */
input.bb-form-field[type="file" i]::-webkit-file-upload-button {
    background:#fff; border:1px solid #707070; padding:3px 10px 6px;
    font-size:15px; color:#000; font-weight:500; font-family:var(--bb-font-primary); letter-spacing:-.05em;
    transition:var(--bb-transition); cursor:pointer;
    position:absolute; top:50%; transform:translateY(-50%); right:var(--form-field-padding-h);
}
input.bb-form-field[type="file" i]::-webkit-file-upload-button:hover {
    background:var(--bb-color-yellow); color:var(--bb-color-on-primary);
    border-color:var(--bb-color-yellow);
}


/*********************************************
 * Placeholder
**********************************************/
.bb-form-field::-webkit-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--form-placeholder-color);}
.bb-form-field::-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--form-placeholder-color);}
.bb-form-field:-ms-input-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--form-placeholder-color);}
.bb-form-field:-moz-placeholder {font-family:inherit; font-weight:inherit; font-size:inherit; color:var(--form-placeholder-color);}


/*********************************************
 * Label
**********************************************/
.bb-form-field--label {
    display:block;
    color:var(--bb-color-text); font-weight:500; padding-left:var(--form-field-padding-h);
    margin-bottom:var(--bb-spacing-15);
}
@media only screen and (max-width:767px) {
    .bb-form-field--label {padding-left:0; margin-bottom:var(--bb-spacing-10);}
}