/*
 * BR-8 - BioLegend shared base-component style overrides.
 * Loaded from the BioLegend site Head Markup. Place the <link> LAST (after bl-base.css)
 * so it wins over the bl-base.css rule that hides .slds-input__icon.
 * Opt-in only: add class="bl-field" to a base component to apply these styles.
 * Add new sections per component (e.g. lightning-input.bl-field) below.
 */

/* ===== lightning-combobox ===== */
/* Field (faux input button) - Figma 556-4100: 56px, #525252 border, Hanken 18/24 Medium */
lightning-combobox.bl-field .slds-combobox__form-element,
lightning-combobox.bl-field .slds-input-has-icon {
    position: relative !important;
}

lightning-combobox.bl-field .slds-input_faux,
lightning-combobox.bl-field button.slds-combobox__input,
lightning-combobox.bl-field input.slds-combobox__input {
    height: 56px !important;
    min-height: 56px !important;
    line-height: 54px !important;
    border: 1px solid #525252 !important;
    border-radius: 4px !important;
    padding: 0 56px 0 16px !important;
    background-color: #FFFFFF !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: none !important;
    text-align: left !important;
}

lightning-combobox.bl-field .slds-input_faux .slds-truncate,
lightning-combobox.bl-field .slds-combobox__input-value {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Placeholder */
lightning-combobox.bl-field input.slds-combobox__input::placeholder {
    color: #757575 !important;
    -webkit-text-fill-color: #757575 !important;
}

/* Hover / Focus */
lightning-combobox.bl-field .slds-input_faux:hover,
lightning-combobox.bl-field .slds-input_faux:focus,
lightning-combobox.bl-field .slds-combobox__input:focus,
lightning-combobox.bl-field .slds-has-focus .slds-input_faux {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Error */
lightning-combobox.bl-field.slds-has-error .slds-input_faux,
lightning-combobox.bl-field .slds-has-error .slds-input_faux,
lightning-combobox.bl-field.slds-has-error .slds-combobox__input {
    border-color: #DC0101 !important;
    box-shadow: none !important;
}

/* Disabled */
lightning-combobox.bl-field .slds-input_faux:disabled,
lightning-combobox.bl-field .slds-combobox__input[disabled] {
    background-color: #F3F3F3 !important;
    color: #757575 !important;
    -webkit-text-fill-color: #757575 !important;
    cursor: not-allowed !important;
}

/* Chevron - re-show the icon hidden by the Head Markup .slds-input__icon rule */
lightning-combobox.bl-field .slds-input__icon,
lightning-combobox.bl-field .slds-input__icon-group,
lightning-combobox.bl-field lightning-icon.slds-input__icon {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 24px !important;
    height: 24px !important;
    pointer-events: none !important;
}

lightning-combobox.bl-field .slds-input__icon svg,
lightning-combobox.bl-field .slds-input__icon .slds-icon {
    width: 24px !important;
    height: 24px !important;
    fill: #000000 !important;
    color: #000000 !important;
}

/* Dropdown list */
lightning-combobox.bl-field .slds-dropdown {
    border: 1px solid #D9D9D9 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    margin-top: 4px !important;
    padding: 4px 0 !important;
}

lightning-combobox.bl-field .slds-listbox__option,
lightning-combobox.bl-field .slds-listbox__option .slds-truncate,
lightning-combobox.bl-field .slds-listbox__option-text {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

lightning-combobox.bl-field .slds-listbox__option:hover,
lightning-combobox.bl-field .slds-listbox__option.slds-has-focus,
lightning-combobox.bl-field .slds-listbox__option[aria-selected="true"],
lightning-combobox.bl-field .slds-listbox__option.slds-is-selected {
    background-color: #F3F3F3 !important;
    box-shadow: none !important;
}

lightning-combobox.bl-field .slds-listbox__option .slds-icon,
lightning-combobox.bl-field .slds-listbox__option .slds-listbox__icon-selected {
    fill: #000000 !important;
    color: #000000 !important;
}


/* ===== lightning-input ===== */
/* Field - Figma 556-4100: 56px, #525252 border, 4px radius, 16px padding, Hanken 18/24 Medium */
lightning-input.bl-field .slds-input,
lightning-input.bl-field input.slds-input {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 16px !important;
    border: 1px solid #525252 !important;
    border-radius: 4px !important;
    background-color: #FFFFFF !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    line-height: 24px !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
    box-shadow: none !important;
}

/* Placeholder */
lightning-input.bl-field .slds-input::placeholder {
    color: #757575 !important;
    -webkit-text-fill-color: #757575 !important;
    font-weight: 400 !important;
}

/* Hover / Focus - overrides the purple Head Markup .slds-input:hover/:focus rules */
lightning-input.bl-field .slds-input:hover,
lightning-input.bl-field .slds-input:focus,
lightning-input.bl-field .slds-input:active {
    border-color: #000000 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Error */
lightning-input.bl-field.slds-has-error .slds-input,
lightning-input.bl-field .slds-has-error .slds-input {
    border-color: #DC0101 !important;
    box-shadow: none !important;
}

/* Disabled / read-only */
lightning-input.bl-field .slds-input:disabled,
lightning-input.bl-field .slds-input[readonly] {
    background-color: #F3F3F3 !important;
    color: #757575 !important;
    -webkit-text-fill-color: #757575 !important;
    cursor: not-allowed !important;
}

/* Browser autofill keeps the white box and black text */
lightning-input.bl-field .slds-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #000000 !important;
}

/* ===== Shared: label, required marker, error / help text ===== */
lightning-input.bl-field .slds-form-element__label,
lightning-combobox.bl-field .slds-form-element__label {
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    color: #000000 !important;
    margin-bottom: 4px !important;
}

lightning-input.bl-field abbr.slds-required,
lightning-combobox.bl-field abbr.slds-required {
    color: #000000 !important;
    text-decoration: none !important;
}

/* Error message under the field: Hanken 14/20 Regular, error red, 4px gap */
lightning-input.bl-field .slds-form-element__help,
lightning-combobox.bl-field .slds-form-element__help {
    display: block !important;
    margin-top: 4px !important;
    padding: 0 !important;
    font-family: 'Hanken Grotesk', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
    color: #DC0101 !important;
    -webkit-text-fill-color: #DC0101 !important;
}