/* ===== ICON STYLES ===== */
/**
 * @file: components/icons.css
 * @description: 공통 아이콘 스타일
 * @components: 아이콘 크기, 색상, 정렬
 * @usage: 애플리케이션 전반에 걸쳐 사용되는 아이콘 스타일 정의
 */

.verification-icon.verified {
  color: #2ecc71;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.verification-icon.verified .material-icons-round {
  font-size: 1.2em;
  transition: color 0.2s ease;
}

.verification-icon.unverified {
  color: #dc3545;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.verification-icon.unverified .material-icons-round {
  font-size: 1.2em;
  transition: color 0.2s ease;
}

/* ===== ICON STYLES ===== */
/**
 * @file: components/icons.css
 * @description: 아이콘 관련 스타일
 * @components: 메시지 아이콘, 로그아웃 아이콘, 팔로우 아이콘
 * @usage: 각종 아이콘 요소의 스타일링
 */

/* 쪽지 아이콘 컨테이너 스타일 */
.message-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  width: 28px;
  height: 28px;
  position: relative;
  transform-origin: center;
}

.message-icon-container:hover {
  background-color: #f0f7ff;
}

/* ===== ICON STYLES ===== */
/**
 * @file: components/icons.css 
 * @description: 아이콘 관련 스타일
 * @components: 메시지 아이콘, 로그아웃 아이콘, 팔로우 아이콘
 * @usage: 각종 아이콘 요소의 스타일링
 */

/* 쪽지 아이콘 스타일 */
.message-icon {
  color: #1a73e8;
}

/* ===== ICON STYLES ===== */
/**
 * @file: components/icons.css 
 * @description: 로필 영역과 쪽지 아이콘 사이 구분선 스타일
 * @components: 메시지 아이콘, 로그아웃 아이콘, 팔로우 아이콘
 * @usage: 각종 아이콘 요소의 스타일링
 */
.divider {
  width: 1px;
  height: 20px;
  background-color: #e0e0e0;
  margin: 0 4px; /* 여백 축소 */
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/icons.css
 * @description: 아이콘 컨테이너 공통 스타일
 * @components: 아이콘 컨테이너
 * @usage: 아이콘 컨테이너 공통 스타일링
 */
.logout-icon-container,
.follow-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  width: 28px; /* 크기 축소 */
  height: 28px; /* 크기 축소 */
}

.message-icon-container:hover,
.logout-icon-container:hover,
.follow-icon-container:hover {
  background-color: #f0f7ff;
}

/* 아이콘 스타일 */
.message-icon,
.logout-icon,
.follow-icon {
  color: #1a73e8;
  font-size: 24px;
}

/* 로그아웃 아이콘 특별 스타일 */
.logout-icon {
  color: #dc3545;
}

.logout-icon-container:hover {
  background-color: #fff5f5;
}

/* ===== COMPONENTS STYLES ===== */
/**
 * @file: components/icons.css
 * @description: 팔로우 아이콘 컨테이너 공통 스타일
 * @components: 팔로우 아이콘 컨테이너
 * @usage: 팔로우 아이콘 컨테이너 공통 스타일링
 */
.follow-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color 0.2s ease;
  width: 28px; /* 크기 축소 */
  height: 28px; /* 크기 축소 */
}

.follow-icon-container:hover {
  background-color: #f0f7ff;
}

.follow-icon {
  color: #1a73e8;
  font-size: 24px;
}