@use 'sass:color';

// Numeric input
.numeric-input {
    text-align: right;
  }

// Prevent double click from selecting text on custom checkboxes.
.custom-control-label {
    user-select:none;
}

.form-group-label {
    display: flex;
    justify-content: space-between;
}

.form-switch-inline {
    display: inline-block;
    margin-left: 0.5rem;
}

div.neo-form-group-floating {
    position: relative;
    padding-top: 12px;
    margin-bottom: 15px;

    label.neo-floating-label {
        position: absolute;
        left: 0px;
        margin-top: 4px;
        transform-origin: top left;
        transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
        color: rgba(0, 0, 0, 0.7);
        z-index: 1;
    }

    .neo-forms-editor {
        color: #495057;
        border: none;
        outline: none;
        border-bottom: 1px solid $input-border-color;
        transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
        width: 100%;
        padding: 5px 0 3px 0;
    }

    > div:first-child {
        position: relative;
    }

    > div:first-child::before {
        bottom: -3px;
        content: "";
        left: 0;
        position: absolute;
        transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
        width: 100%;
        border-bottom: 3px solid rgba($input-focus-border-color, 0.15);
        transform: scale(0);
    }    

    &.focused {
        > div:first-child::before {
            transform: scale(1);
        }
        label.neo-floating-label {
            color: mix($input-focus-border-color, black, 85%);
        }
        .neo-forms-editor {
            border-bottom: 1px solid $input-focus-border-color;
        }
    }

    &.has-value, &.focused {
        label.neo-floating-label {
            transform: translateY(-18px) scale(0.75);
        }
    }

    &.error {
        .neo-forms-editor {
            border-bottom-color: $validation-border-error;
        }
        div:first-child::before {
            border-bottom-color: $validation-shadow-error-color;
        }
    }
    &.error.focused {
        label.neo-floating-label {
            color: $validation-color-error;
        }
    }
    &.warning {
        .neo-forms-editor {
            border-bottom-color: $validation-border-warning;
        }
        div:first-child::before {
            border-bottom-color: $validation-shadow-warning-color;
        }
    }
    &.warning.focused {
        label.neo-floating-label {
            color: $validation-color-warning;
        }
    }
    
}

.input-group.file-editor {
    .file-placeholder {
        color: $input-placeholder-color;
        user-select: none;
        padding: 0;

        .neo-file-drop {
            height: 100%;
            border: none;
            padding: 0 0.75rem;
            display: flex;
            align-items: center;
        }
    }
    a {
        white-space: nowrap;
    }
}

.form-control-loading {
    text-align: right;
    padding-right: 0.375rem;

    .spinner-border {
        width: 1.5rem;
        height: 1.5rem;
        border-width: 2px;
    }
}

.react-select-bs {
    .react-select-bs__menu {
        z-index: 2; /* Without this, checkboxes appear in front of the drop down menu. */
    }
}
.react-select-row {
    padding: 0.15rem 1rem 0.25rem 1rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    cursor: pointer;
      
    &.with-description {
        div.react-select-name {
            width: 100%;
        }
        div.react-select-description {
            font-size: 0.9rem;
            color: #999;
        }
    }

    &.focused, &:hover {
        background: $input-btn-focus-color;
    }
    &.selected {
        background: #1E90FF;
        color: #fff;

        div.react-select-description {
            color: #C7E4FF;
        }
    }
}