select.corpay-dropdown,
.corpay-dropdown-container select {
    font-family: var(--corpay-font-family) !important;
    letter-spacing: normal !important;
    font-size: var(--corpay-value-font-size) !important;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--corpay-tertiary);
    color: var(--corpay-secondary);
    outline: none;
    appearance: none;
    background: transparent;
    background-color: var(--corpay-white);
    background-image: linear-gradient(45deg, transparent 50%, var(--corpay-tertiary) 50%), linear-gradient(135deg, var(--corpay-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 10px) 7px, calc(100% - 4px) 7px;
    background-size: 5px 5px, 6px 5px;
    background-repeat: no-repeat;
    display: block;
    font-weight: normal;
    padding-right: 15px;
    text-overflow: ellipsis;
}
select.corpay-dropdown.has-title,
.corpay-dropdown-container:has(label) select{
    margin-top: -2px;
}

/* default focus */
.corpay-dropdown-container:focus-within label {
    color: var(--corpay-anchor) !important;
}
select.corpay-dropdown:focus,
.corpay-dropdown-container:focus-within select{
    border-bottom: 1px solid var(--corpay-anchor) !important;
    appearance: none;
    background: transparent;
    background-color: var(--corpay-white);
    background-image: linear-gradient(135deg, transparent 50%, var(--corpay-tertiary) 50%), linear-gradient(45deg, var(--corpay-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 10px) 7px, calc(100% - 4px) 7px;
    background-size: 6px 5px, 6px 5px;
    background-repeat: no-repeat;
}

/* Bubble */
select.corpay-dropdown.bubble,
.corpay-dropdown-container.bubble select{
    border: 1px solid var(--corpay-tertiary);
    border-radius: 4px;
    padding: 8px 25px 8px 10px;
    background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px;
    display: inline-block;
}
select.corpay-dropdown.bubble.has-title,
.corpay-dropdown-container.bubble:has(label) select{
    margin-top: 10px;
}

/* bubble focus */
.corpay-dropdown-container.bubble:focus-within label {
    color: var(--corpay-anchor) !important;
}
select.corpay-dropdown.bubble:focus,
.corpay-dropdown-container.bubble:focus-within select{
    border: 1px solid var(--corpay-anchor) !important;
    appearance: none;
    background: transparent;
    background-color: var(--corpay-white);
    background-image: linear-gradient(135deg, transparent 50%, var(--corpay-tertiary) 50%), linear-gradient(45deg, var(--corpay-tertiary) 50%, transparent 50%);
    background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px;
    background-size: 6px 5px, 6px 5px;
    background-repeat: no-repeat;
}

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

/* disabled */
.corpay-dropdown-container.disabled label,
.corpay-dropdown-container.disabled:hover label,
.corpay-dropdown-container.bubble.disabled label,
.corpay-dropdown-container.bubble.disabled:hover label {
    cursor: default;
    color: var(--corpay-disabled) !important;
    border-color: transparent !important;
}
select.corpay-dropdown.disabled,
select.corpay-dropdown.bubble.disabled,
.corpay-dropdown-container.disabled select,
.corpay-dropdown-container.bubble.disabled select {
    color: var(--corpay-disabled) !important;
    border-color: var(--corpay-disabled) !important;
    cursor: default;
    background-image: linear-gradient(45deg, transparent 50%, var(--corpay-disabled) 50%), linear-gradient(135deg, var(--corpay-disabled) 50%, transparent 50%);
}

/* error */
.corpay-dropdown-container.error label,
.corpay-dropdown-container.bubble.error label {
    color: var(--corpay-error);
}
select.corpay-dropdown.error,
select.corpay-dropdown.bubble.error,
.corpay-dropdown-container.error select,
.corpay-dropdown-container.error.buble select {
    border-color: var(--corpay-error);
}

/* Readonly */
select.corpay-dropdown.readonly,
.corpay-dropdown-container.readonly select { /* If you use the readonly class make sure to use the disabled attribute on the <select> 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;
    cursor: default;
    background-image: none; /* remove arrow when in readonly */
}
select.corpay-dropdown.readonly.has-title,
.corpay-dropdown-container.readonly:has(label) select {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
select.corpay-dropdown.readonly:hover,
.corpay-dropdown-container.readonly:hover select {
    border-color: var(--corpay-tertiary);
}
/* bubble readonly - force styling to look like default readonly, remove bubble properties */
.corpay-dropdown-container.bubble.readonly label,
.corpay-dropdown-container.bubble.readonly:hover label {
    cursor: default;
    color: var(--corpay-tertiary);
    background-color: var(--corpay-disabled-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-left: 5px;
    display: block;
    width: calc(100% - 10px);
    margin: 0;
    z-index: 10;
    position: relative;
}
.corpay-dropdown-container.bubble.readonly select,
.corpay-dropdown-container.bubble.readonly:hover select {
    cursor: default;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--corpay-tertiary);
    background-color: var(--corpay-disabled-background);
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    padding-left: 5px;
}
.corpay-dropdown-container.bubble.readonly:has(label) select,
.corpay-dropdown-container.bubble.readonly:hover:has(label) select {
    margin-top: -2px; /* has-title */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-left: 10px;
}

/* dropdown css events affect title */
.corpay-dropdown-container:has(> .corpay-dropdown:hover) > .title:not(.readonly),
.corpay-dropdown-container:has(> .corpay-dropdown:hover) > .bubble:not(.readonly):not(.corpay-dropdown),{
    color: var(--corpay-secondary-hover);
}

.corpay-dropdown-container:has(> .corpay-dropdown:focus) > .title:not(.readonly),
.corpay-dropdown-container:has(> .corpay-dropdown:focus) > .bubble:not(.readonly):not(.corpay-dropdown) {
    color: var(--corpay-anchor) !important;
}


/*
    TODO replace the whole options list with a custom div
    I cannot get the corpay font to display
    `Selected` option is not easily doable with our current html&javascript setup
    There's a border I can't remove
    and no box shadow
*/
select.corpay-dropdown option,
.corpay-dropdown-container select option {
    font-family: Verdana, Geneva, Tahoma, sans-serif; /*font-family: var(--corpay-font-family) !important;*/
    letter-spacing: normal !important;
    /* font-size: var(--corpay-value-font-size); */
    background-color: var(--corpay-white);
    box-shadow: var(--corpay-box-shadow);
    color: var(--corpay-secondary);
}
select.corpay-dropdown option:hover,
.corpay-dropdown-container select option:hover {
    background-color: var(--corpay-disabled-background);
}

/* This will not work with our current set up, we don't remove `selected` attribute when we change value of select via javascript $(#mySelect).val()
 * we also don't add `selected` attribute other than for default value
 * basically what I am saying is we don't keep track of the selected value, so this is currently unreliable
select.corpay-dropdown option[selected=selected] {
    background-color: var(--corpay-selected-option);
}
*/

select.corpay-dropdown option:disabled,
.corpay-dropdown-container select option:disabled {
    color: var(--corpay-disabled);
}