.icon {
  display: block;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  mask-repeat: no-repeat;
  background-color: currentColor;
}

.icon--search24 {
  mask-image: url('/assets/icons/24px/Search.svg');
  width: 24px;
  height: 24px;
}
.icon--locale14 {
  mask-image: url('/assets/icons/16px/Earth.svg');
  mask-size: cover;
  width: 14px;
  height: 14px;
}
.icon--person16 {
  mask-image: url('/assets/icons/16px/Person_Lined.svg');
  width: 16px;
  height: 16px;
}
.icon--person24 {
  mask-image: url('/assets/icons/24px/Person_Lined.svg');
  width: 24px;
  height: 24px;
}
.icon--exit16 {
  mask-image: url('/assets/icons/16px/Exit.svg');
  width: 16px;
  height: 16px;
}
.icon--close24 {
  mask-image: url('/assets/icons/24px/Close.svg');
  width: 24px;
  height: 24px;
}
.icon--chevron-right24 {
  mask-image: url('/assets/icons/24px/Chevon_Right.svg');
  width: 24px;
  height: 24px;
}
.icon--chevron-left24 {
  mask-image: url('/assets/icons/24px/Chevon_Left.svg');
  width: 24px;
  height: 24px;
}
.icon--chevron-down14 {
  mask-image: url('/assets/icons/14px/Chevon_Down.svg');
  width: 14px;
  height: 14px;
}
.icon--chevron-down16 {
  mask-image: url('/assets/icons/16px/Chevon_Down.svg');
  width: 16px;
  height: 16px;
}
.icon--chevron-down20 {
  mask-image: url('/assets/icons/20px/Chevon_Down.svg');
  width: 20px;
  height: 20px;
}
.icon--chevron-down24 {
  mask-image: url('/assets/icons/24px/Chevon_Down.svg');
  width: 24px;
  height: 24px;
}
.icon--chevron-down-filled12 {
  mask-image: url('/assets/icons/12px/Chevon_Down_Filled.svg');
  width: 12px;
  height: 12px;
}
.icon--chevron-down-filled14 {
  mask-image: url('/assets/icons/14px/Chevon_Down_Filled.svg');
  width: 14px;
  height: 14px;
}
.icon--chevron-down-filled16 {
  mask-image: url('/assets/icons/16px/Chevon_Down_Filled.svg');
  width: 16px;
  height: 16px;
}

.icon--arrow-right14 {
  mask-image: url('/assets/icons/14px/Arrow_Right.svg');
  width: 14px;
  height: 14px;
}
.icon--arrow-right16 {
  mask-image: url('/assets/icons/16px/Arrow_Right.svg');
  width: 16px;
  height: 16px;
}
.icon--arrow-right20 {
  mask-image: url('/assets/icons/20px/Arrow_Right.svg');
  width: 20px;
  height: 20px;
}

.icon--arrow-left14 {
  mask-image: url('/assets/icons/14px/Arrow_Left.svg');
  width: 14px;
  height: 14px;
}
.icon--arrow-left16 {
  mask-image: url('/assets/icons/16px/Arrow_Left.svg');
  width: 16px;
  height: 16px;
}
.icon--arrow-left20 {
  mask-image: url('/assets/icons/20px/Arrow_Left.svg');
  width: 20px;
  height: 20px;
}

.icon--plus14 {
  mask-image: url('/assets/icons/14px/Plus.svg');
  width: 14px;
  height: 14px;
}
.icon--plus16 {
  mask-image: url('/assets/icons/16px/Plus.svg');
  width: 16px;
  height: 16px;
}
.icon--plus20 {
  mask-image: url('/assets/icons/20px/Plus.svg');
  width: 20px;
  height: 20px;
}

.icon--minus14 {
  mask-image: url('/assets/icons/14px/Minus.svg');
  width: 14px;
  height: 14px;
}
.icon--minus16 {
  mask-image: url('/assets/icons/16px/Minus.svg');
  width: 16px;
  height: 16px;
}
.icon--minus20 {
  mask-image: url('/assets/icons/20px/Minus.svg');
  width: 20px;
  height: 20px;
}

.icon--search14 {
  mask-image: url('/assets/icons/16px/Search.svg'); /* Search icon 沒有 14px 的 */
  width: 14px;
  height: 14px;
}
.icon--search16 {
  mask-image: url('/assets/icons/16px/Search.svg');
  width: 16px;
  height: 16px;
}
.icon--search20 {
  mask-image: url('/assets/icons/20px/Search.svg');
  width: 20px;
  height: 20px;
}

.icon--chevron-down14 {
  mask-image: url('/assets/icons/14px/Chevon_Down.svg');
  width: 14px;
  height: 14px;
}
.icon--chevron-down16 {
  mask-image: url('/assets/icons/16px/Chevon_Down.svg');
  width: 16px;
  height: 16px;
}
.icon--chevron-down20 {
  mask-image: url('/assets/icons/20px/Chevon_Down.svg');
  width: 20px;
  height: 20px;
}

.icon--chevron-up14 {
  mask-image: url('/assets/icons/14px/Chevon_Up.svg');
  width: 14px;
  height: 14px;
}
.icon--chevron-up16 {
  mask-image: url('/assets/icons/16px/Chevon_Up.svg');
  width: 16px;
  height: 16px;
}
.icon--chevron-up20 {
  mask-image: url('/assets/icons/20px/Chevon_Up.svg');
  width: 20px;
  height: 20px;
}

