/* Function  Helper
----------------------------------------------------------------------- */
.tr-dev-alert-helper {
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid $blue;
    border: 1px solid var(--tr-profile-color);
    color: #23282d;
    margin: 10px auto;

    code {
        background: rgba(238, 238, 238, 0.35);
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
        color: $blue;
        color: var(--tr-profile-color);
        padding: 4px;
        display: inline-block;
        border-radius: 4px;
    }
}

/* Input Helper
----------------------------------------------------------------------- */
.tr-dev-field-helper {
    font-weight: normal;
    display: inline-block;
    position: relative;
    top: 1px;
    color: #999999;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;

    &:hover .nav .tr-dev-field-function {
        color: $blue;
        color: var(--tr-profile-color);
    }

    .nav .tr-dev-field-function {
        margin-left: 5px;
    }
}

.tr-repeater .tr-repeater .tr-dev-field-helper {
    display: none;
}

.tr-matrix > .tr-dev-field-helper,
.tr-repeater > .tr-dev-field-helper {
    margin-bottom: 10px;
}

.tr-control-section .tr-dev-field-helper:hover > i,
.tr-repeater-group .tr-control-section .tr-dev-field-helper:hover > i {
    color: $dark;
    color: var(--tr-profile-color);
}

.tr-control-section:hover .tr-dev-field-helper .nav,
.tr-repeater-group .tr-control-section .tr-dev-field-helper:hover .nav {
    opacity: 1;
}

.tr-dev-field-helper .nav,
.tr-repeater-group .tr-control-section .tr-dev-field-helper .nav {
    display: inline-block;
    -webkit-transition: opacity 0.5s ease-out;
    opacity: 0;
    max-width: 350px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    line-height: 1em;
}

/* Mobile
----------------------------------------------------------------------- */
@media screen and (max-width: 782px) {
    #wpbody .tr-control-label .tr-dev-field-helper {
        display: none;
    }
}