@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

// fonts
$font-main: (
    font-family: $font-family-default,
    font-size: 1em,
    font-weight: normal,
    font-line-height: 1em,
    font-text-align: left
);

$font-tooltip: (
    font-family: map-get($font-main, font-family),
    font-size: map-get($font-main, font-size),
    font-weight: map-get($font-main, font-weight),
    font-line-height: map-get($font-main, font-line-height),
    font-text-align: map-get($font-main, font-text-align)
);

// labels
$font-label-title: (
    font-family: map-get($font-main, font-family),
    font-size: $label-title-font-size,
    font-weight: bold,
    font-line-height: map-get($font-main, font-line-height),
    font-text-align: map-get($font-main, font-text-align)
);

$font-label-value: (
    font-family: map-get($font-main, font-family),
    font-size: $label-value-font-size,
    font-weight: map-get($font-main, font-weight),
    font-line-height: 18px,
    font-text-align: map-get($font-main, font-text-align)
);

$font-label-percentage: (
    font-family: map-get($font-main, font-family),
    font-size: $label-per-font-size,
    font-weight: map-get($font-main, font-weight),
    font-line-height: map-get($font-main, font-line-height),
    font-text-align: map-get($font-main, font-text-align)
);

// tooltip
.d3-funnel-js-tooltip {
    pointer-events: none;
    font-size: .8em;
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    white-space: wrap;
    min-width: 140px;
    width: auto;
    height: 30px;
    transition: opacity 0.2s;

    @include apply-font($font-tooltip);

    padding: $tooltip-padding;
    border-radius: $tooltip-border-radius;
    border: $tooltip-border;
    background-color: $tooltip-bg;
    color: $tooltip-color;
    z-index: $tooltip-z-index;
}

.d3-funnel-js {

    @include apply-font($font-main);

    display: block;
    margin: auto;

    .label__group {

        .label__value {
            @include apply-font($font-label-value);
            fill: $label-value-color;
        }

        .label__title {
            @include apply-font($font-label-title);
            fill: $label-title-color;
        }

        .label__percentage {
            @include apply-font($font-label-percentage);
            fill: $label-per-color;
        }

    }

    .divider {
        stroke: $divider-stroke ;
        stroke-width: $divider-stroke-width;
    }

}