@import '../../environment';

main fieldset.prices > div .custom-package
{
    @include for-at-most-tablets
    {
        .table-heading,
        .amount,
        .disclaimer .text
        {
            display: none;
        }

        .disclaimer
        {
            @include alternative-text;

            margin-top: steps(2.5);
        }
    }

    @include for-desktops
    {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;

        .table-heading,
        .disclaimer,
        .amount
        {
            width: 92%;
            min-width: steps(16);
            max-width: steps(19);

            text-align: center;
            padding: steps(1.5) steps(2);
        }

        .table-heading
        {
            background: $color-background-inverted-normal;
            color: $color-text-inverted-lighter;
        }

        .amount
        {
            border: solid $color-border-normal;
            border-width: 0 1px 1px;

            .button
            {
                margin-bottom: steps(1.5);
            }
        }

        .disclaimer
        {
            flex: 1;
            padding-top: steps(2);
            border: solid $color-border-normal;
            border-width: 0 1px;            

            a
            {
                display: none;
            }
        }
    }

    .disclaimer
    {
        a,
        .text
        {
            @include baseline-box(16px, steps(2.5), 0.5px);
        }

        .text
        {
            color: $color-text-lighter;
        }
    }
}
