@use "../helpers/variables" as vars;

// TODO:
// - Review the naming
// - Create mixins for animation

$child-font-size: 1em !important;
$letter-spacing: 0.5px;
$value-letter-spacing: 0.8px;
$enter-opacity: 0.6;

.britechart-legend {
    .legend-entry {
        font-size: vars.$text-size-medium;
    }

    .is-faded {
        .legend-entry-name,
        .legend-entry-value,
        .legend-circle {
            opacity: $enter-opacity;
            transition: opacity 0.2s ease-out;
        }
    }

    .legend-entry-name,
    .legend-entry-value,
    .legend-circle {
        // Ensure font-size can't be set on child elements
        // Allowing font-size on parent to be used in calculations
        font-size: $child-font-size;
        letter-spacing: $letter-spacing;
    }

    .legend-entry-value {
        letter-spacing: $value-letter-spacing;
        text-anchor: end;
    }
}