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

.row
{
    &.heading > .column-group > .column > div
    {
        background: $color-background-inverted-normal;
        color: $color-text-inverted-lighter;
    }

    .column
    {
        flex: 1;
        overflow: hidden;

        > div
        {
            padding: steps(1.5) 0;
        }

        &.title > div
        {
            position: relative;
            width: 100%;
            padding-right: steps(3);

            .action
            {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 0;
                width: steps(2);
                height: steps(2);
            }
        }
    }

    .column-group
    {
        display: flex;
        width: 100%;

        .column > div
        {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    }
}

.details > .row > .column.title > div > .action,
.risk-group > .row > .column.title .action.has-dialog
{
    @include hint;
}

main fieldset.prices p.note
{
    @include alternative-text;

    margin-top: steps(2.5);
}

main fieldset.prices > div
{
    @include for-desktops
    {
        display: flex;
        margin-bottom: steps(2);
    }

    .standard-packages,
    .custom-package-definition
    {
        .risk-group
        {
            &.expanded > .row > .column.title > div > .action.expandable-switch
            {
                transform: translateY(-50%) rotate(90deg);

            }

            > .row > .column.title > div
            {
                > .action.expandable-switch
                {
                    @include transition(transform);
                }

                > .label
                {
                    font-weight: bold;
                    color: $color-text-darker;
                }
            }

            .details
            {
                .js &
                {
                    display: none;
                }

                > .row > .column.title > div > .label
                {
                    @include extra-small-text;

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

        .amount s
        {
            margin-top: steps(1.5);
            margin-bottom: steps(-1);
        }

        .price
        {
            padding: 0 steps(1);
            margin-top: steps(3);
            margin-bottom: 0;

            @include for-at-most-small-tablets
            {
                .integer
                {
                    font-size: 27px;
                }

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