/*
 * Copyright (c) 2016-present, Parse, LLC
 * All rights reserved.
 *
 * This source code is licensed under the license found in the LICENSE file in
 * the root directory of this source tree.
 */
@import 'stylesheets/globals.scss';

.strength {
  position: relative;
  width: 5px;
  cursor: pointer;
}

.grey, .red, .yellow, .green {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  margin-bottom: 3px;
  transition: background 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
}

.grey {
  background: #babaca;
}

.red {
  background: $red;
}

.yellow {
  background: $yellow;
}

.green {
  background: $green;
}

.tip {
  position: absolute;
  padding: 6px;
  border-radius: 5px;
  background: rgba(0,0,0,0.7);
  color: white;
  font-size: 13px;
  top: -36px;
  left: -99999px;
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;

  &:after {
    @include arrow('down', 7px, 5px, rgba(0,0,0,0.7));
    content: '';
    position: absolute;
    bottom: -5px;
    left: 6px;
  }
}

.strength:hover {
  .tip {
    left: -6px;
    opacity: 1;
  }
}
