ujiro99/tlt

.report-summary {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-600);
  font-weight: normal;
  letter-spacing: 0.05em;
  user-select: none;
  cursor: pointer;
  height: 30px;

  &__container {
    display: flex;
    align-items: flex-end;
    left: 0;
    top: 5px;
    transition: all ease-out 0.2s;
    padding: 4px 6px;
    border-radius: var(--radius-md);

    &:hover {
      background-color: var(--bg-gray-100);
      color: var(--text-700);
    }
  }

  &__icon {
    display: inline-block;
    width: 22px;
    height: 22px;
    fill: var(--text-500);
  }

  &__container:hover {
    .report-summary__icon {
      fill: var(--text-600);
    }
  }

  &--fixed &__container {
    position: fixed;
    top: 5px;
    left: 136px;
  }

  &__icon + &__label {
    margin-left: 4px;
  }

  &--fixed &__label {
    width: 0;
    height: 0;
    overflow: hidden;
  }

  &__label-symbol {
    margin: 0 4px;
  }

  &__circle {
    position: relative;
    width: 18px;
    height: 18px;
    margin-right: 8px;
    background: var(--bg-gray-100);
    border-radius: 50%;
  }

  &--fixed &__circle {
    margin-right: 4px;
  }
}

.pl-8 {
  padding-left: 8px;
}

.pl-5 {
  padding-left: 5px;
}

.pl-2 {
  padding-left: 2px;
}