// =================================================================
// Profile Advanced Format Settings
// =================================================================

@use "sass:math";

// Columns (Mobile)
// Controls the number of profiles in a row in the advanced format.
// Kicks in at the extra small breakpoint.
//
// Styleguide Profiles.Advanced Format.Columns Mobile
//
// Access: Public
//
// Since: 2.0.0

$profiles-advanced-cols-xs:			2 !default;

// Columns
//
// Controls the number of profiles in a row in the advanced format.
// Kicks in at the medium breakpoint.
//
// Styleguide Profiles.Advanced Format.Columns
//
// Access: Public
//
// Since: 2.0.0

$profiles-advanced-cols-md:			3 !default;

// =================================================================
// Profile Advanced Format Styles
// =================================================================

// Styles the advanced profile format.
//
// Access: Public
//
// Since: 2.0.0

.profile-format-advanced {
	@extend %clearfix;

	@if ( $enable-css-grid ) {
		@extend %grid-xs-parent;
	}
}

// A helper variable to determine which grid class to extend
// for advanced profile items at the `xs` breakpoint.
//
// Access: Private
//
// Since: 2.0.0

$_profile-adv-cols-xs: math.div( $grid-number-columns, $profiles-advanced-cols-xs );

// A helper variable to determine which grid class to extend
// for advanced profile items at the `md` breakpoint.
//
// Access: Private
//
// Since: 2.0.0

$_profile-adv-cols-md: math.div( $grid-number-columns, $profiles-advanced-cols-md );

// Styles an advanced profile item.
//
// Styleguide Components.Profile Advanced Format.profile-item-advanced
//
// Access: Public
//
// Since: 2.0.0

.profile-item-advanced {
	@extend %col-xs-#{$_profile-adv-cols-xs};
	@extend %col-md-#{$_profile-adv-cols-md};

	@include breakpoint( $md ) {
		&:nth-child( #{$profiles-advanced-cols-md}n+1 ) {
			clear: left;
		}
	}

	&:nth-child( #{$profiles-advanced-cols-xs}n+1 ) {
		clear: left;

		@include breakpoint( $md ) {
			clear: none;
		}
	}
}

// Styles an advanced profile item link.
//
// Styleguide Components.Profile Advanced Format.profile-link-advanced
//
// Access: Public
//
// Since: 2.0.0

.profile-link-advanced {
	display: block;
	padding: 0 var(--margin-small, var(--bu-spacing-sm, #{$padding-small}));
	text-align: center;
}

// Styles an advanced profile item photo.
//
// Styleguide Components.Profile Advanced Format.profile-photo-advanced
//
// Access: Public
//
// Since: 2.0.0

.profile-photo-advanced {
	height: 150px;
	margin: 0 auto var(--margin-small, var(--bu-spacing-sm, #{$margin-small}));
	overflow: hidden;
	width: 150px;
}