@import '~scss/variables';
@import '~scss/mixins';

.tag {
  position: relative;
  padding-left: 22px;
  font-weight: $font-bold;

  &::before {
    content: '';
    position: absolute;
    @include vertical-center;
    left: 4px;
    width: 10px;
    height: 10px;
    border-radius: 1px;
    background-color: #329dce;
  }

  & + .tag {
    margin-left: 8px;
    &::before {
      background-color: #c7deef;
    }
  }

  span {
    color: #79879c;
  }
}

.title {
  line-height: 20px;
  font-weight: $font-bold;
  color: #404e68;
}

.chart {
  display: flex;

  .chartDetail {
    margin-left: 12px;
  }

  .circle {
    position: relative;
    height: 40px;

    :global {
      .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.leftPane {
  & > li {
    width: 230px;
    padding: 10px 12px;
    border-radius: 4px;
    background-color: $lightest;
    cursor: pointer;

    & + li {
      margin-top: 8px;
    }

    &.selected {
      background-color: #329dce;

      .tag {
        color: #fff;

        &::before {
          background-color: #ffffff;
        }

        & + .tag {
          &::before {
            background-color: #6fbadc;
          }
        }
      }

      .title {
        color: #fff;
      }
    }
  }
}

.tip {
  margin-top: -3px;
}
