input.corpay-textbox,
.corpay-textbox-container input,
.corpay-textbox-container .corpay-textbox {
    border: 0;
    border-bottom: 1px solid var(--corpay-tertiary);
    background: transparent;
    padding: 0px;
    color: var(--corpay-secondary);
    padding-left: 5px;
    width: calc(100% - 5px);
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: none;
    font-size: var(--corpay-value-font-size) !important;
    font-family: var(--corpay-font-family) !important;
    letter-spacing: normal;
    display: block;
    font-weight: normal;
}
input.corpay-textbox.has-title,
.corpay-textbox-container:has(label) input,
.corpay-textbox-container:has(label) .corpay-textbox {
    margin-top: -2px;
}

input.corpay-textbox.bubble,
.corpay-textbox-container.bubble input {
    border: 1px solid var(--corpay-tertiary);
    border-radius: 4px;
    padding: 8px 10px;
    display: inline-block;
    width: calc(100% - 22px);
}
input.corpay-textbox.bubble.has-title,
.corpay-textbox-container.bubble:has(label) input {
    margin-top: 10px;
}

/* hover */
.corpay-textbox-container:hover label,
.corpay-textbox-container.bubble:hover label {
    color: var(--corpay-secondary-hover);
}
input.corpay-textbox:hover,
input.corpay-textbox.bubble:hover,
.corpay-textbox-container:hover input,
.corpay-textbox-container.bubble:hover input {
    border-color: var(--corpay-secondary-hover);
}

/* focus */
.corpay-textbox-container:focus-within label,
.corpay-textbox-container.bubble:focus-within label {
    color: var(--corpay-anchor) !important;
}
input.corpay-textbox:focus,
input.corpay-textbox.bubble:focus,
.corpay-textbox-container:focus-within input,
.corpay-textbox-container.bubble:focus-within input {
    border-color: var(--corpay-anchor) !important;
}

/* disabled */
.corpay-textbox-container.disabled label,
.corpay-textbox-container.bubble.disabled label {
    color: var(--corpay-disabled);
}
input.corpay-textbox.disabled,
input.corpay-textbox.bubble.disabled,
.corpay-textbox-container.disabled input,
.corpay-textbox-container.bubble.disabled input{
    color: var(--corpay-disabled);
    border-color: var(--corpay-disabled);
    cursor: default;
}

/* error */
.corpay-textbox-container.error label,
.corpay-textbox-container.bubble.error label {
    color: var(--corpay-error);
}
input.corpay-textbox.error,
input.corpay-textbox.bubble.error,
.corpay-textbox-container.error input,
.corpay-textbox-container.bubble.error input{
    border-color: var(--corpay-error);
}