.icon--trash14 {
  mask-image: url('/assets/icons/14px/Trash.svg');
  width: 14px;
  height: 14px;
}
.icon--trash16 {
  mask-image: url('/assets/icons/16px/Trash.svg');
  width: 16px;
  height: 16px;
}
.icon--trash20 {
  mask-image: url('/assets/icons/20px/Trash.svg');
  width: 20px;
  height: 20px;
}

.icon--download14 {
  mask-image: url('/assets/icons/14px/Download.svg');
  width: 14px;
  height: 14px;
}
.icon--download16 {
  mask-image: url('/assets/icons/16px/Download.svg');
  width: 16px;
  height: 16px;
}
.icon--download20 {
  mask-image: url('/assets/icons/20px/Download.svg');
  width: 20px;
  height: 20px;
}

.icon--info-lined14 {
  mask-image: url('/assets/icons/14px/Info_Lined.svg');
  width: 14px;
  height: 14px;
}
.icon--info-lined16 {
  mask-image: url('/assets/icons/16px/Info_Lined.svg');
  width: 16px;
  height: 16px;
}
.icon--info-lined20 {
  mask-image: url('/assets/icons/20px/Info_Lined.svg');
  width: 20px;
  height: 20px;
}
.icon--cancel-filled16 {
  mask-image: url('/assets/icons/16px/Cancel_Filled.svg');
  width: 16px;
  height: 16px;
}

.icon--grid14 {
  mask-image: url('/assets/icons/14px/Grid.svg');
  width: 14px;
  height: 14px;
}
.icon--grid16 {
  mask-image: url('/assets/icons/16px/Grid.svg');
  width: 16px;
  height: 16px;
}
.icon--grid20 {
  mask-image: url('/assets/icons/20px/Grid.svg');
  width: 20px;
  height: 20px;
}
.icon--check14 {
  mask-image: url('/assets/icons/14px/Check.svg');
  width: 14px;
  height: 14px;
}
.icon--calendar16 {
  mask-image: url('/onboardDining/assets/icons/16px/Calendar.svg');
  width: 14px;
  height: 14px;
}
.icon--eye {
  mask-image: url('/assets/icons/16px/Eye.svg');
  width: 16px;
  height: 16px;
}
.icon--eye-close {
  mask-image: url('/assets/icons/16px/Eye_Close.svg');
  width: 16px;
  height: 16px;
}
.icon--warning-lined {
  mask-image: url('/assets/icons/16px/Warning_Lined.svg');
  width: 16px;
  height: 16px;
}

/* #region Social icon */
.icon--facebook {
  mask-image: url('/assets/icons/social/FB.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--youtube {
  mask-image: url('/assets/icons/social/Youtube.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}

.icon--instagram {
  mask-image: url('/assets/icons/social/Instagram.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--line {
  mask-image: url('/assets/icons/social/Line.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--linkedin {
  mask-image: url('/assets/icons/social/LinkedIn.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--wechat {
  mask-image: url('/assets/icons/social/Wechat.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--weibo {
  mask-image: url('/assets/icons/social/Weibo.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--twitter {
  mask-image: url('/assets/icons/social/Twitter.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--kakao {
  mask-image: url('/assets/icons/social/Kakao.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
.icon--xing {
  mask-image: url('/assets/icons/social/Xing.svg');
  width: 24px;
  height: 24px;
  mask-size: contain;
}
/* #endregion Social icon*/

.icon--external-link16 {
  mask-image: url('/assets/icons/16px/Link3.svg');
  width: 16px;
  height: 16px;
}

/* #region Arrow Icon Button  */
/* navigation menu 上 會員公告/聯名卡專區卡片上的箭頭圖示 */
.icon--arrow-btn {
  background-color: #d0d3d740;
  border: 0.6px solid #ffffff33;
  border-radius: 50%;
  position: relative;
  display: flex !important;
  justify-content: center;
  align-items: center;
  transition-property: background-color, border-color;
  transition-duration: var(--transition-duration);
  transition-timing-function: var(--transition-timing-function);
  aspect-ratio: 1;
  backdrop-filter: blur(24px);

  &:hover {
    background-color: var(--Brand-Primary-Blue-400);
    border-color: var(--Brand-Primary-Blue-400);
  }

  /* Inner Arrow Icon */
  &::after {
    content: '';
    display: block;
    background-color: var(--brand-bw-white);
    aspect-ratio: 1;
  }

  /* 2XS */
  &.icon--2xs {
    width: 28px;
    &::after {
      width: 12px;
      mask-image: url('/assets/icons/12px/Link.svg');
    }
  }
  /* XS */
  &.icon--xs {
    width: 36px;
    &::after {
      width: 16px;
      mask-image: url('/assets/icons/16px/Link.svg');
    }
  }
  /* S */
  &.icon--s {
    width: 40px;
    &::after {
      width: 16px;
      mask-image: url('/assets/icons/16px/Link.svg');
    }
  }
  /* M */
  &.icon--m {
    width: 56px;
    &::after {
      width: 20px;
      mask-image: url('/assets/icons/20px/Link.svg');
    }
  }
  /* L */
  &.icon--l {
    width: 80px;
    &::after {
      width: 24px;
      mask-image: url('/assets/icons/24px/Link.svg');
    }
  }
  /* XL */
  &.icon--xl {
    width: 96px;
    &::after {
      width: 24px;
      mask-image: url('/assets/icons/24px/Link.svg');
    }
  }
  /* L */
  &.icon--l {
    width: 120px;
    &::after {
      width: 24px;
      mask-image: url('/assets/icons/24px/Link.svg');
    }
  }
}
/* #endregion Arrow Icon Button  */