// _utils.scss

/* 
This is common css class only for cursor hand pointer
*/

.handPointer {
    cursor: pointer;
}

/* 
This is common css class only for display none.
We have intentionally defined this class as the bootstrap's .hide class comes with !important.
*/ 

.notDisplay {
    display: none;
}


/* 
This is common css class only for display block.
We have intentionally defined this class as the bootstrap's .show class comes with !important.
*/ 
.visible-block {
    display: block;
}

/* 
This is common css class only for 100% width.
*/ 

.full-width {
    width: 100%;
}

/* 
This is common css class only for overflow hide
*/

.hide-overflow {
    overflow-y: hidden;
}

/* 
This is common css class only for input-group-btn class.
We have intentionally defined this class as the bootstrap's .input-group-btn class makes the button stick to input/select tag when used with input-group.
*/ 

.input-group-btn.space-left {
    padding-left: 10px;
}

.input-group-btn.space-right {
    padding-right: 10px;
}


/* 
This is common css class only for input button left space.
*/ 

.input-btn-left-space {
    margin-left: 5px;
}

/* 
This is common css class only for right space.
*/

.right-space {
    margin-right: 5px;
}

/* 
This is common css class only for left space.
*/

.left-space {
    margin-left: 5px;
}

/* 
This is common css class only for bottom space.
*/

.bottom-space {
    margin-bottom: 5px;
}

/* 
This is common css class only for zero margin bottom.
*/

.zero-margin-bottom {
    margin-bottom: 0;
}


/* 
This is common css class only for z index 0.
*/ 

.zero-index {
    z-index: 0;
}

/*
This is a common css class for missing form value message
*/

.missingForm {
    background: url(/images/icons/missing.png) no-repeat scroll 0 center;
    padding-left: 22px;
    color: red;
    margin-top: 4px;
    line-height: 18px;
}

/*
This is a common css class to set font size.
*/

.lead {
    font-size: 16px;
} 

/*
This is a common css class to show trash icon on danger buttons & delete links wherever required.
*/
.trash-icon {
    background: url("/images/redesign/red-trash.svg") no-repeat center center;
    text-indent: -10000px;
    direction: ltr;
    display: inline-block;
    cursor: pointer;
    width: 20px;
    height: 20px;

    &.btn-danger {
        height: auto;

        &:hover {
            background: url("/images/redesign/white-trash.svg") $btn-danger-hover-bg no-repeat center center;
        }

    }

}

// For Modular UI Layout
.modular-section {
    background-color: $white;
    padding: 20px;
    border-radius: 3px !important;
    border: 1px solid $koala !important;
    margin: 20px 0 0;

    &.react-app-module {

        .module-title {
            display: none;
        }

    }

}

/*
This is a common css class with @mixin to style help text under form fields.
*/
.helptext {
    @include helptext();
}

/* 
This is common css class only for font weight normal bold.
*/ 

.font-weight {
    font-weight: 500;
}

/* 
This is common css class only for border bottom none.
*/ 

.border-bottom-none {
    border-bottom: none;
}

.strike-through {
    text-decoration: line-through;
}

.bold { 
    font-weight: $font-weight-bold; 
}

/*
This is common css class only for top space.
*/

.top-space {
    margin-top: 5px;
}

/*
This is common css class only for top margin.
*/
.top-margin-space {
    margin-top: 20px;
}

/*
This is common css class to input field example text.
*/

.example-text {
    color: $grey;
    font-size: $font-size-base;
}

/*
This is common css class to show text color red.
*/

.error {
    color: $red-destroy;
} 

/*
This is common css class only for required field asterisk sign.
*/

.required {
    color: $grey;
}

/*
This is a common css class to set margin zero.
*/
.no-margin {
    margin: 0;
}

/*
This is a common css class to set padding zero.
*/
.no-padding {
    padding: 0;
}

/*
This class will be used for message spacing.
*/
.message-space {
    margin: 40px 15px;
}