/* Avatar Component Styles
 * 
 * Colors used:
 * - var(--dhcs-color-primary) = ColorConstants.Brand.DhcsBlue
 * - var(--dhcs-color-text-white) = ColorConstants.Text.White
 * 
 * This file contains global styles for the Avatar component.
 * Must be referenced in the consuming application's App.razor or index.html.
 */

/* Avatar wrapper - inline-block to size to content */
.dhcs-avatar-wrapper {
  display: inline-block;
  border-radius: 50%;
}

/* Avatar sizing */
.dhcs-avatar-wrapper .mud-avatar-medium {
  width: 48px;
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

/* Filled variant styles */
.dhcs-avatar-filled .mud-avatar {
  background-color: var(--dhcs-color-primary) !important;
  color: var(--dhcs-color-text-white) !important;
}

/* Outlined variant styles */
.dhcs-avatar-outlined .mud-avatar {
  background-color: transparent !important;
  color: var(--dhcs-color-primary) !important;
  border-left-width: 2px;
  border-right-width: 2px;
  border-top-width: 2px;
  border-bottom-width: 2px;
  border-style: solid;
  border-color: var(--dhcs-color-primary) !important;
}

/* Remove default focus outline */
.dhcs-avatar-focusable:focus {
  outline: none;
}

/* Hover state - cursor and subtle visual feedback */
.dhcs-avatar-focusable:hover {
  cursor: pointer;
}

.dhcs-avatar-filled.dhcs-avatar-focusable:hover .mud-avatar {
  opacity: 0.9;
}

.dhcs-avatar-outlined.dhcs-avatar-focusable:hover .mud-avatar {
  background-color: rgba(23, 49, 90, 0.05) !important;
}

/* Focus ring - only show on keyboard navigation, not on click */
.dhcs-avatar-filled.dhcs-avatar-focusable:focus-visible .mud-avatar {
  box-shadow:
    0 0 0 3px var(--dhcs-color-bg-white),
    0 0 0 5px var(--dhcs-color-primary);
}

.dhcs-avatar-outlined.dhcs-avatar-focusable:focus-visible .mud-avatar {
  border-left-width: 3px;
  border-right-width: 3px;
  border-top-width: 3px;
  border-bottom-width: 3px;
}