<template>
    <div
        id="deductibleBox"
        class="deductible-box">
        <span id="deductibleLabel" class="deductible-label">Deductible:</span>
        <span id="deductibleValue" class="deductible-value">{{ value }}</span>
    </div>
</template>

<script>

export default {
    name: 'deductible-box',
    props: {
        value: String
    }
};

</script>

<style lang="scss" scoped>
.deductible-box {
    display: flex;
    align-items: center;
    gap: .25rem;
}
.deductible-label {
    color: $black;
    font-weight: 600;
}
.deductible-value {
    color: $green;
    font-weight: 500;
    font-size: 1.625rem;
}
</style>
