/* Wrapper */

.tf-wrapper {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

/* Label positions */

.tf-label-top .tf-label {
    margin-bottom: 0.25rem;
}

.tf-label-left {
    flex-direction: row;
    align-items: center;
}

    .tf-label-left .tf-label {
        width: 160px;
        margin-right: 1rem;
        text-align: right;
    }

/* Input */

.tf-input-wrapper {
    position: relative;
    flex: 1;
}

.tf-input {
    padding-right: 2rem;
}

/* Clear button */

.tf-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    font-size: 14px;
    cursor: pointer;
    color: grey;
}

/* Modes */

.tf-readonly {
    background-color: #f8f9fa;
    cursor: default;
}

.tf-disabled {
    background-color: #e9ecef;
    opacity: 0.7;
}

/* Validation */
.tf-validation {
    margin-top: 0.25rem;
}

input.input-validation-error,
.tf-input.input-validation-error {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

    .tf-input.input-validation-error:focus,
    input.input-validation-error:focus {
        border-color: #dc3545 !important;
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25) !important;
        outline: none;
    }