@trutoo/funnel-graph/dist/index.css

SVG Funnel Graph TypeScript Library.

:root {
  --text: MidnightBlue;
  --primary: MidnightBlue;
  --accent: Crimson;
  --backdrop: rgba(0, 0, 0, 0.75);
  --backdrop-text: #ffffff;
}

.fg {
  position: relative;
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji
}

.fg svg {
    display: block
  }

.fg svg path,
    .fg svg stop {
      transition: all 400ms ease;
    }

.fg.fg--vertical {
    padding-left: 120px;
    padding-right: 16px
  }

.fg.fg--vertical .fg-labels {
      flex-direction: column;
    }

.fg.fg--vertical .fg-label {
      padding-top: 24px
    }

.fg.fg--vertical .fg-label:not(:first-child) {
        border-top: 1px solid Crimson;
        border-top: 1px solid var(--accent);
      }

.fg.fg--vertical .fg-label .fg-segments {
        margin-top: 0;
        margin-left: 106px;
        width: calc(100% - 106px)
      }

.fg.fg--vertical .fg-label .fg-segments ul {
          display: flex;
          justify-content: space-around;
        }

.fg:not(.fg--vertical) {
    padding-top: 64px;
    padding-bottom: 16px
  }

.fg:not(.fg--vertical) .fg-label {
      padding-left: 24px
    }

.fg:not(.fg--vertical) .fg-label:not(:first-child) {
        border-left: 1px solid rgba(0, 0, 0, 0.75);
        border-left: 1px solid var(--backdrop);
      }

.fg-container {
  width: 100%;
  height: 100%;
}

.fg-labels {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

.fg-label {
  flex: 1 1 0;
  position: relative
}

.fg-label .fg-label__value {
    font-size: 24px;
    color: MidnightBlue;
    color: var(--text);
    line-height: 18px;
    margin-bottom: 6px;
  }

.fg-label .fg-label__title {
    font-size: 12px;
    font-weight: bold;
    color: MidnightBlue;
    color: var(--primary);
  }

.fg-label .fg-label__percentage {
    font-size: 16px;
    font-weight: bold;
    color: Crimson;
    color: var(--accent);
  }

.fg-label .fg-label__segments {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    padding: 8px 24px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.75);
    background-color: var(--backdrop);
    margin-top: 24px;
    opacity: 0;
    transition: opacity 0.1s ease;
    cursor: default
  }

.fg-label .fg-label__segments ul {
      margin: 0;
      padding: 0;
      list-style-type: none
    }

.fg-label .fg-label__segments ul li {
        font-size: 13px;
        line-height: 16px;
        color: #ffffff;
        color: var(--backdrop-text);
        margin: 18px 0
      }

.fg-label .fg-label__segments ul li span {
          font-weight: bold;
          color: Crimson;
          color: var(--accent);
        }

.fg-label:hover .fg-label__segments {
      opacity: 1;
    }

.fg-sub-labels {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  position: absolute;
  width: 100%;
  left: 0;
}

.fg-sub-label {
  display: flex;
  font-size: 12px;
  color: MidnightBlue;
  color: var(--text);
  line-height: 16px
}

.fg-sub-label:not(:first-child) {
    margin-left: 16px;
  }

.fg-sub-label .fg-sub-label__color {
    margin: 2px 8px 2px 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
  }