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

#risk-group-dialog
{
    &-standard,
    &-individual
    {
        .row .column.title
        {
            font-weight: bold;
            color: $color-text-darker;
        }
    }

    &-standard
    {
        .details
        {
            border-left: 1px solid $color-border-normal;
            border-right: 1px solid $color-border-normal;
            border-bottom: 1px solid $color-border-normal;
        }

        .row
        {
            &.heading
            {
                @include dialog-content-spacing;
            }

            .column.title
            {
                border-top: 1px solid $color-border-normal;
                border-bottom: 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;
                }
            }
        }
    }

    &-individual
    {
        .details
        {
            @include dialog-content-spacing;

            border-left: 1px solid $color-border-normal;
            border-right: 1px solid $color-border-normal;
            border-top: 1px solid $color-border-normal;
        }

        .row
        {
            display: flex;
            border-bottom: 1px solid $color-border-normal;

            .column
            {
                padding-left: steps(2);
                padding-right: steps(2);
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                &.title
                {
                    border-right: 1px solid $color-border-normal;
                    flex: 2;
                }
            }
        }
    }
}

#discount-dialog
{
    @include for-at-least-tablets
    {
        .field,
        .button
        {
            display: inline-block;

            vertical-align: top;
        }

        .field
        {
            margin-right: steps(2);
            margin-bottom: 0;
        }
    }
}

.dialog.price-change
{
    @include alert-dialog;

    .amount
    {
        font-weight: bold;

        .value
        {
            color: $color-brand-darker;
        }
    }
}
