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

main fieldset.prices > div .standard-packages
{
    @include for-at-most-tablets
    {
        border-bottom: 1px solid $color-border-normal;
        margin-bottom: steps(1);

        .row
        {
            &.heading .column.title
            {
                display: none;
            }

            .column.title
            {
                border-bottom: 1px solid $color-border-normal;
                border-top: 1px solid $color-border-normal;

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

            .column-group .column
            {
                &:first-child
                {
                    border-right: 1px solid $color-border-normal;
                }

                &:last-child
                {
                    border-left: 1px solid $color-border-normal;
                }
            }
        }

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

            > .row > .column.title > div > .expandable-switch
            {
                display: none;
            }
        }
    }

    @include for-normal-tablets
    {
        margin-bottom: steps(2);
    }

    @include for-desktops
    {
        flex: 4;

        .row
        {
            display: flex;

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

                color: $color-text-lighter;
            }

            .column
            {
                display: flex;

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

                    > div
                    {
                        text-align: right;
                    }
                }
            }

            .column-group
            {
                flex: 3;

                .column
                {
                    justify-content: flex-end;

                    > div
                    {
                        width: 92%;
                        min-width: steps(16);
                        max-width: steps(19);
                    }
                }
            }
        }
    }

    .risk-group
    {
        @include for-desktops
        {
            &.expanded > .row .column.amount > div
            {
                border-bottom-color: $color-background-lightest;
            }

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

            > .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;
            }
        }

        .row .column.check > div
        {
            @include success-icon;

            &:before
            {
                width: steps(4.5);
                height: steps(4.5);
                margin-bottom: 0;
            }
        }
    }

    .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;
        }
    }

    .row.amounts,
    .row.actions
    {
        @include for-at-most-tablets
        {
            border-left: 1px solid $color-border-normal;
            border-right: 1px solid $color-border-normal;

            .column.title
            {
                border-bottom: none;
            }
        }

        @include for-desktops
        {
            .column.amount > div
            {
                border-left: 1px solid $color-border-normal;
                border-right: 1px solid $color-border-normal;
            }
        }
    }

    .row.actions
    {
        @include for-at-most-tablets
        {
            .column.title
            {
                border-top: none;
            }

            .column.amount .button
            {
                border-color: transparent;

                &:hover
                {
                    text-decoration: underline;
                    background: inherit;
                    color: $color-link-normal;
                }
            }
        }

        @include for-desktops
        {
            .column.amount > div
            {
                border-bottom: 1px solid $color-border-normal;
            }
        }

        .column > div
        {
            position: relative;

            .field
            {
                @include for-desktops
                {
                    margin-bottom: steps(1.5);
                }

                label:after
                {
                    content: none;
                }
            }
        }
    }
}
