@import '../../style/themes/index';
@import '../../style/mixins/index';

.tooltip {
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-around;
  color: rgba(251, 251, 251, 1);
  &-inner-light {
    .tooltip-item {
      background: rgba(255, 255, 255, 0.9);
      color: #888;
    }
  }

  &-item {
    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
    background: rgba(2, 2, 2, 0.8);
    padding: 10px;
    border-radius: @border-radius-base;
    color: rgba(251, 251, 251, 1);
  }

  &-header {
    margin-bottom: var(--gap);
  }

  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #999;
    font-size: 14px;
  }

  &-sub {
    margin-top: 18px;

    &-cell {
      display: flex;
      justify-content: space-between;
      align-items: center;
      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100px;
        &:first-child {
          width: 60px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            &:nth-child(1) {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              margin-right: 10px;
            }
          }
        }
        &:last-child {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          align-items: center;
        }
        span {
          font-size: 12px;
        }
      }
    }
  }
}

.tooltip-light,
.tooltip-dark {
  box-shadow: none !important;
}