.price-types
{
    @include type-selector;
}

fieldset.prices
{
    margin-bottom: 0;

    legend
    {
        @include visually-hidden;
    }

    > ul
    {
        @include column-container("li");

        > li
        {
            @include one-quarter-column;

            padding-left: $gutter;
            padding-right: $gutter;

            margin-bottom: steps(2);

            @include for-at-least-normal-tablets
            {
                position: relative;
                display: flex;

                margin-bottom: steps(4);
            }
        }
    }

    .option
    {
        @include transition("border");
        @include clickable("label.button");

        position: relative;

        padding: 0 $gutter steps(3);
        border: 1px solid $color-border-normal;
        border-radius: 8px;
        box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.22);

        text-align: center;

        &:hover
        {
            border-color: $color-border-darker;
        }

        @include for-at-least-normal-tablets
        {
            @include full-column;

            display: flex;
            flex-direction: column;

            padding-left: steps(3);
            padding-right: steps(3);
        }
    }

    p
    {
        padding: 0;
        margin: 0;
    }

    .price
    {
        margin-bottom: steps(2);

        color: $color-brand-darker;

        .integer
        {
            @include font-dimensions(55px, steps(5), -2px);

            @include for-between(steps(100), steps(114))
            {
                font-size: 46px;
            }
        }

        .fraction,
        .currency
        {
            @include baseline-box(41px, steps(5), -2px);

            @include for-between(steps(100), steps(114))
            {
                font-size: 35px;
            }
        }
    }

    .description
    {
        @include baseline-box(16px, steps(2.5), 0.5px);

        margin-bottom: steps(1.5);

        color: $color-text-lighter;
    }

    .field
    {
        @include for-at-least-normal-tablets
        {
            margin-top: auto;
        }

        input
        {
            @include visually-hidden;
            @include focus-outline;

            + label
            {
                display: block;
            }

            &:checked + label
            {
                display: inline-block;
                width: auto;
                transition: none;

                padding: 0;
                border: 0;

                background: none;
                cursor: default;

                &::before
                {
                    content: svg-image-data-url('large-checkmark', $color-text-inverted-lighter);

                    position: relative;
                    z-index: 1;

                    display: block;
                    overflow: hidden;
                    width: steps(2);
                    height: steps(2);
                    padding: steps(1.5);
                    border-radius: 50%;
                    margin: auto;

                    line-height: steps(2);
                    color: $color-text-inverted-lighter;
                    background: $color-brand-normal;
                    text-align: center;
                }

                &::after
                {
                    content: "";

                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;

                    pointer-events: none;

                    background: rgba(0, 0, 0, 0.06);
                    border-radius: 8px;
                }

                .text
                {
                    @include visually-hidden;
                }
            }
        }
    }
}

fieldset.extra-option
{
    @include transition("border");

    position: relative;

    padding: $gutter $gutter steps(3);
    border: 1px solid $color-border-normal;

    &:hover
    {
        border-color: $color-border-darker;
    }

    legend
    {
        @include visually-hidden;
    }

    legend,
    .caption
    {
        @include normal-heading;
    }

    p
    {
        margin: 0;
    }

    .description
    {
        @include baseline-box(16px, steps(2.5), 0.5px);

        .more
        {
            display: block;
            margin-top: steps(1.5);
        }
    }

    .price
    {
        @include baseline-box(38px, steps(5), 0.8px);

        margin-top: steps(1.5);
        margin-bottom: steps(1);

        color: $color-brand-darker;
        white-space: nowrap;

        .currency
        {
            font-size: 28px;
        }
    }

    .field
    {
        input
        {
            @include visually-hidden;
            @include focus-outline;

            &:not(:checked) + label
            {
                .text.checked
                {
                    display: none;
                }
            }

            &:checked + label
            {
                @include remove-icon;

                transition: none;

                padding: steps(1) 0;
                border: 0;

                color: $color-text-darker;
                background: none;
                text-align: left;
                white-space: nowrap;

                &::after
                {
                    content: "";

                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;

                    pointer-events: none;

                    background: rgba(0, 0, 0, 0.06);
                }

                .text:not(.checked)
                {
                    display: none;
                }
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        padding-left: steps(3);
        padding-right: steps(3);
        padding-bottom: $gutter;

        > .data
        {
            display: flex;
        }

        .caption
        {
            margin-bottom: 0;
        }

        .description
        {
            .more
            {
                display: inline;
                margin: 0;
            }
        }

        .meta.textual
        {
            padding-right: steps(5);
        }

        .meta.technical
        {
            margin-left: auto;

            text-align: right;
        }
    }

    @include for-desktops
    {
        .caption
        {
            margin-bottom: steps(-1);
        }

        .meta.technical
        {
            margin-top: steps(1);
        }

        .price,
        .field
        {
            display: inline-block;
            vertical-align: top;
        }

        .price
        {
            margin: 0 steps(3) 0 0;
        }
    }
}
