@import "../../assets/sass/global.scss";

.input-inline-container {
    width: 100%;

    .input-inline-wrap {
        position: relative;
        border: 1px solid #c3c3c3;
        border-radius: 3px;
        width: calc(100% - 2px);

        .input-inline {
            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-right: 55px;
        }

        .input-inline-check-button {
            position: absolute;
            right: 25px;
            top: 4px;
        }

        .input-inline-cancel-button {
            position: absolute;
            right: 0px;
            top: 4px;
        }

        .check-icon:hover {
            color: $color-blue-gtc;
        }

        .cancel-icon:hover {
            color: $warning-color;
        }

        // Dedicated style for required empty fields
        .is-required {
            box-shadow: 0px 0px 1px 1px $warning-color !important;
            outline: 0 none !important;
            border: 1px solid $warning-color !important;
            border-radius: 3px;
        }

        // Preserve original invalid style used by other validations
        .is-invalid {
            box-shadow: none;
            outline: 0 none;
            border: 1px solid $warning-color !important;
            border-radius: 3px;

            &:hover {
                box-shadow: 0px 0px 1px 1px $warning-color !important;
                border: 1px solid $warning-color !important;
            }
        }

    }

    .input-inline-value {
        width: calc(100% - 8px);
        height: 36px;
        line-height: 36px;
        border-radius: 3px;
        padding: 0px 0px 0px 8px;
        font-weight: bold;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &:hover {
            background-color: $disabled-fill-color;
        }
    }
}