/*------------------------------------*\
    CONTACT DETAILS
\*------------------------------------*/

@use "../../base/helpers";
@use "../../base/settings";

/// Border colour that appears above main title
/// @type Color
$contact-details__border-colour: settings.$ds_colour__border--highlight !default;

.ds_contact-details {
    $social-icon-size: 1.5rem;

    &__title {
        @include helpers.ds_responsive-padding(1, top);
        display: inline-block;
        margin-bottom: 0;
        position: relative;

        &::after {
            border-top: 0.25rem solid $contact-details__border-colour;
            content: '';
            height: 0.25rem;
            left: 0;
            position: absolute;
            right: 0;
            top: 0;
        }
    }

    &__item {
        @include helpers.ds_responsive-margin(2, top);

        dd {
            margin-top: 0;
            margin-left: 0;
        }

        dt:not(.visually-hidden) + .ds_contact-details__social-item {
            @include helpers.ds_responsive-margin(1, top);
        }
    }

    &__social-item {
        @include helpers.ds_responsive-margin(1, bottom);
        position: relative;

        &:has(.ds_contact-details__social-icon):not(:first-of-type) {
            @include helpers.ds_responsive-margin(2, top);
        }
    }

    &__social-link {
        margin-left: #{$social-icon-size + 0.5rem};
    }

    &__social-icon {
        height: $social-icon-size !important;
        pointer-events: none;
        position: absolute;
        left: 0;
        width: $social-icon-size !important;
    }

}

@include helpers.ds_media-query(medium) {
    .ds_contact-details {
        &__social-icon {
            top: 0.25rem;
        }

        // 2 Column layout
        &-grid {
            @include helpers.ds_layout();
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

@include helpers.ds_media-query(large) {
    .ds_contact-details {
        // 3 Column layout
        &-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}