// =================================================================
// Profile Archive Settings
// =================================================================

// Profile Image Radius
//
// Controls the shape of the profile photo.
// By default, this is set to a circle.
//
// Styleguide Profiles.Profiles Listing.Image Radius
//
// Weight: 42
//
// Access: Public
//
// Since: 1.0.0

$border-radius-profile-figure:              50% !default;

// Profile Name Color
//
// Controls the color used for profile names in the profile
// listing template.
//
// Styleguide Profiles.Profiles Listing.Name Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-profile-name:                       $color-link !default;

// Profile Title Color
//
// Controls the color used for profile titles in the profile
// listing template.
//
// Styleguide Profiles.Profiles Listing.Title Color
//
// Access: Public
//
// Since: 1.0.0
//
// Accessibility: AA

$color-profile-title:                      $color-base !default;

// =================================================================
// Profile Archive Styles
// =================================================================

// Styles for all profile listings.
//
// Styleguide Components.Profiles Listing.profile-listing
//
// Access: Public
//
// Since: 2.0.0

.profile-listing {
	@extend %clearfix;
	padding: 0;
}

// Styles for all profile items in a listing.
//
// Styleguide Components.Profiles Listing.profile-item
//
// Access: Public
//
// Since: 2.0.0

.profile-item {
	list-style: none;
	margin-bottom: var(--margin, #{$margin});
	position: relative;
}

// Styles for all profile photos.
//
// Styleguide Components.Profiles Listing.profile-photo
//
// Access: Public
//
// Since: 2.0.0

.profile-photo {
	@include border-radius( $border-radius-profile-figure );
	overflow: hidden;

	img {
		display: block;
		height: auto;
		width: 100%;
	}
}

// Styles for all profile names.
//
// Styleguide Components.Profiles Listing.profile-name
//
// Access: Public
//
// Since: 2.0.0

.profile-name {
	color: var(--profile-name-color, #{$color-profile-name});
	margin-bottom: 0;
	text-decoration: underline;
}

// Styles for all profile titles.
//
// Styleguide Components.Profiles Listing.profile-title
//
// Access: Public
//
// Since: 2.0.0

.profile-title {
	color: var(--profile-title-color, var(--bu-heading-color, #{$color-profile-title}));
	display: block;
}

// Styles for all profile links.
// Since links are usually wrapped around the whole profile,
// we leave link styling to specific child elements to avoid
// visual chaos.
//
// Styleguide Components.Profiles Listing.profile-link
//
// Access: Public
//
// Since: 2.0.0

.profile-link {
	display: block;
	text-decoration: none;

	&:hover,
	&:focus {
		.profile-name {
			text-decoration: none;
		}
	}
}