$badge-fill: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
$focus-ring-color: var(--wds-color-blue-100, var(--wsr-color-B10, #116dff));
$success-text: var(--wds-color-green-100, var(--wsr-color-G10, #25a55a));
$standard-accent: var(--wsr-color-A1, #1684ea);

.funnel-chart {
  height: 100%;
  display: flex;
  flex-direction: column;

  &__funnel {
    display: flex;
    height: 150px;
    justify-content: space-between;
    justify-items: flex-end;
    border-bottom: 1px solid
      var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  }

  &__funnel--full-height {
    flex-grow: 1;
    height: auto;
  }

  &__labels {
    padding-top: 18px;
    display: flex;
    justify-content: space-between;
  }

  &__label-wrapper {
    z-index: 1;
    text-align: left;
    flex: 1 1 0px;
    margin-right: 24px;
    width: 0;
  }

  &__label {
    display: flex;
    flex-direction: column;
  }

  &__bar {
    position: relative;
    z-index: 1;
    width: 18px;
    background: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
  }

  &__bar-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: $standard-accent;
  }

  &__step {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex-grow: 1;
  }

  &__step--skin-standard &__step-shape,
  &__step--skin-standard &__step-placeholder {
    background: var(--wds-color-blue-500, var(--wsr-color-B50, #e7f0ff));
  }

  &__step--skin-success &__step-shape,
  &__step--skin-success &__step-placeholder {
    background: var(--wds-color-green-600, var(--wsr-color-G60, #e9f6ee));
  }

  &__step-shape-rotated {
    width: 102%;
    transform: translateY(1px);
    clip-path: polygon(0 0, 0 100%, 102% 100%);
  }

  &__step-shape {
    box-sizing: border-box;
  }

  &__step-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 102%;
    transform: translate(-1px, 2px);
    clip-path: polygon(0 0, 0 100%, 102% 100%);
  }

  &__step--next-bar-is-flat &__step-placeholder {
    transform: translate(-1px, 0px);
  }

  &__badge-wrapper {
    position: absolute;
    left: 50%;
    transform: translate(calc(-50% - 12px), calc(-50%));
  }

  &__badge-wrapper--top {
    transform: translate(calc(-50%), calc(-50% - 10px));
  }

  &__badge {
    position: relative;
    box-sizing: border-box;
    height: 20px;
    text-align: center;
    border-radius: 2px;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
    border: 1px solid;
  }

  &__badge:focus-visible {
    box-shadow: 0 0 4px 2px $focus-ring-color;
  }

  &__badge::before {
    position: absolute;
    top: 50%;
    right: -1px;
    box-sizing: border-box;
    width: 14.5px;
    height: 14.5px;
    content: '';
    transform: translate(42%, -50%) rotate(-45deg);
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
    border-right: 1px solid;
    border-bottom: 1px solid;
    border-radius: 2px;
  }

  &__badge:focus-visible::before {
    box-shadow: 3px 3px 4px 0 $focus-ring-color;
  }

  &__badge--skin-standard,
  &__badge--skin-standard::before {
    border-color: $standard-accent;
    background: $badge-fill;
    color: $standard-accent;
  }

  &__badge--skin-general,
  &__badge--skin-general::before {
    border-color: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
    background: $badge-fill;
    color: #868aa5;
  }

  &__badge--skin-success,
  &__badge--skin-success::before {
    border-color: var(--wds-color-green-400, var(--wsr-color-G40, #c8e8d6));
    background: $badge-fill;
    color: $success-text;
  }

  // repeated class required: __badge-text is a Heading root; without it this no longer outranks Heading's own state selectors
  &__badge--skin-standard &__badge-text#{&}__badge-text {
    color: $standard-accent;
  }

  // repeated class required: __badge-text is a Heading root; without it this no longer outranks Heading's own state selectors
  &__badge--skin-general &__badge-text#{&}__badge-text {
    color: #000624;
  }

  // repeated class required: __badge-text is a Heading root; without it this no longer outranks Heading's own state selectors
  &__badge--skin-success &__badge-text#{&}__badge-text {
    color: $success-text;
  }

  &__badge-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 35px;
    height: 100%;
    padding: 0 1px;
  }

  &__dark-badge {
    border-radius: 2px;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
  }

  &__dark-badge:focus-visible {
    box-shadow: 0 0 4px 2px $focus-ring-color;
  }
}