/******************************************************************************
 * Copyright 2009-2020 Exactpro (Exactpro Systems Limited)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ******************************************************************************/

@import "./common/vars";

@mixin ml-icon {
    &-icon {
        background-size: 100%;
        width: $ml-icon-size;
        height: $ml-icon-size;

        &.inactive {
            background-image: url(../../resources/icons/ml-message.svg);
            filter: opacity(0.2);
        }

        &.active {
            background-image: url(../../resources/icons/ml-message.svg);
            filter: opacity(0.8);
        }

        &.submitted {
            background-image: url(../../resources/icons/ml-message-submitted.svg);
            filter: opacity(0.8);
        }

        &.not-required {
            background-image: url(../../resources/icons/ml-message-submitted.svg);
            filter: opacity(0.2);
        }
    }
}

@mixin ml-counter {
    &-counter {
        margin-left: 4px;
        font-size: 11pt;
        font-weight: bold;

        &.active {
            color: $ml-gray-color;
        }

        &.submitted {
            color: $ml-accent-color;
        }
    }
}

@mixin ml-indicator {
    &-indicator {
        height: $ml-icon-size;
        display: flex;
        flex-direction: row;

        &-text {
            font-size: 13px;
            height: 18px;
            margin: 2px;

            &.submitted {
                color: $ml-accent-color;
            }

            &.not-required {
                opacity: 0.4;
                color: $ml-accent-color;
            }

            &.unavailable {
                opacity: 0.4;
            }
        }
    }
    
}