@import '../../../styles/mixins';

$section-content-spacing: 15px;
$section-spacing: 20px;

.additionalInfo {
    &_grid {
        @include grid-row;

        @include media-lg-up {
            display: grid;
            grid-template-rows: max-content;

            &--col-2 {
                grid-template-columns: 1fr 1fr;
            }

            &--with-sidebar {
                grid-template-columns: calc(100% / 12 * 8) calc(100% / 12 * 4);
            }

            &--with-sidebar#{&}--sidebar-left {
                grid-template-columns: calc(100% / 12 * 4) calc(100% / 12 * 8);
            }
    
            &--with-sidebar#{&}--col-2 {
                grid-template-columns: calc(100% / 12 * 4) calc(100% / 12 * 4) calc(100% / 12 * 4);
            }
        }
        @include media-xl-up {
            &--col-1 {
                grid-template-columns: 1fr;
            }

            &--col-2 {
                grid-template-columns: 1fr 1fr
            }

            &--with-sidebar {
                grid-template-columns: calc(100% / 12 * 8) calc(100% / 12) calc(100% / 12 * 3);
            }

            &--with-sidebar#{&}--sidebar-left {
                grid-template-columns: calc(100% / 12 * 3) calc(100% / 12) calc(100% / 12 * 8);
            }
    
            &--with-sidebar#{&}--col-2 {
                grid-template-columns: calc(100% / 12 * 4) calc(100% / 12 * 4) calc(100% / 12) calc(100% / 12 * 3);
            }

            &--with-sidebar#{&}--sidebar-left#{&}--col-2 {
                grid-template-columns: calc(100% / 12 * 3) calc(100% / 12) calc(100% / 12 * 4) calc(100% / 12 * 4);
            }
        }
    }

    &_info,
    &_sidebar {
        @include grid-item;
    }

    &_info + &_sidebar {
        @include media-lg-down {
            margin-top: 30px;
        }
    }

    &_info {
        @include media-xl-up {
            &--col-1 {
                grid-column: 1;
            }
            &--sidebar-left {
                grid-column: 3;
            }
            &--col-2 {
                &:nth-child(odd) {
                    grid-column: 1;
                }
                &:nth-child(even) {
                    grid-column: 2;
                }
            }
            &--sidebar-left#{&}--col-2 {
                &:nth-child(odd) {
                    grid-column: 3;
                }
                &:nth-child(even) {
                    grid-column: 4;
                }
            }
        }
    }

    &_sidebar {
        @include media-lg-down {
            margin-top: 30px;
        }
        @include media-lg-up {
            grid-column: calc(var(--info-column, 2) + 1);
            grid-row: 1 / calc(var(--info-length, 2) + 1);

            &--left {
                grid-column: 1;
            }
        }
        @include media-xl-up {
            &:not(&--left) {
                grid-column: calc(var(--info-column, 2) + 2);
            }
        }
    }

    &_header {
        @include media-xl-up {
            @include grid-row;
        }
    }

    &_title {
        @include title-2;
        line-height: 25px;
        margin-bottom: 18px;

        @include media-xl-up {
            @include grid-item;
        }
    }

    &_sectionHeader {
        @include title-3;
        line-height: 23px;
        margin-bottom: 12px;
        margin-top: 0;
    }

    &_content {
        @include text-4;
        line-height: 25px;
        
        & + & {
            margin-top: $section-content-spacing;
        }
    }

    &_label {
        display: inline-block;
        margin-right: 10px; 
    }

    &_name {
        display: block;
    }

    &_description {
        margin: 0;
    }

    &_description + &_content {
        margin-top: $section-content-spacing;
    }

    &_link {
        @include link-colors($link-text-color);
        display: inline-block;
        word-break: break-all;

        &:hover, &focus {
            text-decoration: underline;
        }
    }


    // Extra spacing between info column
    &_info--col-1 + &_info--col-1 &_sectionHeader {
        margin-top: $section-spacing;
    }
    &_info--col-2 + &_info--col-2 &_sectionHeader {
        @include media-lg-down {
            margin-top: $section-spacing;
        }
    }
}
