@import 'dialogs/terms';

section.payment ul
{
    @include image-list;

    .option.special
    {
        display: block;
        width: auto;
        margin-top: steps(2);

        text-align: center;

        a
        {
            display: block;
            width: auto;
            padding: steps(2.5) steps(4.5);
        }

        .hint
        {
            display: inline-block;
            max-width: steps(28);
            height: steps(7);
            padding: $gutter;

            vertical-align: top;
        }

        @include for-at-least-normal-tablets
        {
            margin-top: steps(4);

            a
            {
                display: inline-block;
                margin-right: steps(2.5);
            }

            .hint
            {
                position: relative;

                border: 1px solid $color-border-normal;

                &::before,
                &::after
                {
                    content: "";

                    position: absolute;
                    right: 100%;

                    border: solid transparent;
                }

                &::before
                {
                    top: -1px;

                    border-right-color: $color-border-normal;
                    border-width: steps(3.5) steps(1);
                    margin-right: 1px;
                }

                &::after
                {
                    top: 0;

                    border-right-color: $color-background-lightest;
                    border-width: (steps(3.5) - 1px) (steps(1) - 1px);
                }
            }
        }
    }
}
