/* Overrides for th-select-picker inside a form-floating layout */

/* Move border from wrapper to th-select-picker for form-floating compatibility */
.language-picker-floating .th-sp-btn-wrapper {
    border: none !important;
    box-shadow: none !important;
}

/* Remove inner button padding so text aligns with form-floating */
.language-picker-floating .th-sp-select-btn {
    padding: 0;
    height: auto;
    min-height: 1.5rem;
    font-size: 16px;
}

/* Style th-select-picker as a form-control for form-floating */
.language-picker-floating th-select-picker {
    display: block;
    width: 100%;
    padding: 1.625rem 0.75rem 0.625rem;
    background-color: #fff;
    border: 1px solid #949494;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.language-picker-floating th-select-picker:focus-within {
    border-color: #5199d4;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(81, 153, 212, 0.6);
}

/* Position the floating label */
.language-picker-floating > label {
    color: rgba(33, 37, 41, 0.65);
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Remove Bootstrap's default margin between dropdown options */
th-select-picker .form-check {
    margin-bottom: 0 !important;
}

/* Align dropdown with the form-floating border instead of the inner btn-container */
.language-picker-floating .th-sp-option-list-view {
    top: calc(100% + 0.625rem + 1px);
    left: calc(-0.75rem - 1px);
    width: calc(100% + 1.5rem + 2px);
}
.language-picker-floating .th-sp-option-list-view.th-sp-flip-up {
    top: auto;
    bottom: calc(100% + 1.625rem + 1px);
}