@import "../../../base-styles.scss";

$offline-base-color: #c6538c;
$online-base-color: #32a852;
$connecting-color: #edad09;


$online-box-shadow: rgba(62,201,92, 0.4);
$online-box-shadow-transparent: rgba(62,201,92, 0);


$offline-box-shadow: rgba(198, 83, 140, 0.4);
$offline-box-shadow-transparent: rgba(198, 83, 140, 0);

$size: 10px;

@mixin baseAttributes() {
  margin:6px;
    display: block;
    width: $size;
    height: $size;
    border-radius: 50%;
    cursor: pointer;
}

.online-pulse {
    @include baseAttributes();
    
    background: $online-base-color;
    box-shadow: 0 0 0 $online-box-shadow;
    animation: online-pulse 3s infinite;
  }
  
  @-webkit-keyframes online-pulse {
    0% {
      -webkit-box-shadow: 0 0 0 0 $online-box-shadow;
    }
    70% {
        -webkit-box-shadow: 0 0 0 40px $online-box-shadow-transparent;
    }
    100% {
        -webkit-box-shadow: 0 0 0 0 $online-box-shadow-transparent;
    }
  }
  @keyframes online-pulse {
    0% {
      -moz-box-shadow: 0 0 0 0 $online-box-shadow;
      box-shadow: 0 0 0 0 $online-box-shadow;
    }
    70% {
        -moz-box-shadow: 0 0 0 10px $online-box-shadow-transparent;
        box-shadow: 0 0 0 10px $online-box-shadow-transparent;
    }
    100% {
        -moz-box-shadow: 0 0 0 0 $online-box-shadow-transparent;
        box-shadow: 0 0 0 0 $online-box-shadow-transparent;
    }
  }

/** offline **/  
.offline {
  @include baseAttributes();
    background: $offline-base-color;
    box-shadow: 0 0 0 $offline-box-shadow;    
  }