@import '../environment';
@import '../shared/expandable';

main
{
    h1
    {
        margin-bottom: steps(2);

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

    .requisites
    {
        .expandable-content
        {
            h3,
            .main,
            .bank,
            .accounts
            {
                padding-left: steps(2);
                padding-right: steps(2);

                @include for-at-least-normal-tablets
                {
                    padding-left: steps(3);
                    padding-right: steps(3);
                }
            }

            .main
            {
                border-right: 1px solid $color-background-lighter;
                background-color: $color-background-lightest;

                padding-top: steps(0.5);
                padding-bottom: steps(0.5);

                @include for-at-least-normal-tablets
                {
                    padding-top: steps(1);
                    padding-bottom: steps(1)+1px;
                }

                table
                {
                    th
                    {
                        color: $color-text-darker;
                    }

                    tr:last-child
                    {
                        td
                        {
                            border-bottom: 0;
                            padding-bottom: steps(1.5);
                        }

                        @include for-at-least-normal-tablets
                        {
                            th
                            {
                                border-bottom: 0;
                            }
                        }
                    }
                }
            }

            h3
            {
                @include normal-heading;

                margin-top: steps(1.5);
                margin-bottom: steps(2);

                font-family: inherit;

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

            .bank
            {
                background-color: $color-background-normal;

                padding-top: steps(1);
                padding-bottom: steps(2);

                .logo
                {
                    margin-top: steps(1);
                    margin-bottom: steps(1);

                    img
                    {
                        display: block;
                        height: steps(2.5);
                    }

                    @include for-at-least-normal-tablets
                    {
                        margin-top: 0;
                        margin-bottom: 0;

                        img
                        {
                            height: steps(3);
                        }
                    }
                }

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

                @include for-at-least-normal-tablets
                {
                    display: table;
                    width: 100%;

                    .logo,
                    .name
                    {
                        @include normal-text;

                        width: 50%;
                        display: table-cell;
                        vertical-align: middle;
                    }
                }
            }

            .accounts
            {
                padding-bottom: steps(2);

                @include for-at-least-normal-tablets
                {
                    padding-bottom: steps(4);
                }
            }

            table
            {
                width: 100%;
                border-collapse: collapse;

                th,
                td
                {
                    @include small-text;

                    display: block;
                }

                th
                {
                    text-align: left;
                    padding-top: steps(1.5);
                }

                td
                {
                    border-bottom: 1px solid $color-border-normal;
                    padding-bottom: steps(1.5)-1px;
                }

                @include for-at-least-normal-tablets
                {
                    th,
                    td
                    {
                        @include small-text(steps(2), steps(1.5)-1px);

                        width: 50%;
                        display: table-cell;
                        border-bottom: 1px solid $color-border-normal;
                        vertical-align: top;
                    }
                }
            }
        }
    }
}