/* readonly */
input.corpay-textbox.readonly,
.corpay-textbox-container.readonly input,
.corpay-textbox-container.readonly .corpay-textbox { /* If you use the readonly class make sure to use the disabled attribute on the <input/> so that it is not interactable and the user can't change the value */
    background-color: var(--corpay-disabled-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-left: 5px;
    width: calc(100% - 5px);
    cursor: default !important;
}
input.corpay-textbox.readonly.has-title,
.corpay-textbox-container.readonly:has(label) input,
.corpay-textbox-container.readonly:has(label) .corpay-textbox {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-left: 10px;
    width: calc(100% - 10px);
}
.corpay-textbox-container.readonly:hover label {
    color: var(--corpay-tertiary);
}
input.corpay-textbox.readonly:hover,
.corpay-textbox-container.readonly:hover input,
.corpay-textbox-container.readonly:hover .corpay-textbox {
    border-color: var(--corpay-tertiary);
}
input.corpay-textbox.bubble.readonly.has-title,
.corpay-textbox-container.bubble.readonly:has(label) input,
.corpay-textbox-container.bubble.readonly:has(label) .corpay-textbox {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

input.corpay-textbox.hasDatepicker,
.corpay-textbox-container input.hasDatepicker {
    width: calc(100% - 40px);
    display: inline-block;
}
input.corpay-textbox.hasDatepicker.bubble,
.corpay-textbox-container.bubble input.hasDatepicker {
    width: calc(100% - 53px);
    border-right: none;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

button:has(.corpay-calendar) {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--corpay-tertiary);
    outline:none;
    vertical-align: bottom;
    color: var(--corpay-secondary);
}
button:has(.corpay-calendar.bubble),
.corpay-textbox-container.bubble:has(.corpay-calendar) button {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--corpay-tertiary);
    outline: none;
    vertical-align: bottom;
    color: var(--corpay-secondary);
    border-top: 1px solid var(--corpay-tertiary);
    border-right: 1px solid var(--corpay-tertiary);
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    padding: 8px 10px 8px 0px;
}
button:has(.corpay-calendar):hover,
button:has(.corpay-calendar.bubble):hover,
.corpay-textbox-container.bubble:has(.corpay-calendar):hover button {
    border-color: var(--corpay-secondary-hover);
}
button:has(.corpay-calendar):focus,
button:has(.corpay-calendar.bubble):focus,
.corpay-textbox-container.bubble:has(.corpay-calendar):focus-within button {
    border-color: var(--corpay-anchor) !important;
}
button:has(.corpay-calendar.disabled),
button:has(.corpay-calendar.bubble.disabled),
button:has(.corpay-calendar.disabled):hover,
button:has(.corpay-calendar.bubble.disabled):hover,
.corpay-textbox-container.bubble.disabled:has(.corpay-calendar) button,
.corpay-textbox-container.bubble.disabled:has(.corpay-calendar):hover button {
    border-color: var(--corpay-disabled) !important;
    color: var(--corpay-disabled) !important;
}
button:has(.corpay-calendar.error),
button:has(.corpay-calendar.bubble.error),
.corpay-textbox-container.bubble.error:has(.corpay-calendar) button {
    border-color: var(--corpay-error);
}
span.corpay-calendar.error,
span.corpay-calendar.bubble.error,
.corpay-textbox-container.error span,
.corpay-textbox-container.bubble.error span {
    color: var(--corpay-secondary);
    font-weight: normal;
}

/* textbox css events affect title */
.corpay-textbox-container:has(> input.corpay-textbox:hover) > .title:not(.readonly),
.corpay-textbox-container:has(> input.corpay-textbox:hover) > .bubble:not(.readonly):not(.corpay-textbox):not(.corpay-calendar),
.corpay-textbox-container:has(> button.ui-datepicker-trigger:hover) > .title,
.corpay-textbox-container:has(> button.ui-datepicker-trigger:hover) > .bubble:not(.corpay-textbox):not(.corpay-calendar) {
    color: var(--corpay-secondary-hover);
}
.corpay-textbox-container:has(> input.corpay-textbox:focus) > .title:not(.readonly),
.corpay-textbox-container:has(> input.corpay-textbox:focus) > .bubble:not(.readonly):not(.corpay-textbox):not(.corpay-calendar),
.corpay-textbox-container:has(> button.ui-datepicker-trigger:focus) > .title,
.corpay-textbox-container:has(> button.ui-datepicker-trigger:focus) > .bubble:not(.corpay-textbox):not(.corpay-calendar) {
    color: var(--corpay-anchor) !important;
}

/* Sync the textbox and the calendar css events */
input.corpay-textbox.hasDatepicker:hover ~ button:has(.corpay-calendar),
input.corpay-textbox.hasDatepicker:hover ~ button:has(.corpay-calendar.bubble),
div:has(button.ui-datepicker-trigger:hover) > input.corpay-textbox.hasDatepicker,
.corpay-textbox-container:has(button.ui-datepicker-trigger:hover) > input.corpay-textbox.hasDatepicker {
    border-color: var(--corpay-secondary-hover);
}
input.corpay-textbox.hasDatepicker:focus ~ button:has(.corpay-calendar),
input.corpay-textbox.hasDatepicker:focus ~ button:has(.corpay-calendar.bubble),
div:has(button.ui-datepicker-trigger:focus) > input.corpay-textbox.hasDatepicker,
.corpay-textbox-container:has(button.ui-datepicker-trigger:focus) > input.corpay-textbox.hasDatepicker {
    border-color: var(--corpay-anchor) !important;
}

/* Textbox with symbol at the end */
.corpay-textbox-container:has(input + .material-symbols-outlined) input {
    display: inline-block;
    width: calc(100% - 40px);
}
.corpay-textbox-container:has(input) > .material-symbols-outlined {
    color: var(--corpay-tertiary);
    font-size: 16px;
    border-bottom: 1px solid var(--corpay-tertiary);
    vertical-align: bottom;
    padding: 2px;
}
.corpay-textbox-container:hover > .material-symbols-outlined {
    cursor: default;
    border-bottom: 1px solid var(--corpay-secondary-hover);
}
.corpay-textbox-container:focus-within > .material-symbols-outlined {
    cursor: default;
    border-bottom: 1px solid var(--corpay-anchor) !important;
}
.corpay-textbox-container.readonly > .material-symbols-outlined,
.corpay-textbox-container.readonly:hover > .material-symbols-outlined,
.corpay-textbox-container.readonly:focus-within > .material-symbols-outlined {
    background-color: var(--corpay-disabled-background);
    cursor: default;
    border-top-right-radius: 4px;
    border-bottom: 1px solid var(--corpay-tertiary);
}
.corpay-textbox-container.readonly:has(input + .material-symbols-outlined) > input {
    border-top-right-radius: 0px;
}

/*** Text Area ***/
textarea.corpay-textarea {
    border: 1px solid var(--corpay-tertiary);
    border-radius: 4px;
    background: transparent;
    color: var(--corpay-secondary);
    font-size: var(--corpay-value-font-size) !important;
    font-family: var(--corpay-font-family) !important;
    letter-spacing: normal;
    font-weight: normal;
    outline: none;
    padding: 5px;
}
textarea.corpay-textarea:hover {
    border-color: var(--corpay-secondary-hover);
}
textarea.corpay-textarea:focus,
textarea.corpay-textarea:focus-visible {
    border-color: var(--corpay-anchor) !important;
}
textarea.corpay-textarea.error {
    border-color: var(--corpay-error);
}
textarea.corpay-textarea.disabled,
textarea.corpay-textarea.disabled:hover {
    border-color: var(--corpay-disabled);
    background-color: var(--corpay-disabled-background);
    color: var(--corpay-disabled);
    cursor: default;
}
/*** End Text Area ***/