// /**
//  * Copyright © 2016 Magento. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Variables
//  _____________________________________________

@component-indicator__size: 20px;

//
//  Component grid elements
//  _____________________________________________

.component-indicator {
    border-radius: 50%;
    cursor: help;
    display: inline-block;
    height: @component-indicator__size;
    text-align: center;
    width: @component-indicator__size;

    &::before,
    &::after {
        background: @color-white;
        display: block;
        opacity: 0;
        position: absolute;
        transition: opacity .2s linear .1s;
        visibility: hidden;
    }

    &::before {
        border: 1px solid @color-gray68;
        border-radius: 1px;
        box-shadow: 0 0 2px rgba(0,0,0,.4);
        content: attr(data-label);
        font-size: @font-size__s;
        margin: 34px 0 0 -10px;
        min-width: 50px;
        padding: 4px 5px;
    }

    &::after {
        border-color: darken(@color-gray68, 8);
        border-style: solid;
        border-width: 1px 0 0 1px;
        box-shadow: -1px -1px 1px rgba(0,0,0,.1);
        content: '';
        height: 10px;
        margin: 9px 0 0 5px;
        transform: rotate(45deg);
        width: 10px;
    }

    &:hover {
        &::before,
        &::after {
            opacity: 1;
            transition: opacity .2s linear;
            visibility: visible;
        }
    }

    span {
        display: block;
        height: @component-indicator__size;
        overflow: hidden;
        width: @component-indicator__size;

        &:before {
            content: '';
            display: block;
            font-family: @icons__font-family;
            font-size: 20px;
            height: 100%;
            line-height: @component-indicator__size;
            width: 100%;
        }
    }

    &._on {
        background: @color-success;
    }

    &._off {
        background: @color-failed;

        span {
            &:before {
                background: @color-white;
                height: 4px;
                margin: 8px auto 20px;
                width: 12px;
            }
        }
    }

    &._info {
        background: transparent;

        span {
            width: 21px;

            &:before {
                color: @color-info;
                content: @icon-notice-messages__content;
                font-family: @icons__font-family;
                font-size: 21px;
            }
        }
    }
}