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

main fieldset.prices > div .custom-package-definition
{
    margin-bottom: steps(1);

    @include for-at-most-small-tablets
    {
        border-bottom: 1px solid $color-border-normal;

        .risk-group
        {
            border-left: 1px solid $color-border-normal;
            border-right: 1px solid $color-border-normal;

            &:first-child
            {
                border-top: 1px solid $color-border-normal;
            }

            > .row > .column.title > div
            {
                padding-bottom: 0;

                > .expandable-switch
                {
                    display: none;
                }
            }
        }
    }

    @include for-at-least-normal-tablets
    {
        flex: 1;
        margin-bottom: steps(2);

        .row
        {
            display: flex;

            .column
            {
                display: flex;

                &.title 
                {
                    align-items: center;
                    justify-content: flex-end;

                    > div
                    {
                        width: steps(30);
                        text-align: right;

                        > span.label
                        {
                            padding-top: 0;
                            padding-bottom: 0;
                        }
                    }
                }

                &.amount > div
                {
                    width: steps(33);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }

        .risk-group
        {
            > .row > .column.title > div > .has-dialog
            {
                display: none;
            }

            .row .column.amount > div
            {
                border-left: 1px solid $color-border-normal;
                border-right: 1px solid $color-border-normal;
            }
        }

        .details
        {
            .row:first-child .column.amount > div
            {
                border-top: none;
            }

            .row .column.amount > div
            {
                background-color: $color-background-lighter;
                border-top: 1px solid $color-background-lightest;
            }
        }
    }

    @include for-desktops
    {
        margin-bottom: 0;
    }

    .row .column.title,
    .row .column.amount > div
    {
        padding-left: steps(2);
        padding-right: steps(2);
    }

    .risk-group
    {
        @include for-at-least-normal-tablets
        {
            &:first-child > .row .column
            {
                &.title > div
                {
                    margin-top: steps(1);
                }

                &.amount > div
                {
                    padding-top: steps(3);
                    border-top: 1px solid $color-border-normal;
                }
            }
        }

        > .row.field
        {
            margin-bottom: 0;
        }
    }

    .row.amounts > .column.amount > div
    {
        border-left: 1px solid $color-border-normal;
        border-right: 1px solid $color-border-normal;

        text-align: center;

        @include for-at-least-normal-tablets
        {
            border-bottom: 1px solid $color-border-normal;
        }
    }
}
