/* 其他可供全域使用樣式屬性 */

.d-flex {
  display: flex;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-end {
  align-items: end;
}

.start-100 {
  left: 100% !important;
}

.top-0 {
  top: 0 !important;
}

.position-absolute {
  position: absolute !important;
}

.position-relative {
  position: relative !important;
}

.position-sticky {
  position: sticky !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.badge {
  --scm-badge-padding-x: 0.65em;
  --scm-badge-padding-y: 0.35em;
  --scm-badge-font-size: 0.75em;
  --scm-badge-font-weight: 700;
  --scm-badge-color: #fff;
  --scm-badge-bg-color: #999;
  --scm-badge-border-radius: 50rem;
  display: inline-block;
  padding: var(--scm-badge-padding-y) var(--scm-badge-padding-x);
  font-size: 12px;
  line-height: 1;
  color: var(--scm-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--scm-badge-border-radius);
  background-color: var(--scm-badge-bg-color);
}

/* 截斷文字 */
/***********
line-clamp 屬性按特定行數截斷文字
如欲使用字數統計截斷處理，請改用 JS 處理，CSS 無法提供字數統計截斷處理。
拷貝下方紅色文字 class 添加到需要的文本上即可，最多提供至 5 行的樣式使用。
***********/
.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp.line2 {
  -webkit-line-clamp: 2;
}

.line-clamp.line3 {
  -webkit-line-clamp: 3;
}

.line-clamp.line4 {
  -webkit-line-clamp: 4;
}

.line-clamp.line5 {
  -webkit-line-clamp: 5;
}

/* 元素添加游標互動 pointer */
/*********** 
   增加 role="button" 將預設游標改為 pointer。
   此屬性添加到元素上用來輔助指示元素是可以互動的。
   <button> 原先就具有 cursor 的變化，所以 role 不是必須的。 
***********/
[role='button'] {
  cursor: pointer;
}