/* *****************************************************************************
*
*  Price
*
* ***************************************************************************** */

.bf-price {
    width: fit-content;

    &__dollar {
        @extend .bf-text-display-small;
    }

    &__dollarsign,
    &__cent,
    &__details {
        @extend .bf-text-display-sub-small;
    }

    &__details {
        @extend .mt-minus-2;
    }

    &--medium {
        .bf-price__dollar {
            @extend .bf-text-display-medium;
        }

        .bf-price__dollarsign,
        .bf-price__cent {
            @extend .bf-text-display-sub-medium;
        }

        .bf-price__details {
            position: relative;
            top: -0.25rem;
        }
    }

    &--large {
        .bf-price__dollar {
            @extend .bf-text-display-large;
        }
        .bf-price__dollarsign,
        .bf-price__cent {
            @extend .bf-text-display-sub-large;
        }

        .bf-price__details {
            @extend .bf-text-display-sub-medium;
            @extend .mt-minus-1;
        }
    }

    &__infos {
        font-family: $font-family-secondary;
    }

    &__upfront .bf-text-interface-large {
        line-height: 0;
    }

    sub,
    sup {
        top: inherit;
        vertical-align: inherit;
    }

    sup.bf-price__asterisk {
        top: -18%;
    }
    .small.bf-display-highlight {
        .price-superscript {
            white-space: nowrap;
            sup.bf-price__superscript {
                font-size: .5rem;
                top: -.25rem;
                margin-left: -2px;
            }
        }
    }
}