@charset "UTF-8";
/*
 * itsm.scss
 *
 * Copyright 2025 Brainzcompany Co., Ltd.
 * https://www.brainz.co.kr
 */
/*
 * @file utilities/_functions.scss
 * @description 공통으로 사용하고자 하는 함수들을 정의합니다.
 * @version 1.0
 */
/*
 * @file utilities/_common.scss
 * @description 공통 믹스인
 * @version 1.0
 */
/*
 * @file utilities/_animation.scss
 * @description 애니메이션 Mixin
 */
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes count {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes dots {
  0%, 20% {
    content: "";
  }
  40% {
    content: ".";
  }
  60% {
    content: "..";
  }
  80%, 100% {
    content: "...";
  }
}
@keyframes spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  30% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.1);
  }
  20% {
    transform: scale(1);
  }
}
@keyframes moving {
  0% {
    width: 0;
  }
  100% {
    width: 0.75rem;
  }
}
/*
 * @file utilities/_border.scss
 * @description 테두리 Mixin
 */
/*
 * @file utilities/_image.scss
 * @description 이미지 관련 Mixin
 * @version 1.0
 */
/*
 * @file utilities/_position.scss
 * @description 위치 관련 Mixin
 * @version 1.0
 */
/*
 * @file utilities/_respond.scss
 * @description 반응형 관련 Mixin
 * @version 1.0
 */
/*
 * @file components/_reset.scss
 * @description Customize CSS Reset (http://meyerweb.com/eric/tools/css/reset/)
 * @version 1.0
 */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1rem;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

template {
  display: none;
}

input, button, select, optgroup, textarea {
  max-width: 100%;
  margin: 0;
  border: none;
  background-color: var(--color-gray-000);
  font-family: inherit;
  font-size: 100%;
  line-height: 1.2;
}

/*
 * @file base/_colors.scss
 * @description 애플리케이션 전체에서 사용되는 색상 리스트
 */
/*
 * @file base/_typography.scss
 * @description 글꼴 관련 설정
 *
 * v3.1.2 = Pretendard 표준 폰트
 * v3.1.3 = NotoSansCJK 표준 폰트 - 다국어 지원시 언어마다 폰트가 다르니 주의 바람
 */
/*$font-face-map: (
  'Pretendard-Thin.woff2': 100,
  'Pretendard-ExtraLight.woff2': 200,
  'Pretendard-Light.woff2': 300,
  'Pretendard-Regular.woff2': 400,
  'Pretendard-Medium.woff2': 500,
  'Pretendard-SemiBold.woff2': 600,
  'Pretendard-Bold.woff2': 700,
  'Pretendard-ExtraBold.woff2': 800,
  'Pretendard-Black.woff2': 900
);*/
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Thin.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Thin.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-DemiLight.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-DemiLight.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Light.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Light.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Regular.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Regular.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Medium.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Medium.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Bold.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Bold.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/ko/NotoSansCJK-Black.woff2") format("woff2"), url("../../assets/fonts/ko/NotoSansCJK-Black.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+AC00-D7A3, U+1100-11FF, U+3130-318F, U+A960-A97F, U+D7B0-D7FF;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Thin.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Thin.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-ExtraLight.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-ExtraLight.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Light.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Light.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Regular.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Regular.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Medium.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Medium.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Bold.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Bold.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007F;
}
@font-face {
  src: local("Noto Sans"), url("../../assets/fonts/en/NotoSans-Black.woff2") format("woff2"), url("../../assets/fonts/en/NotoSans-Black.woff") format("woff");
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  unicode-range: U+0020-007F;
}
.font__thin {
  font-weight: 100 !important;
}

.font__extra-light {
  font-weight: 200 !important;
}

.font__light {
  font-weight: 300 !important;
}

.font__regular {
  font-weight: 400 !important;
}

.font__medium {
  font-weight: 500 !important;
}

.font__semi-bold {
  font-weight: 600 !important;
}

.font__bold {
  font-weight: 700 !important;
}

.font__extra-bold {
  font-weight: 800 !important;
}

.font__black {
  font-weight: 900 !important;
}

.text__3xl {
  font-size: 2rem !important;
}

.text__2xl {
  font-size: 1.5rem !important;
}

.text__xl {
  font-size: 1.25rem !important;
}

.text__base {
  font-size: 1rem !important;
}

.text__l {
  font-size: 1.125rem !important;
}

.text__m {
  font-size: 0.875rem !important;
}

.text__s {
  font-size: 0.75rem !important;
}

.text__xs {
  font-size: 0.625rem !important;
}

.text__underline {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
}

.text__through {
  text-decoration-line: line-through;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
}

.text__overline {
  text-decoration-line: overline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
}

.text__underline--hover {
  text-decoration: none;
  cursor: pointer;
}
.text__underline--hover:hover {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
}

.text__highlight {
  display: inline;
  box-shadow: inset 0 -0.5em 0 0.0625rem rgba(250, 223, 45, 0.6);
  padding: 0 0.25rem;
}

.text__description {
  color: var(--desc-color);
}

.text__message {
  color: var(--message-color);
  font-size: 0.75rem;
  font-weight: 400;
}

.text__sub {
  color: var(--sub-color);
  font-size: 0.625rem;
  font-weight: 400;
}

.text__ellipsis {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}

.text__ellipsis--multi {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: break-word;
}

.text__ellipsis--3lines {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: break-word;
}

.text__ellipsis--4lines {
  display: -webkit-box;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: break-word;
}

.text__word-wrap {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: pre-line;
}

.text__word-no-wrap {
  white-space: nowrap;
}

.text__pre {
  white-space: pre;
}

.text__pre-wrap {
  white-space: pre-wrap;
}

.text__break-all {
  word-break: break-all;
}

.text__break-word {
  word-break: break-word;
}

.text__balanced {
  text-wrap: balance;
}

.pointer {
  cursor: pointer !important;
}

:root {
  --color-gray-000: #FFFFFF;
  --color-gray-003: #F5F7F9;
  --color-gray-005: #EFF1F5;
  --color-gray-010: #DFE2EC;
  --color-gray-015: #CFD4E2;
  --color-gray-020: #C1C7D9;
  --color-gray-030: #A4ACC4;
  --color-gray-040: #8C94B0;
  --color-gray-050: #767E9C;
  --color-gray-060: #606885;
  --color-gray-070: #4D536F;
  --color-gray-080: #3B4158;
  --color-gray-090: #2B2F42;
  --color-gray-100: #1C1E2B;
  --color-gray-110: #0D0E14;
  --color-blue-000: #EDF3FF;
  --color-blue-005: #D1E1FF;
  --color-blue-010: #B4D0FF;
  --color-blue-015: #97C0FF;
  --color-blue-020: #7AB0FF;
  --color-blue-030: #4C95FF;
  --color-blue-040: #237CFF;
  --color-blue-050: #0066FF;
  --color-blue-060: #0052F7;
  --color-blue-070: #003FEB;
  --color-blue-080: #002AD4;
  --color-blue-090: #0016A5;
  --color-blue-100: #000767;
  --color-blue-110: #000033;
  --color-red-005: #FDEFEC;
  --color-red-010: #FCDFD9;
  --color-red-020: #F7AFA1;
  --color-red-030: #F48771;
  --color-red-040: #F05F42;
  --color-red-050: #DE3412;
  --color-red-060: #BD2C0F;
  --color-red-070: #97230C;
  --color-red-080: #791C0A;
  --color-red-090: #611608;
  --color-orange-005: #FFF8E9;
  --color-orange-010: #FFEDD1;
  --color-orange-020: #FFDC9C;
  --color-orange-030: #FFC46C;
  --color-orange-040: #FFAC47;
  --color-orange-050: #FF850A;
  --color-orange-060: #DB6707;
  --color-orange-070: #B74C05;
  --color-orange-080: #933603;
  --color-orange-090: #7A2601;
  --color-vivid-green-005: #E3F9E5;
  --color-vivid-green-010: #C5F1C9;
  --color-vivid-green-020: #9CE6A1;
  --color-vivid-green-030: #6DD873;
  --color-vivid-green-040: #49CB51;
  --color-vivid-green-050: #26BD30;
  --color-vivid-green-060: #20A32A;
  --color-vivid-green-070: #1B8824;
  --color-vivid-green-080: #176E1F;
  --color-vivid-green-090: #125319;
  --color-cyan-005: #E8F9FA;
  --color-cyan-010: #DCFAFA;
  --color-cyan-020: #B8F5F3;
  --color-cyan-030: #91EBEB;
  --color-cyan-040: #67DDE0;
  --color-cyan-050: #47D1DE;
  --color-cyan-060: #30A8C0;
  --color-cyan-070: #2181A1;
  --color-cyan-080: #155E81;
  --color-cyan-090: #0C446B;
  --color-yellow-005: #FEFDEB;
  --color-yellow-010: #FEFBD4;
  --color-yellow-020: #FEF6AB;
  --color-yellow-030: #FDF080;
  --color-yellow-040: #FBE961;
  --color-yellow-050: #FADF2D;
  --color-yellow-060: #D7BC20;
  --color-yellow-070: #B39A16;
  --color-yellow-080: #907A0E;
  --color-yellow-090: #776308;
  --color-green-010: #D8EEDD;
  --color-green-030: #7EC88E;
  --color-green-050: #228738;
  --color-green-070: #285D33;
  --color-green-090: #19391F;
  --color-system-blue-005: #E0F3FF;
  --color-system-blue-010: #D6EDFC;
  --color-system-blue-020: #AFD9F9;
  --color-system-blue-030: #7FBBF1;
  --color-system-blue-040: #5A9CE2;
  --color-system-blue-050: #2F81E9;
  --color-system-blue-060: #2559A8;
  --color-system-blue-070: #19428D;
  --color-system-blue-080: #102E71;
  --color-system-blue-090: #091F5E;
  --color-violet-005: #FBF0FE;
  --color-violet-010: #F6DFFE;
  --color-violet-020: #EAC0FD;
  --color-violet-030: #D89FF9;
  --color-violet-040: #C585F3;
  --color-violet-050: #A95EEB;
  --color-violet-060: #8444CA;
  --color-violet-070: #632FA9;
  --color-violet-080: #451D88;
  --color-violet-090: #301270;
  --color-pink-005: #FEF1F4;
  --color-pink-010: #FEE0E7;
  --color-pink-020: #FEC1D5;
  --color-pink-030: #FCA1C9;
  --color-pink-040: #FA89C6;
  --color-pink-050: #F763C1;
  --color-pink-060: #D448AF;
  --color-pink-070: #B1319C;
  --color-pink-080: #8F1F87;
  --color-pink-090: #731376;
  --color-indigo-005: #F1F5FE;
  --color-indigo-010: #E1E9FE;
  --color-indigo-020: #C3D2FE;
  --color-indigo-030: #A4BAFC;
  --color-indigo-040: #8DA5FA;
  --color-indigo-050: #6885F7;
  --color-indigo-060: #4C64D4;
  --color-indigo-070: #3448B1;
  --color-indigo-080: #21308F;
  --color-indigo-090: #131F76;
  --semantic-primary-base: #0066FF;
  --semantic-primary-font: #FFFFFF;
  --semantic-primary-mix-base: white;
  --semantic-primary-overlay: 0, 0, 0;
  --semantic-error-base: #DE3412;
  --semantic-error-font: #FFFFFF;
  --semantic-error-mix-base: white;
  --semantic-error-overlay: 0, 0, 0;
  --elevation-color-1: rgba(96, 104, 133, 0.2);
  --elevation-color-2: rgba(96, 104, 133, 0.3);
  --elevation-color-3: rgba(96, 104, 133, 0.3);
  --elevation-color-4: rgba(96, 104, 133, 0.3);
  --header-color: var(--color-gray-100);
  --title-color: var(--color-gray-090);
  --desc-color: var(--color-gray-050);
  --message-color: var(--color-gray-070);
  --sub-color: var(--color-gray-050);
  --copyright-color: var(--color-gray-060);
  --link-text-color: var(--color-gray-090);
  --link-text-color-hover: var(--color-gray-090);
  --link-text-color-focus: var(--color-blue-050);
  --link-text-color-active: var(--color-blue-050);
  --link-text-color-visited: var(--color-gray-090);
  --link-text-color-primary: var(--color-blue-050);
  --link-text-color-hover-primary: var(--color-blue-040);
  --link-text-color-focus-primary: var(--color-blue-060);
  --link-text-color-active-primary: var(--color-blue-060);
  --link-text-color-visited-primary: var(--color-blue-050);
  --color-error: #D90C25;
  --color-on-accent: #FFFFFF;
  --text-color: var(--color-gray-090);
  --text-color-hover: var(--color-gray-090);
  --text-color-focus: var(--color-gray-090);
  --text-color-active: var(--color-gray-090);
  --text-color-readonly: var(--color-gray-050);
  --text-color-disabled: var(--color-gray-030);
  --text-color-placeholder: #CFD4E2;
  --text-color-error: var(--color-gray-090);
  --bg-color: #EFF1F5;
  --bg-color-hover: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --bg-color-focus: #FFFFFF;
  --bg-color-active: #FFFFFF;
  --bg-color-readonly: #F5F7F9;
  --bg-color-disabled: #F5F7F9;
  --bg-color-error: #FFFFFF;
  --line-color: #EFF1F5;
  --line-color-hover: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --line-color-focus: color-mix(in srgb, var(--semantic-primary-base) 70%, var(--semantic-primary-mix-base));
  --line-color-active: var(--semantic-primary-base);
  --line-color-readonly: #F5F7F9;
  --line-color-disabled: #F5F7F9;
  --line-color-error: #D90C25;
  --h-bar-color-1: #DFE2EC;
  --h-bar-color-2: #CFD4E2;
  --h-bar-color-3: #4D536F;
  --icon-color: var(--color-gray-070);
  --icon-color-hover: var(--color-blue-030);
  --icon-color-focus: var(--color-blue-030);
  --icon-color-active: var(--color-blue-050);
  --icon-color-readonly: var(--color-gray-030);
  --icon-color-disabled: var(--color-gray-030);
  --icon-color-error: #D90C25;
  --select-option-line-color: var(--color-gray-003);
  --select-option-bg-color: var(--color-gray-000);
  --select-option-item-text-color: var(--color-gray-070);
  --select-option-item-text-color-hover: var(--color-gray-070);
  --select-option-item-text-color-selected: var(--color-blue-050);
  --select-option-item-text-color-selected-hover: var(--color-blue-050);
  --select-option-item-bg-color: var(--color-gray-000);
  --select-option-item-bg-color-hover: var(--color-blue-000);
  --select-option-item-bg-color-selected: var(--color-gray-000);
  --select-option-item-bg-color-selected-hover: var(--color-blue-000);
  --select-option-item-line-color: var(--color-gray-000);
  --select-option-item-line-color-hover: var(--color-blue-000);
  --select-option-item-line-color-selected: var(--color-gray-000);
  --select-option-item-line-color-selected-hover: var(--color-blue-000);
  --box-line-color: var(--color-gray-015);
  --box-line-color-hover: var(--color-gray-015);
  --box-line-color-focus: var(--color-blue-030);
  --box-line-color-active: var(--color-blue-050);
  --box-line-color-readonly: var(--color-gray-015);
  --box-line-color-disabled: var(--color-gray-015);
  --box-line-color-selected: var(--color-blue-050);
  --box-line-color-selected-hover: var(--color-blue-050);
  --box-line-color-error: #D90C25;
  --box-bg-color: var(--color-gray-005);
  --box-bg-color-hover: var(--color-blue-000);
  --box-bg-color-focus: var(--color-blue-000);
  --box-bg-color-active: var(--color-blue-005);
  --box-bg-color-readonly: var(--color-gray-003);
  --box-bg-color-disabled: var(--color-gray-010);
  --box-bg-color-selected: var(--color-gray-000);
  --box-bg-color-error: var(--color-gray-000);
  --box-color-selected: var(--color-blue-050);
  --box-color-active: var(--color-blue-050);
  --box-color-readonly: var(--color-gray-050);
  --box-color-disabled: var(--color-gray-030);
  --box-color-error: #D90C25;
  --badge-fill-bg-gray: rgba(118, 126, 156, 0.2);
  --badge-fill-bg-blue: rgba(0, 102, 255, 0.2);
  --badge-fill-bg-orange: rgba(255, 133, 10, 0.2);
  --badge-fill-bg-green: rgba(38, 189, 48, 0.2);
  --badge-fill-bg-red: rgba(222, 52, 18, 0.2);
  --badge-fill-bg-cyan: rgba(71, 209, 222, 0.2);
  --badge-priority-bg-low: rgba(0, 102, 255, 0.2);
  --badge-priority-bg-medium: rgba(38, 189, 48, 0.2);
  --badge-priority-bg-high: rgba(222, 52, 18, 0.2);
  --badge-status-bg-saved: rgba(38, 189, 48, 0.2);
  --badge-status-bg-unsaved: rgba(222, 52, 18, 0.2);
  --badge-status-bg-pending: rgba(255, 133, 10, 0.2);
  --badge-status-bg-applied: rgba(38, 189, 48, 0.2);
  --scroll-track-color: transparent;
  --scroll-thumb-color: var(--color-gray-015);
  --scroll-thumb-hover-color: var(--color-gray-020);
  --scroll-thumb-active-color: var(--color-gray-030);
  --stepper-bar-overlay: 255, 255, 255;
  --stepper-bar-standby-pattern: #EFF1F5;
  --stepper-bar-standby-overlay: #EFF1F5;
  --chart-bg-color: #FFFFFF;
  --layout-bg-color: var(--color-gray-000);
  --layout-bg-gradient-color1: var(--color-blue-000);
  --layout-bg-gradient-color2: var(--color-blue-005);
  --section-bg-color: var(--color-gray-000);
  --container-bg-color: #F5F7F9;
  --header-bg-color: #FFFFFF;
  --content-bg-color: #FFFFFF;
  --content-line-color: #DFE2EC;
  --content-empty-text-color: var(--color-gray-070);
  --skeleton-bg-color: #FFFFFF;
  --skeleton-line-color: #DFE2EC;
  --card-bg-color: transparent;
  --card-line-color: var(--color-gray-010);
  --item-box-bg-color: var(--color-gray-003);
  --item-box-line-color: var(--color-gray-003);
  --label-color: var(--color-gray-070);
  --detail-label-color: var(--color-gray-050);
  --detail-line-color: var(--color-gray-015);
  --grid-bg-color: #FFFFFF;
  --grid-bg-color-hover: color-mix(in srgb, var(--semantic-primary-base) 18%, var(--semantic-primary-mix-base));
  --grid-bg-color-selected: color-mix(in srgb, var(--semantic-primary-base) 30%, var(--semantic-primary-mix-base));
  --grid-bg-color-warning: color-mix(in srgb, var(--semantic-error-base) 10%, var(--semantic-error-mix-base));
  --grid-header-text-color: var(--color-gray-090);
  --grid-header-bg-color: #EFF1F5;
  --grid-body-text-color: var(--color-gray-090);
  --grid-line-color: #DFE2EC;
  --grid-sort-icon-color: var(--color-gray-070);
  --grid-resize-handle-color: var(--color-gray-030);
  --grid-empty-text-color: var(--color-gray-070);
  --grid-row-bg-color--selected: color-mix(in srgb, var(--semantic-primary-base) 30%, var(--semantic-primary-mix-base));
  --card-checkbox-gap: 0.75rem;
  --card-checkbox-gap-s: 0.5rem;
  --card-checkbox-bg-color: var(--color-gray-000);
  --card-checkbox-bg-color-hover: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-bg-color-focus: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-bg-color-active: color-mix(in srgb, var(--semantic-primary-base) 18%, var(--semantic-primary-mix-base));
  --card-checkbox-bg-color-selected: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-line-color: var(--color-gray-010);
  --card-checkbox-line-color-hover: var(--color-gray-010);
  --card-checkbox-line-color-focus: color-mix(in srgb, var(--semantic-primary-base) 70%, var(--semantic-primary-mix-base));
  --card-checkbox-line-color-active: var(--semantic-primary-base);
  --card-checkbox-line-color-selected: var(--semantic-primary-base);
  --card-checkbox-check-bg-color: var(--color-gray-000);
  --card-checkbox-check-bg-color-selected: var(--semantic-primary-base);
  --card-checkbox-check-line-color: var(--color-gray-015);
  --card-checkbox-check-line-color-selected: var(--semantic-primary-base);
  --card-checkbox-check-icon-color: var(--semantic-primary-font);
  --card-checkbox-title-color: var(--color-gray-090);
  --card-checkbox-description-color: var(--color-gray-070);
  --card-checkbox-tag-bg-color: var(--color-gray-005);
  --card-checkbox-tag-bg-color-hover: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-tag-bg-color-focus: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-tag-bg-color-active: color-mix(in srgb, var(--semantic-primary-base) 18%, var(--semantic-primary-mix-base));
  --card-checkbox-tag-bg-color-selected: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --card-checkbox-tag-line-color-focus: color-mix(in srgb, var(--semantic-primary-base) 70%, var(--semantic-primary-mix-base));
  --card-checkbox-tag-line-color-active: var(--semantic-primary-base);
  --card-checkbox-tag-line-color-selected: var(--semantic-primary-base);
  --card-checkbox-tag-text-color: var(--color-gray-070);
  --card-checkbox-tag-text-color-selected: var(--semantic-primary-base);
}

/*
 * @file base/_alignments.scss
 * @description 정렬, 배치 관련 디자인
 * @version 1.0
 */
.align__center {
  text-align: center !important;
}

.align__left {
  text-align: left !important;
}

.align__right {
  text-align: right !important;
}

.align__baseline {
  vertical-align: baseline !important;
}

.align__top {
  vertical-align: top !important;
}

.align__middle {
  vertical-align: middle !important;
}

.align__bottom {
  vertical-align: bottom !important;
}

.align__text-bottom {
  vertical-align: text-bottom !important;
}

.align__text-top {
  vertical-align: text-top !important;
}

.float__clear {
  clear: both;
}

.float__left {
  float: left;
}

.float__right {
  float: right;
}

/*
 * @file utilities/_columns.scss
 * @description HTML element column 너비 관련 디자인
 * @version 1.0
 */
.col-1 {
  width: 5rem !important;
}

.col-1--plus {
  width: calc(5rem * 1 + var(--w-plus, 0px)) !important;
}

.col-pct-1--plus {
  width: calc(6.25% + var(--w-plus, 0px)) !important;
}

.col-2 {
  width: 10rem !important;
}

.col-2--plus {
  width: calc(5rem * 2 + var(--w-plus, 0px)) !important;
}

.col-pct-2--plus {
  width: calc(12.5% + var(--w-plus, 0px)) !important;
}

.col-3 {
  width: 15rem !important;
}

.col-3--plus {
  width: calc(5rem * 3 + var(--w-plus, 0px)) !important;
}

.col-pct-3--plus {
  width: calc(18.75% + var(--w-plus, 0px)) !important;
}

.col-4 {
  width: 20rem !important;
}

.col-4--plus {
  width: calc(5rem * 4 + var(--w-plus, 0px)) !important;
}

.col-pct-4--plus {
  width: calc(25% + var(--w-plus, 0px)) !important;
}

.col-5 {
  width: 25rem !important;
}

.col-5--plus {
  width: calc(5rem * 5 + var(--w-plus, 0px)) !important;
}

.col-pct-5--plus {
  width: calc(31.25% + var(--w-plus, 0px)) !important;
}

.col-6 {
  width: 30rem !important;
}

.col-6--plus {
  width: calc(5rem * 6 + var(--w-plus, 0px)) !important;
}

.col-pct-6--plus {
  width: calc(37.5% + var(--w-plus, 0px)) !important;
}

.col-7 {
  width: 35rem !important;
}

.col-7--plus {
  width: calc(5rem * 7 + var(--w-plus, 0px)) !important;
}

.col-pct-7--plus {
  width: calc(43.75% + var(--w-plus, 0px)) !important;
}

.col-8 {
  width: 40rem !important;
}

.col-8--plus {
  width: calc(5rem * 8 + var(--w-plus, 0px)) !important;
}

.col-pct-8--plus {
  width: calc(50% + var(--w-plus, 0px)) !important;
}

.col-9 {
  width: 45rem !important;
}

.col-9--plus {
  width: calc(5rem * 9 + var(--w-plus, 0px)) !important;
}

.col-pct-9--plus {
  width: calc(56.25% + var(--w-plus, 0px)) !important;
}

.col-10 {
  width: 50rem !important;
}

.col-10--plus {
  width: calc(5rem * 10 + var(--w-plus, 0px)) !important;
}

.col-pct-10--plus {
  width: calc(62.5% + var(--w-plus, 0px)) !important;
}

.col-11 {
  width: 55rem !important;
}

.col-11--plus {
  width: calc(5rem * 11 + var(--w-plus, 0px)) !important;
}

.col-pct-11--plus {
  width: calc(68.75% + var(--w-plus, 0px)) !important;
}

.col-12 {
  width: 60rem !important;
}

.col-12--plus {
  width: calc(5rem * 12 + var(--w-plus, 0px)) !important;
}

.col-pct-12--plus {
  width: calc(75% + var(--w-plus, 0px)) !important;
}

.col-13 {
  width: 65rem !important;
}

.col-13--plus {
  width: calc(5rem * 13 + var(--w-plus, 0px)) !important;
}

.col-pct-13--plus {
  width: calc(81.25% + var(--w-plus, 0px)) !important;
}

.col-14 {
  width: 70rem !important;
}

.col-14--plus {
  width: calc(5rem * 14 + var(--w-plus, 0px)) !important;
}

.col-pct-14--plus {
  width: calc(87.5% + var(--w-plus, 0px)) !important;
}

.col-15 {
  width: 75rem !important;
}

.col-15--plus {
  width: calc(5rem * 15 + var(--w-plus, 0px)) !important;
}

.col-pct-15--plus {
  width: calc(93.75% + var(--w-plus, 0px)) !important;
}

.col-16 {
  width: 80rem !important;
}

.col-16--plus {
  width: calc(5rem * 16 + var(--w-plus, 0px)) !important;
}

.col-pct-16--plus {
  width: calc(100% + var(--w-plus, 0px)) !important;
}

.col-pct-1 {
  width: 6.25% !important;
}

.col-pct-2 {
  width: 12.5% !important;
}

.col-pct-3 {
  width: 18.75% !important;
}

.col-pct-4 {
  width: 25% !important;
}

.col-pct-5 {
  width: 31.25% !important;
}

.col-pct-6 {
  width: 37.5% !important;
}

.col-pct-7 {
  width: 43.75% !important;
}

.col-pct-8 {
  width: 50% !important;
}

.col-pct-9 {
  width: 56.25% !important;
}

.col-pct-10 {
  width: 62.5% !important;
}

.col-pct-11 {
  width: 68.75% !important;
}

.col-pct-12 {
  width: 75% !important;
}

.col-pct-13 {
  width: 81.25% !important;
}

.col-pct-14 {
  width: 87.5% !important;
}

.col-pct-15 {
  width: 93.75% !important;
}

.col-pct-16 {
  width: 100% !important;
}

.row-pct-1 {
  height: 6.25% !important;
}

.row-pct-2 {
  height: 12.5% !important;
}

.row-pct-3 {
  height: 18.75% !important;
}

.row-pct-4 {
  height: 25% !important;
}

.row-pct-5 {
  height: 31.25% !important;
}

.row-pct-6 {
  height: 37.5% !important;
}

.row-pct-7 {
  height: 43.75% !important;
}

.row-pct-8 {
  height: 50% !important;
}

.row-pct-9 {
  height: 56.25% !important;
}

.row-pct-10 {
  height: 62.5% !important;
}

.row-pct-11 {
  height: 68.75% !important;
}

.row-pct-12 {
  height: 75% !important;
}

.row-pct-13 {
  height: 81.25% !important;
}

.row-pct-14 {
  height: 87.5% !important;
}

.row-pct-15 {
  height: 93.75% !important;
}

.row-pct-16 {
  height: 100% !important;
}

.w--auto {
  width: auto !important;
}

.h--auto {
  height: auto !important;
}

/*
 * @file base/_display.scss
 * @description display 관련 디자인
 * @version 1.0
 */
.none {
  display: none !important;
}

.block {
  display: block !important;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.fixed {
  display: fixed !important;
}

.absolute {
  display: absolute !important;
}

.grid {
  display: grid !important;
}

.flex__row {
  display: flex !important;
  flex-direction: row;
}

.flex__column {
  display: flex !important;
  flex-direction: column;
}

.flex__row.none,
.flex__column.none {
  display: none !important;
}

.flex__base-1 {
  flex-basis: 6.25% !important;
}

.flex__base-2 {
  flex-basis: 12.5% !important;
}

.flex__base-3 {
  flex-basis: 18.75% !important;
}

.flex__base-4 {
  flex-basis: 25% !important;
}

.flex__base-5 {
  flex-basis: 31.25% !important;
}

.flex__base-6 {
  flex-basis: 37.5% !important;
}

.flex__base-7 {
  flex-basis: 43.75% !important;
}

.flex__base-8 {
  flex-basis: 50% !important;
}

.flex__base-9 {
  flex-basis: 56.25% !important;
}

.flex__base-10 {
  flex-basis: 62.5% !important;
}

.flex__base-11 {
  flex-basis: 68.75% !important;
}

.flex__base-12 {
  flex-basis: 75% !important;
}

.flex__base-13 {
  flex-basis: 81.25% !important;
}

.flex__base-14 {
  flex-basis: 87.5% !important;
}

.flex__base-15 {
  flex-basis: 93.75% !important;
}

.flex__base-16 {
  flex-basis: 100% !important;
}

.flex {
  display: flex;
}

.flex--inline {
  display: inline-flex;
}

.flex--nowrap {
  flex-wrap: nowrap;
}

.flex--wrap {
  flex-wrap: wrap;
}

.flex--wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex--fill {
  flex: 1 1 auto;
}

.flex--shrink--off {
  flex-shrink: 0;
}

.flex-1 {
  flex: 1 1 0;
  min-width: 0;
}

.flex__justify--start {
  justify-content: flex-start;
}

.flex__justify--end {
  justify-content: flex-end;
}

.flex__justify--center {
  justify-content: center;
}

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

.flex__align-items--start {
  align-items: flex-start;
}

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

.flex__align-items--center {
  align-items: center;
}

.flex__align-items--base {
  align-items: baseline;
}

.flex__align-items--stretch {
  align-items: stretch;
}

.flex__align-self--start {
  align-self: flex-start;
}

.flex__align-self--end {
  align-self: flex-end;
}

.flex__align-self--center {
  align-self: center;
}

.flex__align-self--base {
  align-self: baseline;
}

.flex__align-content--start {
  align-content: start;
}

.flex__align-content--end {
  align-content: end;
}

.flex__align-content--center {
  align-content: center;
}

.flex__align-content--between {
  align-content: space-between;
}

.flex__align-content--around {
  align-content: space-around;
}

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

.hidden {
  visibility: hidden !important;
  display: none !important;
}

.overflow--hidden {
  overflow: hidden;
}

.overflow-x--auto {
  overflow-x: auto;
}

.overflow-y--auto {
  overflow-y: auto;
  max-height: var(--data-height, auto);
}

.grid__rowspan-1 {
  grid-row: span 1 !important;
}

.grid__colspan-1 {
  grid-column: span 1 !important;
}

.grid__rowspan-2 {
  grid-row: span 2 !important;
}

.grid__colspan-2 {
  grid-column: span 2 !important;
}

.grid__rowspan-3 {
  grid-row: span 3 !important;
}

.grid__colspan-3 {
  grid-column: span 3 !important;
}

.grid__rowspan-4 {
  grid-row: span 4 !important;
}

.grid__colspan-4 {
  grid-column: span 4 !important;
}

.grid__rowspan-5 {
  grid-row: span 5 !important;
}

.grid__colspan-5 {
  grid-column: span 5 !important;
}

.grid__rowspan-6 {
  grid-row: span 6 !important;
}

.grid__colspan-6 {
  grid-column: span 6 !important;
}

.grid__rowspan-7 {
  grid-row: span 7 !important;
}

.grid__colspan-7 {
  grid-column: span 7 !important;
}

.grid__rowspan-8 {
  grid-row: span 8 !important;
}

.grid__colspan-8 {
  grid-column: span 8 !important;
}

.grid__rowspan-9 {
  grid-row: span 9 !important;
}

.grid__colspan-9 {
  grid-column: span 9 !important;
}

.grid__rowspan-10 {
  grid-row: span 10 !important;
}

.grid__colspan-10 {
  grid-column: span 10 !important;
}

.grid__rowspan-11 {
  grid-row: span 11 !important;
}

.grid__colspan-11 {
  grid-column: span 11 !important;
}

.grid__rowspan-12 {
  grid-row: span 12 !important;
}

.grid__colspan-12 {
  grid-column: span 12 !important;
}

.gap-0 {
  gap: 0rem;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-7 {
  gap: 1.75rem;
}

.gap-8 {
  gap: 2rem;
}

.gap-9 {
  gap: 2.25rem;
}

.gap-10 {
  gap: 2.5rem;
}

.circle {
  border-radius: 50%;
  display: inline-block;
  width: var(--data-size, 0.5rem);
  height: var(--data-size, 0.5rem);
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}

.fixed-h {
  height: var(--data-height, 416px);
}

/*
 * @file base/_divider.scss
 * @description 선 관련 Mixin
 * @version 1.0
 */
.horizontal-bar {
  height: 0.0625rem;
  margin: 0.625rem 0;
  background-color: var(--h-bar-color-2);
}

.vertical-bar {
  width: 1.25rem;
  min-height: 1.25rem;
  margin: 0 1.25rem 0 0;
  border-right: 0.0625rem solid var(--h-bar-color-2);
  vertical-align: middle;
}

.under-bar {
  border-bottom: 0.0625rem solid var(--h-bar-color-2);
  padding-bottom: 0.625rem;
  margin-bottom: 0.625rem;
}
.under-bar .border-thick {
  border-bottom: calc(0.0625rem * 2) solid var(--h-bar-color-2);
}

/*
 * @file base/_elevation.scss
 * @description box shadow 관련 디자인
 * @version 1.0
 */
.elevation--1 {
  box-shadow: 0 0.188rem 0.563rem 0 var(--elevation-color-1);
}

.elevation--2 {
  box-shadow: 0 0.25rem 0.313rem 0 var(--elevation-color-2);
}

.elevation--3 {
  box-shadow: 0 0.25rem 0.188rem 0 var(--elevation-color-3);
}

.elevation--4 {
  box-shadow: 0 0.188rem 0.188rem 0 var(--elevation-color-4);
}

/*
 * @file base/_icons.scss
 * @description 애플리케이션 전체에서 사용되는 아이콘 관리
 */
[class*=ic-] {
  display: inline-block;
  -webkit-print-color-adjust: exact;
}

span.ic-gnb-mega {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/gnb/icon_gnb_mega.svg");
  mask-image: url("../../assets/media/icons/gnb/icon_gnb_mega.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-paging-first {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/pagination/icon_paging_first.svg");
  mask-image: url("../../assets/media/icons/pagination/icon_paging_first.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--icon-color);
}
span.ic-paging-last {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/pagination/icon_paging_last.svg");
  mask-image: url("../../assets/media/icons/pagination/icon_paging_last.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--icon-color);
}
span.ic-paging-prev {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/pagination/icon_paging_prev.svg");
  mask-image: url("../../assets/media/icons/pagination/icon_paging_prev.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--icon-color);
}
span.ic-paging-next {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/pagination/icon_paging_next.svg");
  mask-image: url("../../assets/media/icons/pagination/icon_paging_next.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--icon-color);
}
span.ic-bookmark {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/topMenu/icon_bookmark.svg");
  mask-image: url("../../assets/media/icons/topMenu/icon_bookmark.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-paste {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/topMenu/icon_paste.svg");
  mask-image: url("../../assets/media/icons/topMenu/icon_paste.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-more {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/topMenu/icon_more.svg");
  mask-image: url("../../assets/media/icons/topMenu/icon_more.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-notification {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/topMenu/icon_notifications.svg");
  mask-image: url("../../assets/media/icons/topMenu/icon_notifications.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-notification-high {
  width: 1.375rem;
  height: 1.375rem;
  background-image: url("../../assets/media/icons/topMenu/icon_notification_high.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.375rem !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-notification-low {
  width: 1.375rem;
  height: 1.375rem;
  background-image: url("../../assets/media/icons/topMenu/icon_notification_low.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.375rem !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-notification-medium {
  width: 1.375rem;
  height: 1.375rem;
  background-image: url("../../assets/media/icons/topMenu/icon_notification_medium.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 1.375rem !important;
  background-color: transparent !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-year-picker {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/datePicker/icon_year_picker.svg");
  mask-image: url("../../assets/media/icons/datePicker/icon_year_picker.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-year-month-picker {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/datePicker/icon_year_month_picker.svg");
  mask-image: url("../../assets/media/icons/datePicker/icon_year_month_picker.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-date-picker {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/datePicker/icon_date_picker.svg");
  mask-image: url("../../assets/media/icons/datePicker/icon_date_picker.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-time-picker {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/datePicker/icon_time_picker.svg");
  mask-image: url("../../assets/media/icons/datePicker/icon_time_picker.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-datetime-picker {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/datePicker/icon_date_time_picker.svg");
  mask-image: url("../../assets/media/icons/datePicker/icon_date_time_picker.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-position-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_label_position_left.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_label_position_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-position-top {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_label_position_top.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_label_position_top.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-position-hidden {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_label_position_hidden.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_label_position_hidden.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-position-middle {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_label_position_middle.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_label_position_middle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-position-bottom {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_label_position_bottom.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_label_position_bottom.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-bold {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_bold.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_bold.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-italic {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_italic.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_italic.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-underline {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_underline.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_underline.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-color-palette {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/colorPicker/icon_color_palette.svg");
  mask-image: url("../../assets/media/icons/colorPicker/icon_color_palette.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-color-empty {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/colorPicker/icon_invert_colors.svg");
  mask-image: url("../../assets/media/icons/colorPicker/icon_invert_colors.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-color-selected {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/colorPicker/icon_humidity_high.svg");
  mask-image: url("../../assets/media/icons/colorPicker/icon_humidity_high.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-alert-success {
  background-image: url("../../assets/media/icons/alert/icon_alert_success.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
}
span.ic-alert-info {
  background-image: url("../../assets/media/icons/alert/icon_alert_info.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: right;
}
span.ic-alert-warning {
  background-image: url("../../assets/media/icons/alert/icon_alert_warning.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
}
span.ic-alert-danger {
  background-image: url("../../assets/media/icons/alert/icon_alert_danger.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
}
span.ic-alert-confirm {
  background-image: url("../../assets/media/icons/alert/icon_alert_confirm.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
}
span.ic-default-alert {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/icon_default_alert.svg");
  mask-image: url("../../assets/media/icons/icon_default_alert.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-no-data {
  background-image: url("../../assets/media/icons/noData/icon_no_data.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-no-search {
  background-image: url("../../assets/media/icons/noSearch/icon_no_search.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-more-h {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/etc/icon_more_h.svg");
  mask-image: url("../../assets/media/icons/etc/icon_more_h.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-more-v {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/etc/icon_more_v.svg");
  mask-image: url("../../assets/media/icons/etc/icon_more_v.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-smile {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/etc/icon_smile.svg");
  mask-image: url("../../assets/media/icons/etc/icon_smile.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-equal {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/etc/icon_equal.svg");
  mask-image: url("../../assets/media/icons/etc/icon_equal.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-plus-box {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_plus_box.svg");
  mask-image: url("../../assets/media/icons/common/icon_plus_box.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-minus-box {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_minus_box.svg");
  mask-image: url("../../assets/media/icons/common/icon_minus_box.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-menu-empty {
  width: 5.688rem;
  height: 5.063rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_menu_empty.svg");
  mask-image: url("../../assets/media/icons/common/icon_menu_empty.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 5.688rem 5.063rem;
  mask-size: 5.688rem 5.063rem;
}
span.ic-undo {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_undo.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_undo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-redo {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_redo.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_redo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-preview {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_preview.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_preview.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-simulation {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_eye_tracking.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_eye_tracking.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-minimap {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_map.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_map.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-simulation-report {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_preview.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_preview.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-process-map {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_process_map.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_process_map.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-display-position-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_display_left.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_display_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-display-position-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/editor/icon_display_right.svg");
  mask-image: url("../../assets/media/icons/designer/editor/icon_display_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-unit-px {
  width: 1.125rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/icon_unit_px.svg");
  mask-image: url("../../assets/media/icons/icon_unit_px.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem 1.25rem;
  mask-size: 0.875rem 1.25rem;
}
span.ic-unit-mb {
  width: 1.125rem;
  height: 1.125rem;
  -webkit-mask-image: url("../../assets/media/icons/icon_unit_mb.svg");
  mask-image: url("../../assets/media/icons/icon_unit_mb.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.125rem 1.125rem;
  mask-size: 1.125rem 1.125rem;
}
span.ic-arrow-right--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-arrow-left--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(180deg);
}
span.ic-arrow-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(-90deg);
}
span.ic-arrow-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(90deg);
}
span.ic-arrow-double-right--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-arrow-double-left--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(180deg);
}
span.ic-arrow-double-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(-90deg);
}
span.ic-arrow-double-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(90deg);
}
span.ic-caret-right--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-caret-left--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(180deg);
}
span.ic-caret-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(-90deg);
}
span.ic-caret-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  transform: rotate(90deg);
}
span.ic-show-eye--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-hide-eye--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-search--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-danger--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-error--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_error.svg");
  mask-image: url("../../assets/media/icons/common/icon_error.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-info--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_info.svg");
  mask-image: url("../../assets/media/icons/common/icon_info.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-help--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_help.svg");
  mask-image: url("../../assets/media/icons/common/icon_help.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-filter_fill--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
  background: var(--icon-color);
}
span.ic-sorting--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-view--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_view.svg");
  mask-image: url("../../assets/media/icons/common/icon_view.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-edit--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-plus--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-minus--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-delete--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-close--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-clear--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-setting--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-slash--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-move-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-move-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-sequence-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-sequence-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-swap-up--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-swap-down--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-undo--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-save--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save.svg");
  mask-image: url("../../assets/media/icons/common/icon_save.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-save-as--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-save-out--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-check--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-restore--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-cheeseburger--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-chocolate--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-refresh--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-sync--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-phone--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-mail--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-text--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_text.svg");
  mask-image: url("../../assets/media/icons/common/icon_text.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-number--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_number.svg");
  mask-image: url("../../assets/media/icons/common/icon_number.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-message--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_message.svg");
  mask-image: url("../../assets/media/icons/common/icon_message.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-merge--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-login--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_login.svg");
  mask-image: url("../../assets/media/icons/common/icon_login.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-logout--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-popup--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-check-circle--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-history--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_history.svg");
  mask-image: url("../../assets/media/icons/common/icon_history.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-paperplane--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-active-bell--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-cloud-done--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-cloud-off--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-article-shortcut--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-content-search--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-left-panel-open--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-left-panel-close--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-repeat--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-calendar--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-time--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_time.svg");
  mask-image: url("../../assets/media/icons/common/icon_time.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-align-left--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-align-center--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-align-right--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-reply-arrow--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-quote-right--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-approval--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-data-object--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-reference--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-chart--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-timezone--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-pin--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-notifications--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-format-list-bulleted--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-list-alt--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-database--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_database.svg");
  mask-image: url("../../assets/media/icons/common/icon_database.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-language--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_language.svg");
  mask-image: url("../../assets/media/icons/common/icon_language.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-user--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user.svg");
  mask-image: url("../../assets/media/icons/common/icon_user.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-user-search--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-user-add--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-user-remove--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-user-setting--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-group--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group.svg");
  mask-image: url("../../assets/media/icons/common/icon_group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-groups--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-group-search--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-partner-search--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-download--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_download.svg");
  mask-image: url("../../assets/media/icons/common/icon_download.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-upload--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-share-all--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-file-copy--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-folder--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-image--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_image.svg");
  mask-image: url("../../assets/media/icons/common/icon_image.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-print--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_print.svg");
  mask-image: url("../../assets/media/icons/common/icon_print.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-flowchart--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-cloud--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-link--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-publish--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-add-folder--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-url-link--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-lock--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-key--l {
  width: 1.875rem;
  height: 1.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_key.svg");
  mask-image: url("../../assets/media/icons/common/icon_key.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.875rem;
  mask-size: 1.875rem;
}
span.ic-arrow-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-arrow-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(180deg);
}
span.ic-arrow-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(-90deg);
}
span.ic-arrow-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(90deg);
}
span.ic-arrow-double-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-arrow-double-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(180deg);
}
span.ic-arrow-double-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(-90deg);
}
span.ic-arrow-double-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(90deg);
}
span.ic-caret-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-caret-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(180deg);
}
span.ic-caret-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(-90deg);
}
span.ic-caret-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  transform: rotate(90deg);
}
span.ic-show-eye {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-hide-eye {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-search {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-danger {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-error {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_error.svg");
  mask-image: url("../../assets/media/icons/common/icon_error.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-info {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_info.svg");
  mask-image: url("../../assets/media/icons/common/icon_info.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-help {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_help.svg");
  mask-image: url("../../assets/media/icons/common/icon_help.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-filter_fill {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--icon-color);
}
span.ic-sorting {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-view {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_view.svg");
  mask-image: url("../../assets/media/icons/common/icon_view.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-edit {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-plus {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-minus {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-delete {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-close {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-clear {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-setting {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-slash {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-move-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-move-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-sequence-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-sequence-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-swap-up {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-swap-down {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-undo {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-save {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save.svg");
  mask-image: url("../../assets/media/icons/common/icon_save.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-save-as {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-save-out {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-check {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-restore {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-cheeseburger {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-chocolate {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-refresh {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-sync {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-phone {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-mail {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-text {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_text.svg");
  mask-image: url("../../assets/media/icons/common/icon_text.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-number {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_number.svg");
  mask-image: url("../../assets/media/icons/common/icon_number.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-message {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_message.svg");
  mask-image: url("../../assets/media/icons/common/icon_message.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-merge {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-login {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_login.svg");
  mask-image: url("../../assets/media/icons/common/icon_login.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-logout {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-popup {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-check-circle {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-history {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_history.svg");
  mask-image: url("../../assets/media/icons/common/icon_history.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-paperplane {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-active-bell {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-cloud-done {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-cloud-off {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-article-shortcut {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-content-search {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-left-panel-open {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-left-panel-close {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-repeat {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-calendar {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-time {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_time.svg");
  mask-image: url("../../assets/media/icons/common/icon_time.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-align-left {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-align-center {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-align-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-reply-arrow {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-quote-right {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-approval {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-data-object {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-reference {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-chart {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-timezone {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-pin {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-notifications {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-format-list-bulleted {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-list-alt {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-database {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_database.svg");
  mask-image: url("../../assets/media/icons/common/icon_database.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-language {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_language.svg");
  mask-image: url("../../assets/media/icons/common/icon_language.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-user {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user.svg");
  mask-image: url("../../assets/media/icons/common/icon_user.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-user-search {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-user-add {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-user-remove {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-user-setting {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-group {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group.svg");
  mask-image: url("../../assets/media/icons/common/icon_group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-groups {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-group-search {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-partner-search {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-download {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_download.svg");
  mask-image: url("../../assets/media/icons/common/icon_download.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-upload {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-share-all {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-file-copy {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-folder {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-image {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_image.svg");
  mask-image: url("../../assets/media/icons/common/icon_image.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-print {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_print.svg");
  mask-image: url("../../assets/media/icons/common/icon_print.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-flowchart {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-cloud {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-link {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-publish {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-add-folder {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-url-link {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-lock {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-key {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_key.svg");
  mask-image: url("../../assets/media/icons/common/icon_key.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
}
span.ic-arrow-right--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-arrow-left--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(180deg);
}
span.ic-arrow-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(-90deg);
}
span.ic-arrow-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(90deg);
}
span.ic-arrow-double-right--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-arrow-double-left--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(180deg);
}
span.ic-arrow-double-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(-90deg);
}
span.ic-arrow-double-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(90deg);
}
span.ic-caret-right--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-caret-left--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(180deg);
}
span.ic-caret-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(-90deg);
}
span.ic-caret-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transform: rotate(90deg);
}
span.ic-show-eye--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-hide-eye--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-search--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-danger--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-error--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_error.svg");
  mask-image: url("../../assets/media/icons/common/icon_error.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-info--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_info.svg");
  mask-image: url("../../assets/media/icons/common/icon_info.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-help--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_help.svg");
  mask-image: url("../../assets/media/icons/common/icon_help.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-filter_fill--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  background: var(--icon-color);
}
span.ic-sorting--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-view--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_view.svg");
  mask-image: url("../../assets/media/icons/common/icon_view.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-edit--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-plus--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-minus--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-delete--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-close--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-clear--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-setting--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-slash--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-move-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-move-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-sequence-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-sequence-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-swap-up--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-swap-down--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-undo--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-save--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save.svg");
  mask-image: url("../../assets/media/icons/common/icon_save.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-save-as--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-save-out--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-check--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-restore--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-cheeseburger--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-chocolate--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-refresh--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-sync--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-phone--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-mail--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-text--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_text.svg");
  mask-image: url("../../assets/media/icons/common/icon_text.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-number--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_number.svg");
  mask-image: url("../../assets/media/icons/common/icon_number.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-message--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_message.svg");
  mask-image: url("../../assets/media/icons/common/icon_message.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-merge--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-login--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_login.svg");
  mask-image: url("../../assets/media/icons/common/icon_login.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-logout--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-popup--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-check-circle--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-history--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_history.svg");
  mask-image: url("../../assets/media/icons/common/icon_history.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-paperplane--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-active-bell--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-cloud-done--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-cloud-off--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-article-shortcut--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-content-search--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-left-panel-open--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-left-panel-close--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-repeat--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-calendar--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-time--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_time.svg");
  mask-image: url("../../assets/media/icons/common/icon_time.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-align-left--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-align-center--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-align-right--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-reply-arrow--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-quote-right--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-approval--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-data-object--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-reference--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-chart--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-timezone--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-pin--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-notifications--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-format-list-bulleted--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-list-alt--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-database--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_database.svg");
  mask-image: url("../../assets/media/icons/common/icon_database.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-language--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_language.svg");
  mask-image: url("../../assets/media/icons/common/icon_language.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-user--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user.svg");
  mask-image: url("../../assets/media/icons/common/icon_user.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-user-search--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-user-add--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-user-remove--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-user-setting--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-group--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group.svg");
  mask-image: url("../../assets/media/icons/common/icon_group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-groups--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-group-search--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-partner-search--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-download--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_download.svg");
  mask-image: url("../../assets/media/icons/common/icon_download.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-upload--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-share-all--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-file-copy--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-folder--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-image--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_image.svg");
  mask-image: url("../../assets/media/icons/common/icon_image.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-print--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_print.svg");
  mask-image: url("../../assets/media/icons/common/icon_print.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-flowchart--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-cloud--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-link--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-publish--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-add-folder--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-url-link--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-lock--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-key--s {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_key.svg");
  mask-image: url("../../assets/media/icons/common/icon_key.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
}
span.ic-arrow-right--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-arrow-left--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(180deg);
}
span.ic-arrow-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(-90deg);
}
span.ic-arrow-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(90deg);
}
span.ic-arrow-double-right--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-arrow-double-left--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(180deg);
}
span.ic-arrow-double-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(-90deg);
}
span.ic-arrow-double-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_arrow_double_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(90deg);
}
span.ic-caret-right--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-caret-left--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(180deg);
}
span.ic-caret-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(-90deg);
}
span.ic-caret-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_caret_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  transform: rotate(90deg);
}
span.ic-show-eye--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_show_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-hide-eye--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  mask-image: url("../../assets/media/icons/auth/icon_hide_eye.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-search--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-danger--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  mask-image: url("../../assets/media/icons/common/icon_danger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-error--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_error.svg");
  mask-image: url("../../assets/media/icons/common/icon_error.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-info--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_info.svg");
  mask-image: url("../../assets/media/icons/common/icon_info.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-help--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_help.svg");
  mask-image: url("../../assets/media/icons/common/icon_help.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-filter_fill--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  mask-image: url("../../assets/media/icons/common/icon_filter_fill.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--icon-color);
}
span.ic-sorting--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  mask-image: url("../../assets/media/icons/common/icon_sorting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-view--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_view.svg");
  mask-image: url("../../assets/media/icons/common/icon_view.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-edit--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  mask-image: url("../../assets/media/icons/common/icon_edit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-plus--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  mask-image: url("../../assets/media/icons/common/icon_plus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-minus--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  mask-image: url("../../assets/media/icons/common/icon_minus.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-delete--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  mask-image: url("../../assets/media/icons/common/icon_delete.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-close--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-clear--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-setting--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  mask-image: url("../../assets/media/icons/common/icon_setting.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-slash--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  mask-image: url("../../assets/media/icons/common/icon_slash.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-move-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-move-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveItem_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-sequence-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-sequence-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_moveSeq_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-swap-up--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_up.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-swap-down--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  mask-image: url("../../assets/media/icons/common/icon_move_swap_down.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-undo--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  mask-image: url("../../assets/media/icons/common/icon_undo.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-save--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save.svg");
  mask-image: url("../../assets/media/icons/common/icon_save.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-save-as--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_as.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-save-out--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  mask-image: url("../../assets/media/icons/common/icon_save_exit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-check--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-restore--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  mask-image: url("../../assets/media/icons/common/icon_restore.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-cheeseburger--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  mask-image: url("../../assets/media/icons/common/icon_cheeseburger.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-chocolate--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  mask-image: url("../../assets/media/icons/common/icon_chocolate.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-refresh--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-sync--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  mask-image: url("../../assets/media/icons/common/icon_sync.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-phone--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  mask-image: url("../../assets/media/icons/common/icon_phone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-mail--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  mask-image: url("../../assets/media/icons/common/icon_mail.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-text--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_text.svg");
  mask-image: url("../../assets/media/icons/common/icon_text.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-number--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_number.svg");
  mask-image: url("../../assets/media/icons/common/icon_number.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-message--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_message.svg");
  mask-image: url("../../assets/media/icons/common/icon_message.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-merge--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  mask-image: url("../../assets/media/icons/common/icon_merge.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-login--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_login.svg");
  mask-image: url("../../assets/media/icons/common/icon_login.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-logout--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  mask-image: url("../../assets/media/icons/common/icon_logout.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-popup--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  mask-image: url("../../assets/media/icons/common/icon_popup.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-check-circle--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-history--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_history.svg");
  mask-image: url("../../assets/media/icons/common/icon_history.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-paperplane--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  mask-image: url("../../assets/media/icons/common/icon_paperplane.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-active-bell--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  mask-image: url("../../assets/media/icons/gnb/icon_active_bell.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-cloud-done--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_done.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-cloud-off--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  mask-image: url("../../assets/media/icons/common/icon_cloud_off.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-article-shortcut--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  mask-image: url("../../assets/media/icons/common/icon_article_shortcut.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-content-search--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_content_paste_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-left-panel-open--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_open.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-left-panel-close--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_left_panel_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-repeat--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  mask-image: url("../../assets/media/icons/common/icon_repeat.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-calendar--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  mask-image: url("../../assets/media/icons/common/icon_calendar.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-time--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_time.svg");
  mask-image: url("../../assets/media/icons/common/icon_time.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-align-left--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_left.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-align-center--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_center.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-align-right--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  mask-image: url("../../assets/media/icons/common/icon_align_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-reply-arrow--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_reply_arrow.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-quote-right--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  mask-image: url("../../assets/media/icons/textEditor/icon_quote_right.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-approval--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  mask-image: url("../../assets/media/icons/common/icon_fact_check.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-data-object--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  mask-image: url("../../assets/media/icons/common/icon_data_object.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-reference--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_quick_reference_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-chart--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  mask-image: url("../../assets/media/icons/common/icon_chart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-timezone--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  mask-image: url("../../assets/media/icons/common/icon_timezone.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-pin--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  mask-image: url("../../assets/media/icons/common/icon_pin.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-notifications--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  mask-image: url("../../assets/media/icons/common/icon_notifications.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-format-list-bulleted--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  mask-image: url("../../assets/media/icons/common/icon_format_list_bulleted.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-list-alt--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  mask-image: url("../../assets/media/icons/common/icon_list_alert.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-database--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_database.svg");
  mask-image: url("../../assets/media/icons/common/icon_database.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-language--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_language.svg");
  mask-image: url("../../assets/media/icons/common/icon_language.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-user--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user.svg");
  mask-image: url("../../assets/media/icons/common/icon_user.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-user-search--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-user-add--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_add.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-user-remove--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_remove.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-user-setting--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  mask-image: url("../../assets/media/icons/common/icon_user_settings.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-group--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group.svg");
  mask-image: url("../../assets/media/icons/common/icon_group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-groups--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  mask-image: url("../../assets/media/icons/common/icon_groups.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-group-search--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  mask-image: url("../../assets/media/icons/common/icon_group_search.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-partner-search--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  mask-image: url("../../assets/media/icons/common/icon_partner.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-download--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_download.svg");
  mask-image: url("../../assets/media/icons/common/icon_download.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-upload--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  mask-image: url("../../assets/media/icons/common/icon_upload.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-share-all--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  mask-image: url("../../assets/media/icons/common/icon_share_all.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-file-copy--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  mask-image: url("../../assets/media/icons/common/icon_file_copy.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-folder--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  mask-image: url("../../assets/media/icons/common/icon_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-image--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_image.svg");
  mask-image: url("../../assets/media/icons/common/icon_image.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-print--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_print.svg");
  mask-image: url("../../assets/media/icons/common/icon_print.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-flowchart--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  mask-image: url("../../assets/media/icons/common/icon_flowchart.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-cloud--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_cloud.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-link--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-publish--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_publish.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-add-folder--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_add_folder.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-url-link--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  mask-image: url("../../assets/media/icons/fileUploader/icon_url_link.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-lock--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  mask-image: url("../../assets/media/icons/common/icon_lock.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-key--xs {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_key.svg");
  mask-image: url("../../assets/media/icons/common/icon_key.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
}
span.ic-inputBoxText, span.ic-inputBoxNumber, span.ic-inputBoxEmail, span.ic-inputBoxPhone {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_inputbox_text.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_inputbox_text.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-textArea {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_textarea.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_textarea.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-textEditor {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_text_editor.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_text_editor.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-singleSelect, span.ic-levelSelect {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_dropdown.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_dropdown.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-radio {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_radio.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_radio.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-checkBox {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_checkbox.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_checkbox.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-date {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_date.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_date.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-dateTime {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_datetime.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_datetime.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-year {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_year.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_year.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-fileUpload {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_fileupload.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_fileupload.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-fileDownload {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_filedownload.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_filedownload.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-table {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_dynamic_row_table.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_dynamic_row_table.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-ciTable {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_ci.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_ci.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-label {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_label.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_label.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-simpleLabel {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_simpleLabel.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_simpleLabel.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-image {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_image.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_image.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-divider {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_divider.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_divider.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-userSearch, span.ic-partnerUserSearch {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_user.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_user.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-organizationSearch, span.ic-multiUserSearch, span.ic-partnerSearch {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_organization.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_organization.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-ciType {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_custom_code.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_custom_code.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-rating {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_rating.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_rating.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-ci {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_ci.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_ci.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-fromTo {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_date.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_date.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-yearMonth {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_year.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_year.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-toggleSwitch {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/palette/icon_checkbox.svg ");
  mask-image: url("../../assets/media/icons/designer/palette/icon_checkbox.svg ");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
span.ic-task {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_task.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_task.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-call-activity {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_call_activity.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_call_activity.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-gateway {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_gateway.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_gateway.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-group {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_group.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_group.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
span.ic-annotation {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_annotation.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_annotation.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-connector {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_connector.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_connector.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-background {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_background.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_background.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-zoom {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_zoom.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_zoom.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-reset-zoom {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  mask-image: url("../../assets/media/icons/common/icon_refresh.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-event {
  width: 1.75rem;
  height: 1.75rem;
  -webkit-mask-image: url("../../assets/media/icons/designer/element-palette/icon_event.svg");
  mask-image: url("../../assets/media/icons/designer/element-palette/icon_event.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.75rem;
  mask-size: 1.75rem;
}
span.ic-document-service {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_service.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_service.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-pc {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_pc.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_pc.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-incident {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_incident.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_incident.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-develop {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_develop.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_develop.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-report {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_report.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_report.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-inspection {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_inspection.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_inspection.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-maintenance {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/document/icon_document_maintenance.svg");
  mask-image: url("../../assets/media/icons/document/icon_document_maintenance.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.375rem;
  mask-size: 1.375rem;
  background: var(--color-gray-080);
}
span.ic-document-add {
  background-image: url("../../assets/media/icons/document/icon_add_document.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-no-document {
  background-image: url("../../assets/media/icons/document/icon_no_document.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-mode-editPreview {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/guide/icon_mode_edit_preview.svg");
  mask-image: url("../../assets/media/icons/guide/icon_mode_edit_preview.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
span.ic-mode-edit {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/guide/icon_mode_edit.svg");
  mask-image: url("../../assets/media/icons/guide/icon_mode_edit.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
span.ic-mode-preview {
  width: 1.375rem;
  height: 1.375rem;
  -webkit-mask-image: url("../../assets/media/icons/guide/icon_mode_preview.svg");
  mask-image: url("../../assets/media/icons/guide/icon_mode_preview.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
span.ic-comp-banner {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_image.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-comp-list {
  background-image: url("../../assets/media/icons/dashboard/icon_comp_list.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-comp-chart {
  background-image: url("../../assets/media/icons/dashboard/icon_comp_chart.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-comp-counting {
  background-image: url("../../assets/media/icons/dashboard/icon_comp_count.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-comp-calendar {
  background-image: url("../../assets/media/icons/dashboard/icon_comp_calendar.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-template {
  background-image: url("../../assets/media/icons/dashboard/icon_templete.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-empty {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_empty.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file- {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_no_data.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-invalid {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_no_data.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-csv {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-xls, span.ic-file-xlsx {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_excel.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-ppt, span.ic-file-pptx {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_ppt.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-pdf {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-7z, span.ic-file-zip, span.ic-file-tar {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_zip.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-hwp {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_hwp.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-doc, span.ic-file-docx {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_doc.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-exe {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_exe.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-jpg, span.ic-file-jpeg, span.ic-file-png, span.ic-file-gif {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_image.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-svg {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_svg.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-txt {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_txt.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-sql, span.ic-file-xml {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_code.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-json {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_json.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-folder {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_folder.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-url {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_url.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-mp3 {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_sound.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-mp4 {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_video.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-etc {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_etc.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
span.ic-file-data {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_data.svg");
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

a.ic-toolbar-bold {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_bold.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-italic {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_italic.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-heading {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_heading.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-quote {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_quote.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-unordered-list {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_unordered_list.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-ordered-list {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_ordered_list.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-link {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_link.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-image {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_image.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-code {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_code.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-table {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_table.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-horizontal-rule {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_horizontal_rule.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}
a.ic-toolbar-guide {
  background-image: url("../../assets/media/icons/guide/icon_toolbar_guide.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
}

input[type=text][class*=ic-] {
  padding-right: 1.875rem;
}
input[type=text].ic-search {
  background-image: url("../../assets/media/icons/common/icon_search.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}
input[type=text].ic-date-picker {
  background-image: url("../../assets/media/icons/datePicker/icon_date_picker.svg");
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}
input[type=text].ic-time-picker {
  background-image: url("../../assets/media/icons/datePicker/icon_time_picker.svg");
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}
input[type=text].ic-datetime-picker {
  background-image: url("../../assets/media/icons/datePicker/icon_date_time_picker.svg");
  background-size: 1.25rem;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}
input[type=text].ic-user-search {
  background-image: url("../../assets/media/icons/common/icon_user_search.svg");
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}
input[type=text].ic-group-search {
  background-image: url("../../assets/media/icons/common/icon_group_search.svg");
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position-x: calc(100% - 0.3125rem);
  background-position-y: 50%;
}

/*
 * @file base/_spacing.scss
 * @description HTML element padding, margin 여백 관련 디자인
 * @version 1.0
 */
.p-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0rem !important;
}

.pr-0 {
  padding-right: 0rem !important;
}

.pb-0 {
  padding-bottom: 0rem !important;
}

.pl-0 {
  padding-left: 0rem !important;
}

.pt-1 {
  padding-top: 0.25rem !important;
}

.pr-1 {
  padding-right: 0.25rem !important;
}

.pb-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1 {
  padding-left: 0.25rem !important;
}

.pt-2 {
  padding-top: 0.5rem !important;
}

.pr-2 {
  padding-right: 0.5rem !important;
}

.pb-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2 {
  padding-left: 0.5rem !important;
}

.pt-3 {
  padding-top: 0.75rem !important;
}

.pr-3 {
  padding-right: 0.75rem !important;
}

.pb-3 {
  padding-bottom: 0.75rem !important;
}

.pl-3 {
  padding-left: 0.75rem !important;
}

.pt-4 {
  padding-top: 1rem !important;
}

.pr-4 {
  padding-right: 1rem !important;
}

.pb-4 {
  padding-bottom: 1rem !important;
}

.pl-4 {
  padding-left: 1rem !important;
}

.pt-5 {
  padding-top: 1.25rem !important;
}

.pr-5 {
  padding-right: 1.25rem !important;
}

.pb-5 {
  padding-bottom: 1.25rem !important;
}

.pl-5 {
  padding-left: 1.25rem !important;
}

.pt-6 {
  padding-top: 1.5rem !important;
}

.pr-6 {
  padding-right: 1.5rem !important;
}

.pb-6 {
  padding-bottom: 1.5rem !important;
}

.pl-6 {
  padding-left: 1.5rem !important;
}

.pt-7 {
  padding-top: 1.75rem !important;
}

.pr-7 {
  padding-right: 1.75rem !important;
}

.pb-7 {
  padding-bottom: 1.75rem !important;
}

.pl-7 {
  padding-left: 1.75rem !important;
}

.pt-8 {
  padding-top: 2rem !important;
}

.pr-8 {
  padding-right: 2rem !important;
}

.pb-8 {
  padding-bottom: 2rem !important;
}

.pl-8 {
  padding-left: 2rem !important;
}

.pt-9 {
  padding-top: 2.25rem !important;
}

.pr-9 {
  padding-right: 2.25rem !important;
}

.pb-9 {
  padding-bottom: 2.25rem !important;
}

.pl-9 {
  padding-left: 2.25rem !important;
}

.pt-10 {
  padding-top: 2.5rem !important;
}

.pr-10 {
  padding-right: 2.5rem !important;
}

.pb-10 {
  padding-bottom: 2.5rem !important;
}

.pl-10 {
  padding-left: 2.5rem !important;
}

.m-0 {
  margin: 0 !important;
}

.m-auto {
  margin: auto !important;
}

.m-center {
  margin: 0 auto;
}

.mt-0 {
  margin-top: 0rem !important;
}

.mr-0 {
  margin-right: 0rem !important;
}

.mb-0 {
  margin-bottom: 0rem !important;
}

.ml-0 {
  margin-left: 0rem !important;
}

.mt-1 {
  margin-top: 0.25rem !important;
}

.mr-1 {
  margin-right: 0.25rem !important;
}

.mb-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1 {
  margin-left: 0.25rem !important;
}

.mt-2 {
  margin-top: 0.5rem !important;
}

.mr-2 {
  margin-right: 0.5rem !important;
}

.mb-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2 {
  margin-left: 0.5rem !important;
}

.mt-3 {
  margin-top: 0.75rem !important;
}

.mr-3 {
  margin-right: 0.75rem !important;
}

.mb-3 {
  margin-bottom: 0.75rem !important;
}

.ml-3 {
  margin-left: 0.75rem !important;
}

.mt-4 {
  margin-top: 1rem !important;
}

.mr-4 {
  margin-right: 1rem !important;
}

.mb-4 {
  margin-bottom: 1rem !important;
}

.ml-4 {
  margin-left: 1rem !important;
}

.mt-5 {
  margin-top: 1.25rem !important;
}

.mr-5 {
  margin-right: 1.25rem !important;
}

.mb-5 {
  margin-bottom: 1.25rem !important;
}

.ml-5 {
  margin-left: 1.25rem !important;
}

.mt-6 {
  margin-top: 1.5rem !important;
}

.mr-6 {
  margin-right: 1.5rem !important;
}

.mb-6 {
  margin-bottom: 1.5rem !important;
}

.ml-6 {
  margin-left: 1.5rem !important;
}

.mt-7 {
  margin-top: 1.75rem !important;
}

.mr-7 {
  margin-right: 1.75rem !important;
}

.mb-7 {
  margin-bottom: 1.75rem !important;
}

.ml-7 {
  margin-left: 1.75rem !important;
}

.mt-8 {
  margin-top: 2rem !important;
}

.mr-8 {
  margin-right: 2rem !important;
}

.mb-8 {
  margin-bottom: 2rem !important;
}

.ml-8 {
  margin-left: 2rem !important;
}

.mt-9 {
  margin-top: 2.25rem !important;
}

.mr-9 {
  margin-right: 2.25rem !important;
}

.mb-9 {
  margin-bottom: 2.25rem !important;
}

.ml-9 {
  margin-left: 2.25rem !important;
}

.mt-10 {
  margin-top: 2.5rem !important;
}

.mr-10 {
  margin-right: 2.5rem !important;
}

.mb-10 {
  margin-bottom: 2.5rem !important;
}

.ml-10 {
  margin-left: 2.5rem !important;
}

.mt-auto {
  margin-top: auto !important;
}

.mr-auto {
  margin-right: auto !important;
}

.mb-auto {
  margin-bottom: auto !important;
}

.ml-auto {
  margin-left: auto !important;
}

/*
 * @file components/_scrollbars.scss
 * @description 스크롤바 디자인
 * @version 1.0
 */
.scrollbar {
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
.scrollbar::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.scrollbar::-webkit-scrollbar-track {
  border-radius: 0.625rem;
  background: var(--scroll-track-color);
  cursor: pointer;
}
.scrollbar::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border: 0.25rem solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
  border-radius: 0.625rem;
  cursor: pointer;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-color);
  background-clip: content-box;
}
.scrollbar::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active-color);
  background-clip: content-box;
}
.scrollbar::-webkit-scrollbar-corner {
  background: var(--scroll-track-color);
  border: none;
}
.scrollbar::-webkit-resizer {
  background-image: url("../../assets/media/icons/common/icon_resize.svg");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;
  width: 1.5rem;
  height: 1.5rem;
  /* 모든 border 관련 속성을 명시적으로 리셋 */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

.scrollbar--s {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
.scrollbar--s::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
}
.scrollbar--s::-webkit-scrollbar-track {
  border-radius: 0.625rem;
  background: var(--scroll-track-color);
  cursor: pointer;
}
.scrollbar--s::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border: 0.25rem solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
  border-radius: 0.625rem;
  cursor: pointer;
}
.scrollbar--s::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-color);
  background-clip: content-box;
}
.scrollbar--s::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active-color);
  background-clip: content-box;
}
.scrollbar--s::-webkit-scrollbar-corner {
  background: var(--scroll-track-color);
  border: none;
}
.scrollbar--s::-webkit-resizer {
  display: none;
  background: transparent !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

.scrollbar-hidden {
  scrollbar-width: none;
}
.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}

.scrollbar-auto {
  scrollbar-width: auto;
}
.scrollbar-auto::-webkit-scrollbar {
  width: auto;
  height: auto;
}

::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
}

::-webkit-scrollbar-button:vertical {
  display: none !important;
}

::-webkit-scrollbar-button:horizontal {
  display: none !important;
}

::-webkit-scrollbar-button:start {
  display: none !important;
}

::-webkit-scrollbar-button:end {
  display: none !important;
}

::-webkit-scrollbar-button:single-button {
  display: none !important;
}

::-webkit-scrollbar-button:double-button {
  display: none !important;
}

::-webkit-scrollbar-button:start:decrement {
  display: none !important;
}

::-webkit-scrollbar-button:end:increment {
  display: none !important;
}

::-webkit-scrollbar-button:increment {
  display: none !important;
}

::-webkit-scrollbar-button:decrement {
  display: none !important;
}

html {
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
html::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
html::-webkit-scrollbar-track {
  border-radius: 0.625rem;
  background: var(--scroll-track-color);
  cursor: pointer;
}
html::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border: 0.25rem solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
  border-radius: 0.625rem;
  cursor: pointer;
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-color);
  background-clip: content-box;
}
html::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active-color);
  background-clip: content-box;
}
html::-webkit-scrollbar-corner {
  background: var(--scroll-track-color);
  border: none;
}
html::-webkit-resizer {
  background-image: url("../../assets/media/icons/common/icon_resize.svg");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;
  width: 1.5rem;
  height: 1.5rem;
  /* 모든 border 관련 속성을 명시적으로 리셋 */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/*.highcharts-scrollbar {
  &-track {
    height: 0.5rem;
    fill: themeColor('gray', '010');
    stroke-width: 0;
    rx: calc(0.5rem / 2);
    ry: calc(0.5rem / 2);
  }
  &-thumb {
    height: 0.5rem;
    fill: themeColor('gray', '030');
    stroke-width: 0;
    rx: calc(0.5rem / 2);
    ry: calc(0.5rem / 2);
    &:hover { fill: themeColor('gray', '030'); }
  }
  &-button { display: none; }
  &-arrow { display: none; }
  &-rifles { stroke: transparent; }
}*/
/*
 * @file components/_element.scss
 * @description HTML element 디자인
 * @version 1.0
 */
* {
  font-family: "Noto Sans", "맑은고딕", "Malgun Gothic", dotum, gulim, sans-serif;
}

body {
  font-family: "Noto Sans", "맑은고딕", "Malgun Gothic", dotum, gulim, sans-serif;
  font-size: 0.875rem;
  color: var(--text-color);
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--header-color);
  font-weight: 700;
}

h1 {
  font-size: 1.5rem;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem;
}

h4 {
  font-size: 0.875rem;
}

h5 {
  font-size: 0.75rem;
}

h6 {
  font-size: 0.625rem;
  font-weight: 400;
}

a {
  text-decoration: none;
  color: var(--link-text-color);
}
a:focus, a:hover, a:active, a:visited {
  outline: 0;
}
a:active {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
}
a:hover {
  color: var(--link-text-color-hover);
}
a:focus {
  color: var(--link-text-color-focus);
}
a:active {
  color: var(--link-text-color-active);
}
a:visited {
  color: var(--link-text-color-visited);
}
a.primary {
  color: var(--link-text-color-primary);
}
a.primary:hover {
  color: var(--link-text-color-hover-primary);
}
a.primary:focus {
  color: var(--link-text-color-focus-primary);
}
a.primary:active {
  color: var(--link-text-color-active-primary);
}
a.primary:visited {
  color: var(--link-text-color-visited-primary);
}

img {
  width: auto;
}

ul {
  list-style-type: none;
}

li:focus, li:hover, li:active {
  outline: 0;
}

span {
  margin: auto 0;
  font-family: inherit;
}

input:focus, input:hover, input:active, textarea:focus, textarea:hover, textarea:active, select:focus, select:hover, select:active {
  outline: 0;
}

input[type=text], input[type=password], input[type=number] {
  width: 100%;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  background-color: var(--bg-color);
  padding: 0.313rem 0.5rem;
  border: 0.0625rem solid var(--line-color);
  border-radius: 0.188rem;
  vertical-align: middle;
  line-height: 1.3;
  min-height: 1.875rem;
}
input[type=text]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder {
  color: var(--text-color-placeholder);
}
input[type=text]:not(:disabled):hover, input[type=text]:not(:read-only):hover, input[type=password]:not(:disabled):hover, input[type=password]:not(:read-only):hover, input[type=number]:not(:disabled):hover, input[type=number]:not(:read-only):hover {
  color: var(--text-color-hover);
  background-color: var(--bg-color-hover);
  border-color: var(--line-color-hover);
}
input[type=text]:not(:disabled):focus, input[type=text]:not(:read-only):focus, input[type=password]:not(:disabled):focus, input[type=password]:not(:read-only):focus, input[type=number]:not(:disabled):focus, input[type=number]:not(:read-only):focus {
  color: var(--text-color-focus);
  background-color: var(--bg-color-focus);
  border-color: var(--line-color-focus);
}
input[type=text]:not(:disabled):active, input[type=text]:not(:read-only):active, input[type=password]:not(:disabled):active, input[type=password]:not(:read-only):active, input[type=number]:not(:disabled):active, input[type=number]:not(:read-only):active {
  color: var(--text-color-active);
  background-color: var(--bg-color-active);
  border-color: var(--line-color-active);
}
input[type=text]:read-only:not(.input-placeholder-visible)::placeholder, input[type=text]:disabled:not(.input-placeholder-visible)::placeholder, input[type=password]:read-only:not(.input-placeholder-visible)::placeholder, input[type=password]:disabled:not(.input-placeholder-visible)::placeholder, input[type=number]:read-only:not(.input-placeholder-visible)::placeholder, input[type=number]:disabled:not(.input-placeholder-visible)::placeholder {
  color: transparent;
}
input[type=text]:read-only:not(.tagify), input[type=text]:disabled:not(.tagify), input[type=password]:read-only:not(.tagify), input[type=password]:disabled:not(.tagify), input[type=number]:read-only:not(.tagify), input[type=number]:disabled:not(.tagify) {
  background-image: none;
}
input[type=text]:read-only:not(.tagify), input[type=password]:read-only:not(.tagify), input[type=number]:read-only:not(.tagify) {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
  cursor: text;
}
input[type=text].keep-visual:read-only, input[type=password].keep-visual:read-only, input[type=number].keep-visual:read-only {
  color: var(--text-color);
  background-color: var(--bg-color);
  border-color: var(--line-color);
}
input[type=text]:disabled:not(.tagify), input[type=password]:disabled:not(.tagify), input[type=number]:disabled:not(.tagify) {
  color: var(--text-color-disabled);
  background-color: var(--bg-color-disabled);
  border-color: var(--line-color-disabled);
  cursor: not-allowed;
}
input[type=text].error, input[type=password].error, input[type=number].error {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
input[type=text].error:hover, input[type=text].error:focus, input[type=text].error:active, input[type=password].error:hover, input[type=password].error:focus, input[type=password].error:active, input[type=number].error:hover, input[type=number].error:focus, input[type=number].error:active {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}

.input-icon__l, .input-icon__r, .input-icon__both {
  --icon-color-hover: var(--color-gray-070);
  --icon-color-focus: var(--color-gray-070);
  --icon-color-active: var(--color-gray-070);
  position: relative;
  display: table;
}
.input-icon__l .icon__l, .input-icon__l .icon__r, .input-icon__r .icon__l, .input-icon__r .icon__r, .input-icon__both .icon__l, .input-icon__both .icon__r {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--icon-color);
}
.input-icon__l .icon__l:hover, .input-icon__l .icon__r:hover, .input-icon__r .icon__l:hover, .input-icon__r .icon__r:hover, .input-icon__both .icon__l:hover, .input-icon__both .icon__r:hover {
  background: var(--icon-color-hover);
}
.input-icon__l .icon__l:focus, .input-icon__l .icon__r:focus, .input-icon__r .icon__l:focus, .input-icon__r .icon__r:focus, .input-icon__both .icon__l:focus, .input-icon__both .icon__r:focus {
  background: var(--icon-color-focus);
}
.input-icon__l .icon__l:active, .input-icon__l .icon__r:active, .input-icon__r .icon__l:active, .input-icon__r .icon__r:active, .input-icon__both .icon__l:active, .input-icon__both .icon__r:active {
  background: var(--icon-color-active);
}
.input-icon__l > input[type=text]:not(:disabled):hover ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled):hover ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only):hover ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only):hover ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled):hover ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled):hover ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only):hover ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only):hover ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled):hover ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled):hover ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only):hover ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only):hover ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled):hover ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled):hover ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only):hover ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only):hover ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled):hover ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled):hover ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only):hover ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only):hover ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled):hover ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled):hover ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only):hover ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only):hover ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled):hover ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled):hover ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only):hover ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only):hover ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled):hover ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled):hover ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only):hover ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only):hover ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled):hover ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled):hover ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only):hover ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only):hover ~ .icon__r {
  background: var(--icon-color-hover);
}
.input-icon__l > input[type=text]:not(:disabled):focus ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled):focus ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only):focus ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only):focus ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled):focus ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled):focus ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only):focus ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only):focus ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled):focus ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled):focus ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only):focus ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only):focus ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled):focus ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled):focus ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only):focus ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only):focus ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled):focus ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled):focus ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only):focus ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only):focus ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled):focus ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled):focus ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only):focus ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only):focus ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled):focus ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled):focus ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only):focus ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only):focus ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled):focus ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled):focus ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only):focus ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only):focus ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled):focus ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled):focus ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only):focus ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only):focus ~ .icon__r {
  background: var(--icon-color-focus);
}
.input-icon__l > input[type=text]:not(:disabled):active ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled):active ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only):active ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only):active ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled):active ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled):active ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only):active ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only):active ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled):active ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled):active ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only):active ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only):active ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled):active ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled):active ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only):active ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only):active ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled):active ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled):active ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only):active ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only):active ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled):active ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled):active ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only):active ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only):active ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled):active ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled):active ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only):active ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only):active ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled):active ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled):active ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only):active ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only):active ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled):active ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled):active ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only):active ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only):active ~ .icon__r {
  background: var(--icon-color-active);
}
.input-icon__l > input[type=text]:not(:disabled):read-only ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled):read-only ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only):read-only ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only):read-only ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled):read-only ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled):read-only ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only):read-only ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only):read-only ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled):read-only ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled):read-only ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only):read-only ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only):read-only ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled):read-only ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled):read-only ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only):read-only ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only):read-only ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled):read-only ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled):read-only ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only):read-only ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only):read-only ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled):read-only ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled):read-only ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only):read-only ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only):read-only ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled):read-only ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled):read-only ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only):read-only ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only):read-only ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled):read-only ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled):read-only ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only):read-only ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only):read-only ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled):read-only ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled):read-only ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only):read-only ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only):read-only ~ .icon__r {
  background: var(--icon-color-readonly);
}
.input-icon__l > input[type=text]:not(:disabled):disabled ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled):disabled ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only):disabled ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only):disabled ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled):disabled ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled):disabled ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only):disabled ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only):disabled ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled):disabled ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled):disabled ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only):disabled ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only):disabled ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled):disabled ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled):disabled ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only):disabled ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only):disabled ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled):disabled ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled):disabled ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only):disabled ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only):disabled ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled):disabled ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled):disabled ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only):disabled ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only):disabled ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled):disabled ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled):disabled ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only):disabled ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only):disabled ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled):disabled ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled):disabled ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only):disabled ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only):disabled ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled):disabled ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled):disabled ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only):disabled ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only):disabled ~ .icon__r {
  background: var(--icon-color-disabled);
}
.input-icon__l > input[type=text]:not(:disabled).error ~ .icon__l, .input-icon__l > input[type=text]:not(:disabled).error ~ .icon__r, .input-icon__l > input[type=text]:not(:read-only).error ~ .icon__l, .input-icon__l > input[type=text]:not(:read-only).error ~ .icon__r,
.input-icon__l > input[type=password]:not(:disabled).error ~ .icon__l,
.input-icon__l > input[type=password]:not(:disabled).error ~ .icon__r,
.input-icon__l > input[type=password]:not(:read-only).error ~ .icon__l,
.input-icon__l > input[type=password]:not(:read-only).error ~ .icon__r,
.input-icon__l > input[type=number]:not(:disabled).error ~ .icon__l,
.input-icon__l > input[type=number]:not(:disabled).error ~ .icon__r,
.input-icon__l > input[type=number]:not(:read-only).error ~ .icon__l,
.input-icon__l > input[type=number]:not(:read-only).error ~ .icon__r, .input-icon__r > input[type=text]:not(:disabled).error ~ .icon__l, .input-icon__r > input[type=text]:not(:disabled).error ~ .icon__r, .input-icon__r > input[type=text]:not(:read-only).error ~ .icon__l, .input-icon__r > input[type=text]:not(:read-only).error ~ .icon__r,
.input-icon__r > input[type=password]:not(:disabled).error ~ .icon__l,
.input-icon__r > input[type=password]:not(:disabled).error ~ .icon__r,
.input-icon__r > input[type=password]:not(:read-only).error ~ .icon__l,
.input-icon__r > input[type=password]:not(:read-only).error ~ .icon__r,
.input-icon__r > input[type=number]:not(:disabled).error ~ .icon__l,
.input-icon__r > input[type=number]:not(:disabled).error ~ .icon__r,
.input-icon__r > input[type=number]:not(:read-only).error ~ .icon__l,
.input-icon__r > input[type=number]:not(:read-only).error ~ .icon__r, .input-icon__both > input[type=text]:not(:disabled).error ~ .icon__l, .input-icon__both > input[type=text]:not(:disabled).error ~ .icon__r, .input-icon__both > input[type=text]:not(:read-only).error ~ .icon__l, .input-icon__both > input[type=text]:not(:read-only).error ~ .icon__r,
.input-icon__both > input[type=password]:not(:disabled).error ~ .icon__l,
.input-icon__both > input[type=password]:not(:disabled).error ~ .icon__r,
.input-icon__both > input[type=password]:not(:read-only).error ~ .icon__l,
.input-icon__both > input[type=password]:not(:read-only).error ~ .icon__r,
.input-icon__both > input[type=number]:not(:disabled).error ~ .icon__l,
.input-icon__both > input[type=number]:not(:disabled).error ~ .icon__r,
.input-icon__both > input[type=number]:not(:read-only).error ~ .icon__l,
.input-icon__both > input[type=number]:not(:read-only).error ~ .icon__r {
  background: var(--icon-color-error);
}
.input-icon__l > input[type=text]:not(:disabled):placeholder-shown ~ .btn__remove, .input-icon__l > input[type=text]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__l > input[type=password]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__l > input[type=password]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__l > input[type=number]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__l > input[type=number]:not(:read-only):placeholder-shown ~ .btn__remove, .input-icon__r > input[type=text]:not(:disabled):placeholder-shown ~ .btn__remove, .input-icon__r > input[type=text]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__r > input[type=password]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__r > input[type=password]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__r > input[type=number]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__r > input[type=number]:not(:read-only):placeholder-shown ~ .btn__remove, .input-icon__both > input[type=text]:not(:disabled):placeholder-shown ~ .btn__remove, .input-icon__both > input[type=text]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__both > input[type=password]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__both > input[type=password]:not(:read-only):placeholder-shown ~ .btn__remove,
.input-icon__both > input[type=number]:not(:disabled):placeholder-shown ~ .btn__remove,
.input-icon__both > input[type=number]:not(:read-only):placeholder-shown ~ .btn__remove {
  width: 0;
  visibility: hidden;
}
.input-icon__l > input[type=text]:not(:disabled) ~ .btn__remove, .input-icon__l > input[type=text]:not(:read-only) ~ .btn__remove,
.input-icon__l > input[type=password]:not(:disabled) ~ .btn__remove,
.input-icon__l > input[type=password]:not(:read-only) ~ .btn__remove,
.input-icon__l > input[type=number]:not(:disabled) ~ .btn__remove,
.input-icon__l > input[type=number]:not(:read-only) ~ .btn__remove, .input-icon__r > input[type=text]:not(:disabled) ~ .btn__remove, .input-icon__r > input[type=text]:not(:read-only) ~ .btn__remove,
.input-icon__r > input[type=password]:not(:disabled) ~ .btn__remove,
.input-icon__r > input[type=password]:not(:read-only) ~ .btn__remove,
.input-icon__r > input[type=number]:not(:disabled) ~ .btn__remove,
.input-icon__r > input[type=number]:not(:read-only) ~ .btn__remove, .input-icon__both > input[type=text]:not(:disabled) ~ .btn__remove, .input-icon__both > input[type=text]:not(:read-only) ~ .btn__remove,
.input-icon__both > input[type=password]:not(:disabled) ~ .btn__remove,
.input-icon__both > input[type=password]:not(:read-only) ~ .btn__remove,
.input-icon__both > input[type=number]:not(:disabled) ~ .btn__remove,
.input-icon__both > input[type=number]:not(:read-only) ~ .btn__remove {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(1.375rem + (0.5rem * 3));
}
.input-icon__l > input[type=text] > input[type=text]:disabled ~ .btn__remove, .input-icon__l > input[type=text] > input[type=text]:read-only ~ .btn__remove,
.input-icon__l > input[type=text] > input[type=password]:disabled ~ .btn__remove,
.input-icon__l > input[type=text] > input[type=password]:read-only ~ .btn__remove,
.input-icon__l > input[type=text] > input[type=number]:disabled ~ .btn__remove,
.input-icon__l > input[type=text] > input[type=number]:read-only ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=text]:disabled ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=text]:read-only ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=password]:disabled ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=password]:read-only ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=number]:disabled ~ .btn__remove,
.input-icon__l > input[type=password] > input[type=number]:read-only ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=text]:disabled ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=text]:read-only ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=password]:disabled ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=password]:read-only ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=number]:disabled ~ .btn__remove,
.input-icon__l > input[type=number] > input[type=number]:read-only ~ .btn__remove, .input-icon__r > input[type=text] > input[type=text]:disabled ~ .btn__remove, .input-icon__r > input[type=text] > input[type=text]:read-only ~ .btn__remove,
.input-icon__r > input[type=text] > input[type=password]:disabled ~ .btn__remove,
.input-icon__r > input[type=text] > input[type=password]:read-only ~ .btn__remove,
.input-icon__r > input[type=text] > input[type=number]:disabled ~ .btn__remove,
.input-icon__r > input[type=text] > input[type=number]:read-only ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=text]:disabled ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=text]:read-only ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=password]:disabled ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=password]:read-only ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=number]:disabled ~ .btn__remove,
.input-icon__r > input[type=password] > input[type=number]:read-only ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=text]:disabled ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=text]:read-only ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=password]:disabled ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=password]:read-only ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=number]:disabled ~ .btn__remove,
.input-icon__r > input[type=number] > input[type=number]:read-only ~ .btn__remove, .input-icon__both > input[type=text] > input[type=text]:disabled ~ .btn__remove, .input-icon__both > input[type=text] > input[type=text]:read-only ~ .btn__remove,
.input-icon__both > input[type=text] > input[type=password]:disabled ~ .btn__remove,
.input-icon__both > input[type=text] > input[type=password]:read-only ~ .btn__remove,
.input-icon__both > input[type=text] > input[type=number]:disabled ~ .btn__remove,
.input-icon__both > input[type=text] > input[type=number]:read-only ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=text]:disabled ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=text]:read-only ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=password]:disabled ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=password]:read-only ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=number]:disabled ~ .btn__remove,
.input-icon__both > input[type=password] > input[type=number]:read-only ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=text]:disabled ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=text]:read-only ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=password]:disabled ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=password]:read-only ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=number]:disabled ~ .btn__remove,
.input-icon__both > input[type=number] > input[type=number]:read-only ~ .btn__remove {
  display: none;
}
.input-icon__l > input[type=text],
.input-icon__l > input[type=password],
.input-icon__l > input[type=number] {
  padding-left: calc(1.375rem + (0.5rem * 2));
}
.input-icon__l .icon__l {
  left: 0.5rem;
}
.input-icon__r > input[type=text],
.input-icon__r > input[type=password],
.input-icon__r > input[type=number] {
  padding-right: calc(1.375rem + (0.5rem * 2));
}
.input-icon__r .icon__r {
  right: 0.5rem;
}
.input-icon__both > input[type=text],
.input-icon__both > input[type=password],
.input-icon__both > input[type=number] {
  padding-left: calc(1.375rem + (0.5rem * 2));
  padding-right: calc(1.375rem + (0.5rem * 2));
}
.input-icon__both .icon__l {
  left: 0.5rem;
}
.input-icon__both .icon__r {
  right: 0.5rem;
}

.input-btn__l, .input-btn__r {
  --text-color-readonly: var(--color-gray-090);
  --line-color: var(--color-gray-015);
  --line-color-hover: var(--color-blue-015);
  --line-color-focus: var(--color-blue-015);
  --line-color-active: var(--color-blue-015);
  --line-color-readonly: var(--color-gray-015);
  --bg-color: var(--color-gray-000);
  --bg-color-hover: var(--color-gray-000);
  --bg-color-focus: var(--color-gray-000);
  --bg-color-active: var(--color-gray-000);
  --bg-color-readonly: var(--color-gray-000);
  position: relative;
  display: flex;
  flex-direction: row;
}
.input-btn__l > input[type=text],
.input-btn__l > input[type=password],
.input-btn__l > input[type=number], .input-btn__r > input[type=text],
.input-btn__r > input[type=password],
.input-btn__r > input[type=number] {
  background-color: var(--bg-color);
  border: 0.0625rem solid var(--line-color);
  cursor: pointer;
}
.input-btn__l > input[type=text]:not(:disabled):hover, .input-btn__l > input[type=text]:not(:read-only):hover,
.input-btn__l > input[type=password]:not(:disabled):hover,
.input-btn__l > input[type=password]:not(:read-only):hover,
.input-btn__l > input[type=number]:not(:disabled):hover,
.input-btn__l > input[type=number]:not(:read-only):hover, .input-btn__r > input[type=text]:not(:disabled):hover, .input-btn__r > input[type=text]:not(:read-only):hover,
.input-btn__r > input[type=password]:not(:disabled):hover,
.input-btn__r > input[type=password]:not(:read-only):hover,
.input-btn__r > input[type=number]:not(:disabled):hover,
.input-btn__r > input[type=number]:not(:read-only):hover {
  background-color: var(--bg-color-hover);
  border-color: var(--line-color-hover);
}
.input-btn__l > input[type=text]:not(:disabled):focus, .input-btn__l > input[type=text]:not(:read-only):focus,
.input-btn__l > input[type=password]:not(:disabled):focus,
.input-btn__l > input[type=password]:not(:read-only):focus,
.input-btn__l > input[type=number]:not(:disabled):focus,
.input-btn__l > input[type=number]:not(:read-only):focus, .input-btn__r > input[type=text]:not(:disabled):focus, .input-btn__r > input[type=text]:not(:read-only):focus,
.input-btn__r > input[type=password]:not(:disabled):focus,
.input-btn__r > input[type=password]:not(:read-only):focus,
.input-btn__r > input[type=number]:not(:disabled):focus,
.input-btn__r > input[type=number]:not(:read-only):focus {
  background-color: var(--bg-color-focus);
  border-color: var(--line-color-focus);
}
.input-btn__l > input[type=text]:not(:disabled):active, .input-btn__l > input[type=text]:not(:read-only):active,
.input-btn__l > input[type=password]:not(:disabled):active,
.input-btn__l > input[type=password]:not(:read-only):active,
.input-btn__l > input[type=number]:not(:disabled):active,
.input-btn__l > input[type=number]:not(:read-only):active, .input-btn__r > input[type=text]:not(:disabled):active, .input-btn__r > input[type=text]:not(:read-only):active,
.input-btn__r > input[type=password]:not(:disabled):active,
.input-btn__r > input[type=password]:not(:read-only):active,
.input-btn__r > input[type=number]:not(:disabled):active,
.input-btn__r > input[type=number]:not(:read-only):active {
  background-color: var(--bg-color-active);
  border-color: var(--line-color-active);
}
.input-btn__l > input[type=text]:read-only::placeholder,
.input-btn__l > input[type=password]:read-only::placeholder,
.input-btn__l > input[type=number]:read-only::placeholder, .input-btn__r > input[type=text]:read-only::placeholder,
.input-btn__r > input[type=password]:read-only::placeholder,
.input-btn__r > input[type=number]:read-only::placeholder {
  color: var(--text-color-placeholder);
}
.input-btn__l > input[type=text]:read-only:not(.tagify),
.input-btn__l > input[type=password]:read-only:not(.tagify),
.input-btn__l > input[type=number]:read-only:not(.tagify), .input-btn__r > input[type=text]:read-only:not(.tagify),
.input-btn__r > input[type=password]:read-only:not(.tagify),
.input-btn__r > input[type=number]:read-only:not(.tagify) {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
}
.input-btn__l > input[type=text]:placeholder-shown ~ .btn__remove,
.input-btn__l > input[type=password]:placeholder-shown ~ .btn__remove,
.input-btn__l > input[type=number]:placeholder-shown ~ .btn__remove, .input-btn__r > input[type=text]:placeholder-shown ~ .btn__remove,
.input-btn__r > input[type=password]:placeholder-shown ~ .btn__remove,
.input-btn__r > input[type=number]:placeholder-shown ~ .btn__remove {
  width: 0;
  visibility: hidden;
}
.input-btn__l > input[type=text] ~ .btn__remove,
.input-btn__l > input[type=password] ~ .btn__remove,
.input-btn__l > input[type=number] ~ .btn__remove, .input-btn__r > input[type=text] ~ .btn__remove,
.input-btn__r > input[type=password] ~ .btn__remove,
.input-btn__r > input[type=number] ~ .btn__remove {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.5rem;
}
.input-btn__l:has(.btn__remove) > input[type=text],
.input-btn__l:has(.btn__remove) > input[type=password],
.input-btn__l:has(.btn__remove) > input[type=number], .input-btn__r:has(.btn__remove) > input[type=text],
.input-btn__r:has(.btn__remove) > input[type=password],
.input-btn__r:has(.btn__remove) > input[type=number] {
  padding-right: calc(1.375rem + (0.5rem));
}
.input-btn__l > input[type=text],
.input-btn__l > input[type=password],
.input-btn__l > input[type=number] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -0.0625rem;
}
.input-btn__l > [class*=btn__]:not(.btn__remove) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-btn__r > input[type=text],
.input-btn__r > input[type=password],
.input-btn__r > input[type=number] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-btn__r > [class*=btn__]:not(.btn__remove) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -0.0625rem;
}

textarea {
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  background-color: var(--bg-color);
  padding: 0.313rem 0.5rem;
  border: 0.0625rem solid var(--line-color);
  border-radius: 0.188rem;
  overflow-y: hidden;
  resize: vertical;
  min-height: calc(1.875rem * var(--data-row));
}
textarea::placeholder {
  color: var(--text-color-placeholder);
}
textarea:not(:disabled):hover, textarea:not(:read-only):hover {
  color: var(--text-color-hover);
  background-color: var(--bg-color-hover);
  border-color: var(--line-color-hover);
}
textarea:not(:disabled):focus, textarea:not(:read-only):focus {
  color: var(--text-color-focus);
  background-color: var(--bg-color-focus);
  border-color: var(--line-color-focus);
}
textarea:not(:disabled):active, textarea:not(:read-only):active {
  color: var(--text-color-active);
  background-color: var(--bg-color-active);
  border-color: var(--line-color-active);
}
textarea:read-only::placeholder, textarea:disabled::placeholder {
  color: transparent;
}
textarea:read-only, textarea:disabled {
  resize: none;
}
textarea:read-only {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
  cursor: text;
}
textarea:read-only:hover, textarea:read-only:focus, textarea:read-only:active {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
}
textarea:disabled {
  color: var(--text-color-disabled);
  background-color: var(--bg-color-disabled);
  border-color: var(--line-color-disabled);
  cursor: not-allowed;
}
textarea.error {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
  padding-right: 1.75rem;
}
textarea.error:hover, textarea.error:focus, textarea.error:active {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
textarea.fixed {
  resize: none;
  overflow-y: hidden;
}

.checkbox {
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  outline: none;
  vertical-align: middle;
}
.checkbox .checkbox__label {
  cursor: pointer;
  margin-right: 0.25rem;
}
.checkbox .checkbox__box {
  margin-right: 0.25rem;
  margin-bottom: 0.125rem;
}
.checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.checkbox input[type=checkbox] + span {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.checkbox input[type=checkbox] + span::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  background-color: var(--box-bg-color);
  border: 0.0625rem solid var(--box-line-color);
  border-radius: 0.1875rem;
}
.checkbox input[type=checkbox] + span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.48rem;
  height: 0.28rem;
  border-left: 0.125rem solid var(--box-color-selected);
  border-bottom: 0.125rem solid var(--box-color-selected);
  transform: translate(-50%, -65%) rotate(-45deg);
  opacity: 0;
  pointer-events: none;
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly) + span {
  cursor: pointer;
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly):hover + span::before {
  border-color: var(--box-line-color-hover);
  background-color: var(--box-bg-color-hover);
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly):focus + span::before {
  border-color: var(--box-line-color-focus);
  background-color: var(--box-bg-color-focus);
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly):checked + span::before {
  border-color: var(--box-line-color-selected);
  background-color: var(--box-bg-color-selected);
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly):checked + span::after {
  opacity: 1;
}
.checkbox input[type=checkbox]:not(:disabled):not(.readonly):checked:hover + span::before, .checkbox input[type=checkbox]:not(:disabled):not(.readonly):checked:focus + span::before {
  border-color: var(--box-line-color-selected-hover);
}
.checkbox input[type=checkbox]:disabled + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
  cursor: not-allowed;
}
.checkbox input[type=checkbox]:disabled:checked + span::after {
  border-color: var(--box-color-disabled);
  opacity: 1;
}
.checkbox input[type=checkbox].error + span::before {
  border-color: var(--box-line-color-error);
  background-color: var(--box-bg-color-error);
}
.checkbox input[type=checkbox].error:checked + span::after {
  border-color: var(--box-color-error);
  opacity: 1;
}
.checkbox input[type=checkbox].error:not(:checked) + span::after {
  opacity: 0;
}
.checkbox:active input[type=checkbox]:not(:disabled):not(.readonly) + span::before {
  border-color: var(--box-line-color-active);
  background-color: var(--box-bg-color-active);
}
.checkbox:active input[type=checkbox]:not(:disabled):not(.readonly) + span::after {
  border-color: var(--box-color-active);
}
.checkbox.readonly, .checkbox.disabled {
  pointer-events: none;
}
.checkbox.readonly {
  cursor: text;
}
.checkbox.readonly .checkbox__label {
  cursor: text;
}
.checkbox.readonly input[type=checkbox] + span::before {
  border-color: var(--box-line-color-readonly);
  background-color: var(--box-bg-color-readonly);
}
.checkbox.readonly input[type=checkbox]:checked + span::after {
  border-color: var(--box-color-readonly);
  opacity: 1;
}
.checkbox.disabled {
  cursor: not-allowed;
}
.checkbox.disabled .checkbox__label {
  cursor: not-allowed;
}
.checkbox.vertical {
  display: block;
  margin-bottom: 0.25rem;
}
.checkbox.vertical:first-of-type {
  margin-top: 0 !important;
}
.checkbox.vertical:last-of-type {
  margin-bottom: 0 !important;
}
.checkbox.horizontal {
  display: inline-block;
  margin-right: 0.5rem;
}
.checkbox.horizontal:last-of-type {
  margin-right: 0 !important;
}

.radio {
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  outline: none;
  vertical-align: middle;
}
.radio .radio__label {
  cursor: pointer;
  margin-right: 0.25rem;
}
.radio .radio__box {
  margin-right: 0.25rem;
  margin-bottom: 0.125rem;
}
.radio input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.radio input[type=radio] + span {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
}
.radio input[type=radio] + span::before {
  position: relative;
  border: 0.0625rem solid var(--box-line-color);
  border-radius: 50%;
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: var(--box-bg-color);
  text-align: center;
}
.radio input[type=radio] + span::after {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  background-color: transparent;
  transform: translate(-50%, -50%);
}
.radio input[type=radio]:checked + span::before {
  border-color: var(--box-line-color-selected);
  background-color: var(--box-bg-color-selected);
}
.radio input[type=radio]:checked + span:after {
  background-color: var(--box-color-selected);
}
.radio input[type=radio]:not(:disabled) + span, .radio input[type=radio]:not(.readonly) + span {
  cursor: pointer;
}
.radio input[type=radio]:not(:disabled):hover + span::before, .radio input[type=radio]:not(.readonly):hover + span::before {
  border-color: var(--box-line-color-hover);
  background-color: var(--box-bg-color-hover);
}
.radio input[type=radio]:not(:disabled):focus + span::before, .radio input[type=radio]:not(.readonly):focus + span::before {
  border-color: var(--box-line-color-focus);
  background-color: var(--box-bg-color-focus);
}
.radio input[type=radio]:disabled + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio input[type=radio]:disabled:checked + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio input[type=radio]:disabled:checked + span::after {
  background-color: var(--box-color-disabled);
}
.radio input[type=radio]:disabled:checked:hover + span::before, .radio input[type=radio]:disabled:checked:focus + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio input[type=radio].error + span::before {
  border-color: var(--box-line-color-error);
  background-color: var(--box-bg-color-error);
}
.radio input[type=radio].error:checked + span::after {
  background-color: var(--box-color-error);
}
.radio input[type=radio].error:not(:checked) + span::after {
  background-color: transparent;
}
.radio:active input[type=radio]:not(:disabled) + span::before,
.radio:active input[type=radio]:not(.readonly) + span::before {
  border-color: var(--box-line-color-active);
  background-color: var(--box-bg-color-active);
}
.radio:active input[type=radio]:not(:disabled) + span::after,
.radio:active input[type=radio]:not(.readonly) + span::after {
  background-color: var(--box-color-active);
}
.radio.readonly, .radio.disabled {
  pointer-events: none;
}
.radio.readonly {
  cursor: text;
}
.radio.readonly .radio__label {
  cursor: text;
}
.radio.readonly input[type=radio] + span::before {
  border-color: var(--box-line-color-readonly);
  background-color: var(--box-bg-color-readonly);
}
.radio.readonly input[type=radio]:checked + span::before {
  border-color: var(--box-line-color-readonly);
  background-color: var(--box-bg-color-readonly);
}
.radio.readonly input[type=radio]:checked + span::after {
  background-color: var(--box-color-readonly);
}
.radio.readonly input[type=radio]:checked:hover + span::before, .radio.readonly input[type=radio]:checked:focus + span::before {
  border-color: var(--box-line-color-readonly);
  background-color: var(--box-bg-color-readonly);
}
.radio.disabled {
  cursor: not-allowed;
}
.radio.disabled .radio__label {
  cursor: not-allowed;
}
.radio.disabled input[type=radio] + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio.disabled input[type=radio]:checked + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio.disabled input[type=radio]:checked + span::after {
  background-color: var(--box-color-disabled);
}
.radio.disabled input[type=radio]:checked:hover + span::before, .radio.disabled input[type=radio]:checked:focus + span::before {
  border-color: var(--box-line-color-disabled);
  background-color: var(--box-bg-color-disabled);
}
.radio.vertical {
  display: block;
  margin-bottom: 0.25rem;
}
.radio.vertical:first-of-type {
  margin-top: 0 !important;
}
.radio.vertical:last-of-type {
  margin-bottom: 0 !important;
}
.radio.horizontal {
  display: inline-block;
  margin-right: 0.5rem;
}
.radio.horizontal:last-of-type {
  margin-right: 0 !important;
}

select {
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  background-color: var(--bg-color);
  padding: 0.313rem 0.5rem;
  line-height: 1.3;
  vertical-align: middle;
  min-height: 1.875rem;
  border: 0.0625rem solid var(--line-color);
  border-radius: 0.188rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select.error ~ .select__box {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
select.error ~ .select__box .ic-arrow-down--s {
  background: var(--icon-color-error);
}
select.error ~ .select__box:not(.readonly):hover, select.error ~ .select__box:not(.readonly):focus, select.error ~ .select__box:not(.readonly):active, select.error ~ .select__box:not(.disabled):hover, select.error ~ .select__box:not(.disabled):focus, select.error ~ .select__box:not(.disabled):active {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
select.error ~ .select__box:not(.readonly):hover .ic-arrow-down--s, select.error ~ .select__box:not(.readonly):focus .ic-arrow-down--s, select.error ~ .select__box:not(.readonly):active .ic-arrow-down--s, select.error ~ .select__box:not(.disabled):hover .ic-arrow-down--s, select.error ~ .select__box:not(.disabled):focus .ic-arrow-down--s, select.error ~ .select__box:not(.disabled):active .ic-arrow-down--s {
  background: var(--icon-color-error);
}

.select {
  display: inline-block;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
}
.select select {
  display: none;
}
.select__box {
  --arrow-icon-color: var(--color-gray-070);
  --arrow-icon-color-hover: var(--color-blue-015);
  --arrow-icon-color-focus: var(--color-blue-030);
  --arrow-icon-color-active: var(--color-blue-030);
  --arrow-icon-color-readonly: var(--color-gray-020);
  --arrow-icon-color-disabled: var(--color-gray-020);
  position: relative;
  display: flex;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  align-items: center;
  min-height: 1.875rem;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  background-color: var(--bg-color);
  padding: 0.313rem 1.75rem 0.313rem 0.5rem;
  border: 0.0625rem solid var(--line-color);
  border-radius: 0.188rem;
  cursor: pointer;
  outline: 0;
}
.select__box .ic-arrow-down--s {
  position: absolute;
  top: 0.375rem;
  right: 0.3125rem;
  background: var(--arrow-icon-color);
  pointer-events: none;
}
.select__box .select__box__label {
  width: 100%;
  min-height: 1.25rem;
  background-color: transparent;
  pointer-events: none;
}
.select__box:not(.readonly):hover, .select__box:not(.disabled):hover {
  color: var(--text-color-hover);
  background-color: var(--bg-color-hover);
  border-color: var(--line-color-hover);
}
.select__box:not(.readonly):hover .ic-arrow-down--s, .select__box:not(.disabled):hover .ic-arrow-down--s {
  background: var(--arrow-icon-color-hover);
}
.select__box:not(.readonly):focus, .select__box:not(.disabled):focus {
  color: var(--text-color-focus);
  background-color: var(--bg-color-focus);
  border-color: var(--line-color-focus);
}
.select__box:not(.readonly):focus .ic-arrow-down--s, .select__box:not(.disabled):focus .ic-arrow-down--s {
  background: var(--arrow-icon-color-focus);
}
.select__box:not(.readonly).active, .select__box:not(.disabled).active {
  color: var(--text-color-active);
  background-color: var(--bg-color-active);
  border-color: var(--line-color-active);
}
.select__box:not(.readonly).active .ic-arrow-down--s, .select__box:not(.disabled).active .ic-arrow-down--s {
  background: var(--arrow-icon-color-active);
  transform: rotate(-90deg);
}
.select__box:not(.readonly).active + .select__options, .select__box:not(.disabled).active + .select__options {
  display: block;
}
.select__box.readonly, .select__box.disabled {
  cursor: default;
  pointer-events: none;
}
.select__box.readonly {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
  cursor: text;
}
.select__box.readonly .ic-arrow-down--s {
  background: var(--arrow-icon-color-readonly);
}
.select__box.disabled {
  color: var(--text-color-disabled);
  background-color: var(--bg-color-disabled);
  border-color: var(--line-color-disabled);
  cursor: not-allowed;
}
.select__box.disabled .ic-arrow-down--s {
  background: var(--arrow-icon-color-disabled);
}
.select__box.error {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
.select__box.error .ic-arrow-down--s {
  background: var(--icon-color-error);
}
.select__box.error:hover, .select__box.error:focus, .select__box.error:active {
  color: var(--text-color-error);
  background-color: var(--bg-color-error);
  border-color: var(--line-color-error);
}
.select__box.error:hover .ic-arrow-down--s, .select__box.error:focus .ic-arrow-down--s, .select__box.error:active .ic-arrow-down--s {
  background: var(--icon-color-error);
}
.select__options {
  position: fixed;
  display: none;
  min-width: 8.125rem;
  max-height: var(--max-height, 23.75rem);
  background-color: var(--select-option-bg-color);
  border: 0.0625rem solid var(--select-option-line-color);
  border-radius: 0.188rem;
  overflow: auto;
  margin: 0;
  padding: 0.25rem;
  outline: 0;
  list-style: none;
  z-index: 25;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
.select__options::-webkit-scrollbar {
  width: 0.75rem;
  height: 0.75rem;
  cursor: pointer;
}
.select__options::-webkit-scrollbar-track {
  border-radius: 0.625rem;
  background: var(--scroll-track-color);
  cursor: pointer;
}
.select__options::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border: 0.25rem solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
  border-radius: 0.625rem;
  cursor: pointer;
}
.select__options::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-color);
  background-clip: content-box;
}
.select__options::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active-color);
  background-clip: content-box;
}
.select__options::-webkit-scrollbar-corner {
  background: var(--scroll-track-color);
  border: none;
}
.select__options::-webkit-resizer {
  display: none;
  background: transparent !important;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}
.select__options li {
  height: 1.875rem;
  color: var(--select-option-item-text-color);
  background-color: var(--select-option-item-bg-color);
  border: 0.0625rem solid var(--select-option-item-line-color);
  border-radius: 0.188rem;
  margin-bottom: 0.25rem;
  padding: 0;
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
}
.select__options li:last-child {
  margin-bottom: 0;
}
.select__options li[rel=hide] {
  display: none;
}
.select__options li:not(.has-checkbox) {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.313rem 0.5rem;
}
.select__options li > .checkbox {
  display: flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0.313rem 0.5rem;
}
.select__options li .checkbox .checkbox__box {
  flex: 0 0 auto;
}
.select__options li .checkbox .checkbox__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--select-option-item-text-color);
}
.select__options li:hover {
  color: var(--select-option-item-text-color-hover);
  background-color: var(--select-option-item-bg-color-hover);
  border-color: var(--select-option-item-line-color-hover);
}
.select__options li:hover .checkbox .checkbox__label {
  color: var(--select-option-item-text-color-hover);
}
.select__options li.selected {
  color: var(--select-option-item-text-color-selected);
  background-color: var(--select-option-item-bg-color-selected);
  border-color: var(--select-option-item-line-color-selected);
}
.select__options li.selected .checkbox .checkbox__label {
  color: var(--select-option-item-text-color-selected);
}
.select__options li.selected:hover {
  color: var(--select-option-item-text-color-selected-hover);
  background-color: var(--select-option-item-bg-color-selected-hover);
  border-color: var(--select-option-item-line-color-selected-hover);
}
.select__options li.selected:hover .checkbox .checkbox__label {
  color: var(--select-option-item-text-color-selected-hover);
}

.slider {
  --slider-height: 0.375rem;
  --range-location: 100%;
  --range-bg-color: var(--color-gray-005);
  --range-fill-color: var(--color-blue-050);
  --range-fill-color-disabled: var(--color-gray-015);
  --thumb-color: var(--color-gray-000);
  --thumb-color-hover: var(--color-blue-005);
  --thumb-color-focus: var(--color-blue-005);
  --thumb-color-active: var(--color-gray-000);
  --thumb-color-disabled: var(--color-gray-000);
  --thumb-line-color: var(--color-blue-050);
  --thumb-line-color-hover: var(--color-blue-015);
  --thumb-line-color-focus: var(--color-blue-030);
  --thumb-line-color-active: var(--color-blue-050);
  --thumb-line-color-disabled: var(--color-gray-030);
  min-height: 1.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.slider__range {
  border-radius: 0.188rem;
  width: 75%;
  height: var(--slider-height);
  padding: 0;
  background: linear-gradient(to right, var(--range-fill-color) 0%, var(--range-fill-color) var(--range-location), var(--range-bg-color) var(--range-location), var(--range-bg-color) 100%);
  outline: 0;
  appearance: none;
  cursor: pointer;
  /* WebKit (Chrome, Safari) */
}
.slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 0.0625rem solid var(--thumb-line-color);
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--thumb-color);
  margin-top: calc(-1 * (1.125rem - var(--slider-height)) / 2);
}
.slider__range::-webkit-slider-runnable-track {
  height: var(--slider-height);
  background: transparent;
  border-radius: 0.188rem;
}
.slider__range::-moz-range-thumb {
  border: 0.0625rem solid var(--thumb-line-color);
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--thumb-color);
}
.slider__range::-moz-range-track {
  height: var(--slider-height);
  background: transparent;
  border-radius: 0.188rem;
}
.slider__range:not(:disabled):hover::-webkit-slider-thumb, .slider__range:not(:disabled):hover::-moz-range-thumb {
  border-color: var(--thumb-line-color-hover);
  background-color: var(--thumb-color-hover);
}
.slider__range:not(:disabled):focus::-webkit-slider-thumb, .slider__range:not(:disabled):focus::-moz-range-thumb {
  border-color: var(--thumb-line-color-focus);
  background-color: var(--thumb-color-focus);
  box-shadow: 0 0.188rem 0.188rem 0 var(--elevation-color-4);
}
.slider__range:not(:disabled):active::-webkit-slider-thumb, .slider__range:not(:disabled):active::-moz-range-thumb {
  border-color: var(--thumb-line-color-active);
  background-color: var(--thumb-color-active);
  box-shadow: 0 0.188rem 0.188rem 0 var(--elevation-color-4);
}
.slider__range:disabled {
  background: linear-gradient(to right, var(--range-fill-color-disabled) 0%, var(--range-fill-color-disabled) var(--range-location), var(--range-bg-color) var(--range-location), var(--range-bg-color) 100%);
  cursor: not-allowed;
}
.slider__range:disabled::-webkit-slider-thumb, .slider__range:disabled::-moz-range-thumb {
  border-color: var(--thumb-line-color-disabled);
  background-color: var(--thumb-color-disabled);
  cursor: not-allowed;
}
.slider input[type=text] {
  width: 23%;
  margin-left: 2%;
  text-align: center;
}

.table__box {
  --row-height: 2.875rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  max-height: var(--data-height, auto);
  border: 0.0625rem solid var(--grid-line-color);
  border-radius: 0.375rem;
  color: var(--text-color);
  font-size: 0.875rem;
  font-weight: 400;
  overflow: hidden;
}
.table__box--s {
  --row-height: 2rem;
}
.table__box .table {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: var(--grid-bg-color);
}
.table__box .table th {
  height: var(--row-height);
  padding: 0 0.5rem;
  border-right: 0.0625rem solid var(--grid-line-color);
  text-align: center;
  vertical-align: middle;
  background-color: var(--grid-header-bg-color);
  color: var(--grid-header-text-color);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.table__box .table thead {
  display: block;
  flex-shrink: 0;
  background-color: var(--grid-header-bg-color);
}
.table__box .table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-right: 0;
}
.table__box .table thead tr:first-child th:first-child {
  border-top-left-radius: 0.375rem;
}
.table__box .table thead tr:first-child th:last-child {
  border-top-right-radius: 0.375rem;
}
.table__box .table thead th {
  display: table-cell;
}
.table__box .table thead th:last-child {
  border-right: none;
}
.table__box .table:not(.show-last-border) tbody tr:last-child {
  border-bottom: none;
}
.table__box .table tbody {
  display: block;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  border-top: 0.0625rem solid var(--grid-line-color);
  scrollbar-width: auto;
  scrollbar-color: var(--scroll-thumb-color) var(--scroll-track-color);
}
.table__box .table tbody::-webkit-scrollbar {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
}
.table__box .table tbody::-webkit-scrollbar-track {
  border-radius: 0.625rem;
  background: var(--scroll-track-color);
  cursor: pointer;
}
.table__box .table tbody::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb-color);
  border: 0.25rem solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
  border-radius: 0.625rem;
  cursor: pointer;
}
.table__box .table tbody::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover-color);
  background-clip: content-box;
}
.table__box .table tbody::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active-color);
  background-clip: content-box;
}
.table__box .table tbody::-webkit-scrollbar-corner {
  background: var(--scroll-track-color);
  border: none;
}
.table__box .table tbody::-webkit-resizer {
  background-image: url("../../assets/media/icons/common/icon_resize.svg");
  background-size: 0.75rem;
  background-repeat: no-repeat;
  background-position-x: 0;
  background-position-y: 0;
  width: 1.5rem;
  height: 1.5rem;
  /* 모든 border 관련 속성을 명시적으로 리셋 */
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background-color: transparent !important;
}
.table__box .table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.table__box .table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.375rem;
}
.table__box .table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.375rem;
}
.table__box .table tbody tr.is-selected {
  background-color: var(--grid-row-bg-color--selected);
}
.table__box .table tbody td {
  display: table-cell;
  height: var(--row-height);
  padding: 0 0.75rem;
  border-right: 0.0625rem solid var(--grid-line-color);
  vertical-align: middle;
  color: var(--grid-body-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table__box .table tbody td:last-child {
  border-right: none;
}
.table__box .table tbody .table__empty {
  border: none;
  min-height: var(--data-height, auto);
}
.table__box .table tbody .table__empty .cell__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.table__box .table tbody .table__empty .cell__empty .empty__icon .ic-no-data {
  width: 16.188rem;
  height: 11.688rem;
}
.table__box .table tbody .table__empty .cell__empty .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grid-empty-text-color);
}
.table__box .table tbody .table__empty .cell__empty .empty__subtitle {
  color: var(--grid-empty-text-color);
}
.table__box .table.scroll {
  position: relative;
}
.table__box .table.scroll thead tr {
  width: calc(100% - 16px);
  margin-right: 16px;
}
.table__box .table.scroll tbody {
  overflow-y: auto;
  scrollbar-gutter: stable;
  max-height: calc(var(--data-height) - var(--row-height));
}
.table__box .table.scroll tbody td:last-child {
  border-right: 0.0625rem solid var(--grid-line-color);
}
.table__box.table__box--native .table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}
.table__box.table__box--native .table thead {
  display: table-header-group;
}
.table__box.table__box--native .table tbody {
  display: table-row-group;
  overflow: visible;
}
.table__box.table__box--native .table tr {
  display: table-row;
}
.table__box.table__box--native .table th,
.table__box.table__box--native .table td {
  display: table-cell;
  height: var(--row-height);
}

.table-statistics-wrapper {
  --row-height: 2.875rem;
  --row-height-s: 2.25rem;
  --group-line-color: var(--color-gray-020);
  --total-bg-color: var(--color-blue-000);
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: var(--data-height, auto);
  border: 0.0625rem solid var(--grid-line-color);
  border-radius: 0.375rem;
}
.table-statistics-wrapper--s {
  --row-height: 2rem;
}
.table-statistics-wrapper .table-statistics {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  background-color: var(--grid-bg-color);
}
.table-statistics-wrapper .table-statistics th,
.table-statistics-wrapper .table-statistics td {
  padding: 0 0.75rem;
  height: var(--row-height-s);
  vertical-align: middle;
}
.table-statistics-wrapper .table-statistics th.header-cell,
.table-statistics-wrapper .table-statistics td.header-cell {
  border-right: 0.125rem solid var(--group-line-color);
}
.table-statistics-wrapper .table-statistics thead tr:first-child th:first-child {
  border-top-left-radius: 0.375rem;
}
.table-statistics-wrapper .table-statistics thead tr:first-child th:last-child {
  border-top-right-radius: 0.375rem;
}
.table-statistics-wrapper .table-statistics thead tr th {
  border-bottom: 0.125rem solid var(--group-line-color);
  border-right: 0.0625rem solid var(--grid-line-color);
  position: sticky;
  top: 0;
  background: var(--grid-header-bg-color);
  font-weight: 700;
  color: var(--grid-header-text-color);
  z-index: 5;
  text-align: center;
}
.table-statistics-wrapper .table-statistics thead tr th:last-child {
  border-right: none;
}
.table-statistics-wrapper .table-statistics tbody tr {
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.table-statistics-wrapper .table-statistics tbody tr.total-row {
  border-top: 0.125rem solid var(--group-line-color);
  background-color: var(--total-bg-color);
}
.table-statistics-wrapper .table-statistics tbody tr.total-row td {
  font-weight: 700;
}
.table-statistics-wrapper .table-statistics tbody tr:last-child {
  border-bottom: none;
}
.table-statistics-wrapper .table-statistics tbody tr:last-child td:first-child {
  border-bottom-left-radius: 0.375rem;
}
.table-statistics-wrapper .table-statistics tbody tr:last-child td:last-child {
  border-bottom-right-radius: 0.375rem;
}
.table-statistics-wrapper .table-statistics tbody tr td {
  border-right: 0.0625rem solid var(--grid-line-color);
  color: var(--grid-body-text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table-statistics-wrapper .table-statistics tbody tr td:last-child {
  border-right: none;
}

.event-table__box {
  --row-height: 2.875rem;
  width: 43.75rem;
  height: 28.4375rem;
  display: block;
  overflow: auto;
  border: 0.0625rem solid var(--grid-line-color);
  border-radius: 0.375rem;
  background-color: var(--grid-bg-color);
}
.event-table__box--s {
  --row-height: 2rem;
}
.event-table__box.raw_data__box {
  width: auto;
  height: auto;
}
.event-table__box .table {
  width: auto;
  min-width: 100%;
  border-collapse: collapse;
  background-color: var(--grid-bg-color);
}
.event-table__box .table th, .event-table__box .table td {
  height: var(--row-height);
  padding: 0 0.75rem;
  border-right: 0.0625rem solid var(--grid-line-color);
  border-bottom: 0.0625rem solid var(--grid-line-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  vertical-align: middle;
}
.event-table__box .table thead th {
  position: sticky;
  top: 0;
  background-color: var(--grid-header-bg-color);
  color: var(--grid-header-text-color);
  font-weight: 700;
}
.event-table__box .table tbody td {
  color: var(--grid-body-text-color);
}
.event-table__box .table th:last-child,
.event-table__box .table td:last-child {
  border-right: none;
}
.event-table__box .table .table__empty {
  border: none;
}
.event-table__box .table .table__empty td {
  padding: 0;
  border: none;
}
.event-table__box .table .table__empty .cell__empty {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 0.75rem;
}
.event-table__box .table .table__empty .cell__empty--init {
  align-items: center;
  min-height: var(--data-height, auto);
}
.event-table__box .table .table__empty .cell__empty--error {
  justify-content: flex-start;
  min-height: var(--data-height, auto);
}
.event-table__box .table .table__empty .cell__empty--error .empty__subtitle {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
}
.event-table__box .table .table__empty .cell__empty .empty__subtitle {
  color: var(--grid-empty-text-color);
}

.element-group {
  padding: 0.5rem 0.625rem;
}

.clickable {
  --link-color: var(--color-gray-090);
  --link-color-hover: var(--color-gray-090);
  --link-color-focus: var(--color-blue-050);
  --link-color-active: var(--color-blue-050);
  color: var(--link-color);
  cursor: pointer;
}
.clickable:hover {
  color: var(--link-color-hover);
}
.clickable:hover > * {
  color: var(--link-color-hover) !important;
}
.clickable:focus {
  color: var(--link-color-focus);
}
.clickable:focus > * {
  color: var(--link-color-focus) !important;
}
.clickable:active {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
  color: var(--link-color-active);
}
.clickable:active > * {
  color: var(--link-color-active) !important;
}

.prevent {
  pointer-events: none;
}

/*
 * 아코디언: 한 번에 하나의 콘텐츠만 펼침 가능
 * 여러 콘텐츠를 동시 펼칠 경우 multiple 기재 바람
 *
 * @file utilities/_accordion.scss
 * @description 아코디언 디자인
 * @version 1.0
 */
:root {
  --accordion-primary-bg: --content-bg-color;
  --accordion-primary-bg-hover: color-mix(in srgb, var(--semantic-primary-base) 7%, var(--semantic-primary-mix-base));
  --accordion-primary-bg-focus: color-mix(in srgb, var(--semantic-primary-base) 18%, var(--semantic-primary-mix-base));
}

.accordion {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.accordion:has(input[type=radio]:checked), .accordion:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.accordion .accordion__label {
  cursor: pointer;
  line-height: 1.3;
  border-top-left-radius: 0.563rem;
  border-top-right-radius: 0.563rem;
  padding: 0.563rem 0.5rem;
}
.accordion .accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
}
.accordion .accordion__label .accordion__title {
  font-size: 1rem;
  font-weight: 700;
}
.accordion .accordion__label .accordion__title-count {
  color: var(--semantic-primary-base);
}
.accordion > input[type=checkbox],
.accordion > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion > input[type=checkbox] + .accordion__label,
.accordion > input[type=radio] + .accordion__label {
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion > input[type=checkbox] ~ .accordion__content,
.accordion > input[type=radio] ~ .accordion__content {
  flex: 0 1 0;
  opacity: 0;
  overflow-y: hidden;
}
.accordion > input[type=checkbox]:checked + .accordion__label,
.accordion > input[type=radio]:checked + .accordion__label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion > input[type=checkbox]:checked + .accordion__label [class*=ic-arrow-right],
.accordion > input[type=radio]:checked + .accordion__label [class*=ic-arrow-right] {
  transform: rotate(90deg);
}
.accordion > input[type=checkbox]:checked ~ .accordion__content,
.accordion > input[type=radio]:checked ~ .accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.accordion > input[type=checkbox]:checked ~ .accordion__content::-webkit-scrollbar,
.accordion > input[type=radio]:checked ~ .accordion__content::-webkit-scrollbar {
  display: none;
}
.accordion.primary .accordion__label {
  background-color: var(--accordion-primary-bg);
  border-top: 0.0625rem solid transparent;
  border-bottom: 0.0625rem solid transparent;
}
.accordion.primary .accordion__label .accordion__title {
  color: var(--text-color);
}
.accordion.primary .accordion__label [class*=ic-arrow-right] {
  background: var(--icon-color);
}
.accordion.primary .accordion__label:hover {
  background-color: var(--accordion-primary-bg-hover);
}
.accordion.primary .accordion__label:hover .accordion__title {
  color: var(--text-color);
}
.accordion.primary > input[type=checkbox]:checked + .accordion__label:hover,
.accordion.primary > input[type=radio]:checked + .accordion__label:hover {
  background-color: var(--accordion-primary-bg-focus);
}
.accordion .accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion .accordion__content .accordion__inner {
  padding: 0.75rem;
}
.accordion--s {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.accordion--s:has(input[type=radio]:checked), .accordion--s:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.accordion--s .accordion__label {
  cursor: pointer;
  line-height: 1.3;
  border-top-left-radius: 0.563rem;
  border-top-right-radius: 0.563rem;
  padding: 0.438rem 0.5rem;
}
.accordion--s .accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
}
.accordion--s .accordion__label .accordion__title {
  font-size: 0.875rem;
  font-weight: 700;
}
.accordion--s .accordion__label .accordion__title-count {
  color: var(--semantic-primary-base);
}
.accordion--s > input[type=checkbox],
.accordion--s > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion--s > input[type=checkbox] + .accordion__label,
.accordion--s > input[type=radio] + .accordion__label {
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion--s > input[type=checkbox] ~ .accordion__content,
.accordion--s > input[type=radio] ~ .accordion__content {
  flex: 0 1 0;
  opacity: 0;
  overflow-y: hidden;
}
.accordion--s > input[type=checkbox]:checked + .accordion__label,
.accordion--s > input[type=radio]:checked + .accordion__label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion--s > input[type=checkbox]:checked + .accordion__label [class*=ic-arrow-right],
.accordion--s > input[type=radio]:checked + .accordion__label [class*=ic-arrow-right] {
  transform: rotate(90deg);
}
.accordion--s > input[type=checkbox]:checked ~ .accordion__content,
.accordion--s > input[type=radio]:checked ~ .accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.accordion--s > input[type=checkbox]:checked ~ .accordion__content::-webkit-scrollbar,
.accordion--s > input[type=radio]:checked ~ .accordion__content::-webkit-scrollbar {
  display: none;
}
.accordion--s.primary .accordion__label {
  background-color: var(--accordion-primary-bg);
  border-top: 0.0625rem solid transparent;
  border-bottom: 0.0625rem solid transparent;
}
.accordion--s.primary .accordion__label .accordion__title {
  color: var(--text-color);
}
.accordion--s.primary .accordion__label [class*=ic-arrow-right] {
  background: var(--icon-color);
}
.accordion--s.primary .accordion__label:hover {
  background-color: var(--accordion-primary-bg-hover);
}
.accordion--s.primary .accordion__label:hover .accordion__title {
  color: var(--text-color);
}
.accordion--s.primary > input[type=checkbox]:checked + .accordion__label:hover,
.accordion--s.primary > input[type=radio]:checked + .accordion__label:hover {
  background-color: var(--accordion-primary-bg-focus);
}
.accordion--s .accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion--s .accordion__content .accordion__inner {
  padding: 0.75rem;
}
.accordion--xs {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.accordion--xs:has(input[type=radio]:checked), .accordion--xs:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.accordion--xs .accordion__label {
  cursor: pointer;
  line-height: 1.3;
  border-top-left-radius: 0.563rem;
  border-top-right-radius: 0.563rem;
  padding: 0.25rem 0.5rem;
}
.accordion--xs .accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
}
.accordion--xs .accordion__label .accordion__title {
  font-size: 0.875rem;
  font-weight: 400;
}
.accordion--xs .accordion__label .accordion__title-count {
  color: var(--semantic-primary-base);
}
.accordion--xs > input[type=checkbox],
.accordion--xs > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.accordion--xs > input[type=checkbox] + .accordion__label,
.accordion--xs > input[type=radio] + .accordion__label {
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion--xs > input[type=checkbox] ~ .accordion__content,
.accordion--xs > input[type=radio] ~ .accordion__content {
  flex: 0 1 0;
  opacity: 0;
  overflow-y: hidden;
}
.accordion--xs > input[type=checkbox]:checked + .accordion__label,
.accordion--xs > input[type=radio]:checked + .accordion__label {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion--xs > input[type=checkbox]:checked + .accordion__label [class*=ic-arrow-right],
.accordion--xs > input[type=radio]:checked + .accordion__label [class*=ic-arrow-right] {
  transform: rotate(90deg);
}
.accordion--xs > input[type=checkbox]:checked ~ .accordion__content,
.accordion--xs > input[type=radio]:checked ~ .accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.accordion--xs > input[type=checkbox]:checked ~ .accordion__content::-webkit-scrollbar,
.accordion--xs > input[type=radio]:checked ~ .accordion__content::-webkit-scrollbar {
  display: none;
}
.accordion--xs.primary .accordion__label {
  background-color: var(--accordion-primary-bg);
  border-top: 0.0625rem solid transparent;
  border-bottom: 0.0625rem solid transparent;
}
.accordion--xs.primary .accordion__label .accordion__title {
  color: var(--text-color);
}
.accordion--xs.primary .accordion__label [class*=ic-arrow-right] {
  background: var(--icon-color);
}
.accordion--xs.primary .accordion__label:hover {
  background-color: var(--accordion-primary-bg-hover);
}
.accordion--xs.primary .accordion__label:hover .accordion__title {
  color: var(--text-color);
}
.accordion--xs.primary > input[type=checkbox]:checked + .accordion__label:hover,
.accordion--xs.primary > input[type=radio]:checked + .accordion__label:hover {
  background-color: var(--accordion-primary-bg-focus);
}
.accordion--xs .accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
  border-bottom-left-radius: 0.563rem;
  border-bottom-right-radius: 0.563rem;
}
.accordion--xs .accordion__content .accordion__inner {
  padding: 0.75rem;
}
.accordion__group {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.accordion__group .accordion .accordion__label {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion__group .accordion.primary:not(:first-child) .accordion__label {
  border-top: 0.0625rem solid var(--content-line-color);
}
.accordion__group .accordion--s .accordion__label {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion__group .accordion--s.primary:not(:first-child) .accordion__label {
  border-top: 0.0625rem solid var(--content-line-color);
}
.accordion__group .accordion--xs .accordion__label {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.accordion__group .accordion--xs.primary:not(:first-child) .accordion__label {
  border-top: 0.0625rem solid var(--content-line-color);
}

/*
 * @file components/_alert.scss
 * @description 알림 디자인
 * @version 1.0
 */
.modal__dialog--alert .modal__dialog__body {
  padding: 3.125rem 1.25rem 1rem 1.25rem;
}
.modal__dialog--alert .modal__dialog__footer {
  border: none !important;
}

.alert {
  width: 100%;
}
.alert__type {
  width: 4.375rem;
  height: 4.375rem;
  margin-bottom: 0.625rem;
}
.alert__message {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  box-sizing: border-box;
  text-align: center;
}

/*
 * @file components/_avatar.scss
 * @description 아바타 관련 디자인
 * @version 1.0
 */
.avatar__description {
  margin-top: 0.25rem;
}
.avatar__description__text {
  display: block;
  text-align: left;
  margin-bottom: 0.25rem;
  color: var(--color-gray-050);
  font-size: 0.75rem;
  font-weight: 400;
}
.avatar.dropzone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12.5rem;
  height: 12.5rem;
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 50%;
}
.avatar.dropzone.dz-drag-hover.dz-enabled-drop {
  border-style: solid;
}
.avatar.dropzone.dz-drag-hover.dz-enabled-drop .dz-message {
  opacity: 0.5;
}
.avatar.dropzone .dz-default.dz-message {
  padding: 1rem;
  text-align: center;
  color: var(--color-gray-050);
  font-size: 0.875rem;
  font-weight: 400;
}
.avatar.dropzone .dz-default.dz-message .ic-avatar {
  background-image: url("../../assets/media/icons/fileUploader/icon_document_image.svg");
  background-size: 3.75rem;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  width: 3.75rem;
  height: 3.75rem;
}
.avatar.dropzone .dz-default.dz-message .add-file-button-wrap {
  margin-top: 0.75rem;
}
.avatar.dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable {
  cursor: pointer;
}
.avatar.dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable:hover {
  color: var(--color-blue-030);
}
.avatar.dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable:active {
  color: var(--color-blue-050);
}
.avatar.dropzone .dz-default.dz-message .add-file-button-wrap span:not(:first-child) {
  margin-left: 0.25rem;
}
.avatar.dropzone .dz-preview {
  position: relative;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
}
.avatar.dropzone .dz-preview .dz-image {
  display: contents;
  position: relative;
  overflow: hidden;
  z-index: 10;
}
.avatar.dropzone .dz-preview .dz-image img {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.dropzone .dz-preview .dz-success-mark,
.avatar.dropzone .dz-preview .dz-error-mark {
  display: none;
}
.avatar.dropzone .dz-preview:hover {
  z-index: 25;
}
.avatar.dropzone .dz-preview:hover .dz-details {
  opacity: 1;
}
.avatar.dropzone .dz-preview.dz-image-preview {
  background: var(--color-gray-000);
}
.avatar.dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}
.avatar.dropzone .dz-preview .dz-details {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  align-items: center;
  min-width: 100%;
  max-width: 100%;
  color: var(--color-gray-050);
  text-align: center;
  line-height: 150%;
  opacity: 0;
  z-index: 10;
}
.avatar.dropzone .dz-preview .dz-details .dz-file-type,
.avatar.dropzone .dz-preview .dz-details .dz-filename,
.avatar.dropzone .dz-preview .dz-details .dz-size {
  display: none;
}
.avatar.dropzone .dz-preview .dz-details .dz-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 100%;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_close.svg");
  mask-image: url("../../assets/media/icons/common/icon_close.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  background: var(--color-gray-070);
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
}
.avatar.dropzone .dz-preview .dz-progress {
  display: none;
}
.avatar.dropzone.dz-started .dz-message {
  display: none;
}
.avatar--small .avatar {
  width: 9.375rem;
  height: 9.375rem;
}
.avatar--small .avatar .dz-message {
  padding: 0.375rem !important;
  font-size: 0.75rem;
}
.avatar--small .avatar .dz-message .ic-avatar {
  height: 2.813rem;
  -webkit-mask-size: 2.813rem;
  mask-size: 2.813rem;
}
.avatar--small .avatar .dz-message .add-file-button-wrap {
  margin-top: 0 !important;
}

/*
 * @file components/_banner.scss
 * @description 배너 디자인
 * @version 1.0
 */
.banner {
  --dot-color: var(--color-gray-050);
  --dot-color-hover: var(--color-blue-000);
  --dot-color-active: var(--color-blue-050);
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
}
.banner .banner__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.banner .banner__slider .banner__track {
  display: flex;
  flex-direction: row;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner .banner__slider .banner__track .banner__slide {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.banner .banner__slider .banner__track .banner__slide .banner--overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.banner .banner__slider .banner__track .banner__slide .banner__content {
  position: relative;
  width: 100%;
  z-index: 10;
}
.banner .banner__dots {
  position: absolute;
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  z-index: 25;
}
.banner .banner__dots .banner__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  cursor: pointer;
  background: var(--dot-color);
  opacity: 0.5;
  transition: all 0.3s ease;
}
.banner .banner__dots .banner__dot:not(.active):hover {
  background: var(--dot-color-hover);
  transform: scale(1.2);
}
.banner .banner__dots .banner__dot.active {
  width: 1.25rem;
  border-radius: 0.625rem;
  background: var(--dot-color-active);
  opacity: 1;
}

/*
 * @file components/_subscription-summary.scss
 * @description 구독/라이선스 탭 - 구독 요약 카드 및 강제 비활성(enforce=false) 안내 노트
 * @version 3.0
 */
.subscription-summary__notice {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--color-blue-005);
  color: var(--color-blue-050);
  border: 0.0625rem solid var(--color-blue-015);
  border-radius: 0.563rem;
  line-height: 1.4;
}
.subscription-summary__notice [class*=ic-] {
  flex-shrink: 0;
  background-color: var(--color-blue-050);
}
.subscription-summary__card {
  padding: 1rem 1.25rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-left: 0.25rem solid var(--color-gray-030);
  border-radius: 0.563rem;
  background-color: var(--section-bg-color);
  box-shadow: 0 0.0625rem 0.1875rem var(--elevation-color-1);
}
.subscription-summary__card--green {
  border-left-color: var(--color-vivid-green-060);
}
.subscription-summary__card--orange {
  border-left-color: #FF850A;
}
.subscription-summary__card--red {
  border-left-color: #DE3412;
}
.subscription-summary__card--gray {
  border-left-color: var(--color-gray-030);
}
.subscription-summary__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 0.0625rem solid var(--color-gray-005);
}
.subscription-summary__plan {
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.subscription-summary__badges {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  flex-shrink: 0;
}
.subscription-summary__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem 1.5rem;
}
.subscription-summary__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}
.subscription-summary__label {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sub-color);
  line-height: 1.3;
}
.subscription-summary__value {
  font-size: 0.875rem;
  color: var(--text-color);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
.subscription-summary__meter {
  height: 0.375rem;
  max-width: 10rem;
  margin-top: 0.25rem;
  background-color: var(--color-gray-005);
  border-radius: 0.1875rem;
  overflow: hidden;
}
.subscription-summary__meter-fill {
  height: 100%;
  width: 0;
  background-color: var(--color-blue-050);
  border-radius: 0.1875rem;
  transition: width 0.3s ease;
}
.subscription-summary__meter-fill--warn {
  background-color: #FF850A;
}
.subscription-summary__meter-fill--over {
  background-color: #DE3412;
}
.subscription-summary__note {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid var(--color-gray-005);
}
.subscription-summary__note .subscription-summary__value {
  white-space: pre-wrap;
}
.subscription-summary__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.563rem;
  font-size: 0.875rem;
  color: var(--color-gray-050);
}

/*
 * 버튼 적용 규칙
 * (1) 버튼 1개인 경우 : Primary
 * (2) 버튼 2개인 경우 : Secondary + Primary 혹은 Tertiary + Primary (두번째 옵션의 중요도에 따라)
 * (3) 버튼 3개 이상인 경우 : (n * Secondary) + Primary
 * (4) 버튼 폼에 적용식이 포함된 경우
 *  - (4-1) 제출 버튼 하나만 있을 경우 : Primary
 *  - (4-2) 제출 폼의 옵션이 있는 경우: (2)번 혹은 (3)번과 동일
 * (5) 버튼은 기본적으로 레이아웃 우측에 위치하며 버튼 중요도가 높을수록 바깥쪽에 위치시킨다.
 * (6) Danger, Error 버튼 사용시, 기본 버튼은 Danger를 사용하고 파괴 액션이 존재하는 경우 예외적으로만 Error 버튼을 사용한다.
 *
 * @file components/_button.scss
 * @description 버튼 디자인
 */
:root {
  --btn-primary-bg: var(--semantic-primary-base);
  --btn-primary-font: var(--semantic-primary-font);
  --btn-primary-icon: var(--semantic-primary-font);
  --btn-secondary-bg: color-mix(in srgb, var(--semantic-primary-base) 18%, var(--semantic-primary-mix-base));
  --btn-secondary-font: var(--semantic-primary-base);
  --btn-secondary-icon: var(--semantic-primary-base);
  --btn-primary-tint-015: color-mix(in srgb, var(--semantic-primary-base) 41%, var(--semantic-primary-mix-base));
  --btn-primary-tint-030: color-mix(in srgb, var(--semantic-primary-base) 70%, var(--semantic-primary-mix-base));
  --btn-tertiary-bg: var(--color-gray-010);
  --btn-tertiary-font: var(--color-gray-090);
  --btn-tertiary-icon: var(--color-gray-070);
  --btn-check-bg: var(--color-vivid-green-070);
  --btn-check-font: var(--color-gray-000);
  --btn-check-icon: var(--color-gray-000);
  --btn-danger-bg: color-mix(in srgb, var(--semantic-error-base) 10%, var(--semantic-error-mix-base));
  --btn-danger-font: var(--semantic-error-base);
  --btn-danger-icon: var(--semantic-error-base);
  --btn-error-bg: var(--semantic-error-base);
  --btn-error-font: var(--semantic-error-font);
  --btn-error-icon: var(--semantic-error-font);
}

/*
 * 채움형 버튼
 *
 * [사용 규칙]
 * primary - 가장 중요한 기본 실행 버튼
 * secondary - primary를 보조하는 선택 버튼
 * tertiary - 중요도가 낮은 일반 선택 버튼
 * check - 저장/확정 등 긍정적인 완료 버튼
 * danger - 삭제 등 주의가 필요한 파괴적 동작
 * error - 일반적인 삭제보다 강한 경고가 필요한 특수 동작
 *
 * [상태 규칙]
 * default - 기본 상태
 * hover - 마우스 오버 상태
 * focus - 키보드 포커스 상태
 * active - 누르는 순간의 상태
 * disabled - 비활성 상태. gray 010 배경과 gray 030 글자/아이콘 사용
 * unSelected/selected - 버튼 그룹에서 비선택/선택 상태
 * overlay - 상태 변화 시 기준 배경 위에 표시하는 반투명 레이어
 */
/*
 * 고스트 버튼
 *
 * [사용 규칙]
 * 배경은 투명하게 유지하고 text/icon 색상으로만 의미를 전달한다.
 * ghost-primary - primary 동작의 보조 옵션
 * ghost-tertiary - 일반적인 보조 옵션
 * ghost-danger - 삭제 등 위험 동작의 보조 옵션
 *
 * [상태 규칙]
 * hover/focus는 의미 색상 12%, active는 25% overlay를 적용한다.
 * focus는 gray 110 border를 사용하며, disabled는 gray 010 배경과 gray 030 text/icon을 사용한다.
 */
/*
 * 라인 버튼
 *
 * [사용 규칙]
 * ghost 버튼처럼 배경은 투명하게 유지하고, 의미 색상을 border로 버튼을 구분한다.
 *
 * primary-line - blue 050 text/icon 및 border
 * check-line - 저장/확정 등 긍정 액션용
 * gray-line - gray 090 text, gray 070 icon 및 border
 * secondary-line - 보조 선택 버튼 및 버튼 그룹용
 * tertiary-line - 일반 선택 버튼 및 버튼 그룹용
 * danger-line - 삭제 등 위험 동작용
 *
 * active는 의미 색상 25% overlay를 적용한다.
 * hover는 기본 라인을 유지하고 의미 색상 12% overlay를 적용한다.
 * selected/selected-hover는 버튼 그룹의 선택 상태를 표현한다.
 */
/*
 * 소셜 및 파일 형식 버튼
 *
 * [사용 규칙]
 * google - gray-line과 동일한 규칙
 * kakao - primary fill과 동일한 상태 규칙에 yellow 050 적용
 * excel/csv - danger-line과 동일한 규칙에 vivid-green 070 text/border 적용
 * pdf - danger-line과 동일한 규칙
 *
 * [공통 상태 규칙]
 * hover/focus는 12%, active는 25% overlay를 적용한다.
 * focus border는 gray 110을 사용하고, disabled는 gray 010 배경, gray 030 text, gray 015 border를 사용한다.
 * icon은 각 버튼의 파일 이미지 또는 로그인 이미지를 표시한다.
 */
/** 버튼 종류
   * - btn__ic 아이콘 버튼
   * - btn__text--box 텍스트 버튼
   * - btn__ic--box 아이콘 + 텍스트 버튼
  */
button {
  border-radius: 0.188rem;
  display: inline-block;
  font-weight: 400;
  line-height: 1.3;
  overflow: visible;
  background-color: transparent;
  vertical-align: middle;
  opacity: 1;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
button:focus, button:hover {
  outline: 0;
}
button:disabled, button.disabled {
  cursor: not-allowed;
}

.btn__ic--l {
  height: fit-content;
  line-height: 0;
  padding: 0.313rem;
}
.btn__ic--box--l {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.313rem 1.5rem;
}
.btn__ic--box--l .btn__ic__text {
  font-weight: 400;
  pointer-events: none;
}
.btn__ic--box--l span:first-of-type {
  margin-right: 0.75rem;
}
.btn__text--box--l {
  height: 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.5rem 1.5rem;
}
.btn__ic--l.primary, .btn__text--box--l.primary, .btn__ic--box--l.primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary [class*=ic-], .btn__text--box--l.primary [class*=ic-], .btn__ic--box--l.primary [class*=ic-] {
  background: var(--btn-primary-icon);
  pointer-events: none;
}
.btn__ic--l.primary::after, .btn__text--box--l.primary::after, .btn__ic--box--l.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.primary:focus, .btn__text--box--l.primary:focus, .btn__ic--box--l.primary:focus {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.primary:focus [class*=ic-], .btn__text--box--l.primary:focus [class*=ic-], .btn__ic--box--l.primary:focus [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--l.primary:focus::after, .btn__text--box--l.primary:focus::after, .btn__ic--box--l.primary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.primary:hover, .btn__text--box--l.primary:hover, .btn__ic--box--l.primary:hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary:hover [class*=ic-], .btn__text--box--l.primary:hover [class*=ic-], .btn__ic--box--l.primary:hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--l.primary:hover::after, .btn__text--box--l.primary:hover::after, .btn__ic--box--l.primary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.primary:not(:disabled):not(.disabled):active, .btn__ic--l.primary:not(:disabled):not(.disabled).active, .btn__ic--l.primary:not(:disabled):not(.disabled).actvie, .btn__text--box--l.primary:not(:disabled):not(.disabled):active, .btn__text--box--l.primary:not(:disabled):not(.disabled).active, .btn__text--box--l.primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.primary:not(:disabled):not(.disabled):active, .btn__ic--box--l.primary:not(:disabled):not(.disabled).active, .btn__ic--box--l.primary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--l.primary:not(:disabled):not(.disabled):active::after, .btn__ic--l.primary:not(:disabled):not(.disabled).active::after, .btn__ic--l.primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.primary:not(:disabled):not(.disabled):active::after, .btn__text--box--l.primary:not(:disabled):not(.disabled).active::after, .btn__text--box--l.primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.primary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--l.primary:disabled, .btn__ic--l.primary.disabled, .btn__text--box--l.primary:disabled, .btn__text--box--l.primary.disabled, .btn__ic--box--l.primary:disabled, .btn__ic--box--l.primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.primary:disabled [class*=ic-], .btn__ic--l.primary.disabled [class*=ic-], .btn__text--box--l.primary:disabled [class*=ic-], .btn__text--box--l.primary.disabled [class*=ic-], .btn__ic--box--l.primary:disabled [class*=ic-], .btn__ic--box--l.primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.primary:disabled::after, .btn__ic--l.primary.disabled::after, .btn__text--box--l.primary:disabled::after, .btn__text--box--l.primary.disabled::after, .btn__ic--box--l.primary:disabled::after, .btn__ic--box--l.primary.disabled::after {
  display: none;
}
.btn__ic--l.secondary, .btn__text--box--l.secondary, .btn__ic--box--l.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--l.secondary [class*=ic-], .btn__text--box--l.secondary [class*=ic-], .btn__ic--box--l.secondary [class*=ic-] {
  background: var(--btn-secondary-icon);
  pointer-events: none;
}
.btn__ic--l.secondary::after, .btn__text--box--l.secondary::after, .btn__ic--box--l.secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.secondary:focus, .btn__text--box--l.secondary:focus, .btn__ic--box--l.secondary:focus {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.secondary:focus [class*=ic-], .btn__text--box--l.secondary:focus [class*=ic-], .btn__ic--box--l.secondary:focus [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--l.secondary:focus::after, .btn__text--box--l.secondary:focus::after, .btn__ic--box--l.secondary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.secondary:hover, .btn__text--box--l.secondary:hover, .btn__ic--box--l.secondary:hover {
  color: var(--btn-secondary-font);
  background-color: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--l.secondary:hover [class*=ic-], .btn__text--box--l.secondary:hover [class*=ic-], .btn__ic--box--l.secondary:hover [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--l.secondary:hover::after, .btn__text--box--l.secondary:hover::after, .btn__ic--box--l.secondary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.secondary:not(:disabled):not(.disabled):active, .btn__ic--l.secondary:not(:disabled):not(.disabled).active, .btn__ic--l.secondary:not(:disabled):not(.disabled).actvie, .btn__text--box--l.secondary:not(:disabled):not(.disabled):active, .btn__text--box--l.secondary:not(:disabled):not(.disabled).active, .btn__text--box--l.secondary:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.secondary:not(:disabled):not(.disabled):active, .btn__ic--box--l.secondary:not(:disabled):not(.disabled).active, .btn__ic--box--l.secondary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--l.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.secondary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--l.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--l.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--l.secondary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.secondary:not(:disabled):not(.disabled):active::after, .btn__text--box--l.secondary:not(:disabled):not(.disabled).active::after, .btn__text--box--l.secondary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.secondary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--l.secondary:disabled, .btn__ic--l.secondary.disabled, .btn__text--box--l.secondary:disabled, .btn__text--box--l.secondary.disabled, .btn__ic--box--l.secondary:disabled, .btn__ic--box--l.secondary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.secondary:disabled [class*=ic-], .btn__ic--l.secondary.disabled [class*=ic-], .btn__text--box--l.secondary:disabled [class*=ic-], .btn__text--box--l.secondary.disabled [class*=ic-], .btn__ic--box--l.secondary:disabled [class*=ic-], .btn__ic--box--l.secondary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.secondary:disabled::after, .btn__ic--l.secondary.disabled::after, .btn__text--box--l.secondary:disabled::after, .btn__text--box--l.secondary.disabled::after, .btn__ic--box--l.secondary:disabled::after, .btn__ic--box--l.secondary.disabled::after {
  display: none;
}
.btn__ic--l.tertiary, .btn__text--box--l.tertiary, .btn__ic--box--l.tertiary {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.tertiary [class*=ic-], .btn__text--box--l.tertiary [class*=ic-], .btn__ic--box--l.tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--l.tertiary::after, .btn__text--box--l.tertiary::after, .btn__ic--box--l.tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.tertiary:focus, .btn__text--box--l.tertiary:focus, .btn__ic--box--l.tertiary:focus {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.tertiary:focus [class*=ic-], .btn__text--box--l.tertiary:focus [class*=ic-], .btn__ic--box--l.tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary:focus::after, .btn__text--box--l.tertiary:focus::after, .btn__ic--box--l.tertiary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.tertiary:hover, .btn__text--box--l.tertiary:hover, .btn__ic--box--l.tertiary:hover {
  color: var(--color-gray-070);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.tertiary:hover [class*=ic-], .btn__text--box--l.tertiary:hover [class*=ic-], .btn__ic--box--l.tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary:hover::after, .btn__text--box--l.tertiary:hover::after, .btn__ic--box--l.tertiary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.tertiary:not(:disabled):not(.disabled):active, .btn__ic--l.tertiary:not(:disabled):not(.disabled).active, .btn__ic--l.tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--l.tertiary:not(:disabled):not(.disabled):active, .btn__text--box--l.tertiary:not(:disabled):not(.disabled).active, .btn__text--box--l.tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--l.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--l.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--l.tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--l.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--l.tertiary:disabled, .btn__ic--l.tertiary.disabled, .btn__text--box--l.tertiary:disabled, .btn__text--box--l.tertiary.disabled, .btn__ic--box--l.tertiary:disabled, .btn__ic--box--l.tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.tertiary:disabled [class*=ic-], .btn__ic--l.tertiary.disabled [class*=ic-], .btn__text--box--l.tertiary:disabled [class*=ic-], .btn__text--box--l.tertiary.disabled [class*=ic-], .btn__ic--box--l.tertiary:disabled [class*=ic-], .btn__ic--box--l.tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.tertiary:disabled::after, .btn__ic--l.tertiary.disabled::after, .btn__text--box--l.tertiary:disabled::after, .btn__text--box--l.tertiary.disabled::after, .btn__ic--box--l.tertiary:disabled::after, .btn__ic--box--l.tertiary.disabled::after {
  display: none;
}
.btn__ic--l.check, .btn__text--box--l.check, .btn__ic--box--l.check {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check [class*=ic-], .btn__text--box--l.check [class*=ic-], .btn__ic--box--l.check [class*=ic-] {
  background: var(--color-gray-000);
  pointer-events: none;
}
.btn__ic--l.check::after, .btn__text--box--l.check::after, .btn__ic--box--l.check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.check:focus, .btn__text--box--l.check:focus, .btn__ic--box--l.check:focus {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.check:focus [class*=ic-], .btn__text--box--l.check:focus [class*=ic-], .btn__ic--box--l.check:focus [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--l.check:focus::after, .btn__text--box--l.check:focus::after, .btn__ic--box--l.check:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.check:hover, .btn__text--box--l.check:hover, .btn__ic--box--l.check:hover {
  color: var(--color-gray-000);
  background-color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check:hover [class*=ic-], .btn__text--box--l.check:hover [class*=ic-], .btn__ic--box--l.check:hover [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--l.check:hover::after, .btn__text--box--l.check:hover::after, .btn__ic--box--l.check:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--l.check:not(:disabled):not(.disabled):active, .btn__ic--l.check:not(:disabled):not(.disabled).active, .btn__ic--l.check:not(:disabled):not(.disabled).actvie, .btn__text--box--l.check:not(:disabled):not(.disabled):active, .btn__text--box--l.check:not(:disabled):not(.disabled).active, .btn__text--box--l.check:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.check:not(:disabled):not(.disabled):active, .btn__ic--box--l.check:not(:disabled):not(.disabled).active, .btn__ic--box--l.check:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.check:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--l.check:not(:disabled):not(.disabled):active::after, .btn__ic--l.check:not(:disabled):not(.disabled).active::after, .btn__ic--l.check:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.check:not(:disabled):not(.disabled):active::after, .btn__text--box--l.check:not(:disabled):not(.disabled).active::after, .btn__text--box--l.check:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.check:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.check:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.check:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--l.check:disabled, .btn__ic--l.check.disabled, .btn__text--box--l.check:disabled, .btn__text--box--l.check.disabled, .btn__ic--box--l.check:disabled, .btn__ic--box--l.check.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.check:disabled [class*=ic-], .btn__ic--l.check.disabled [class*=ic-], .btn__text--box--l.check:disabled [class*=ic-], .btn__text--box--l.check.disabled [class*=ic-], .btn__ic--box--l.check:disabled [class*=ic-], .btn__ic--box--l.check.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.check:disabled::after, .btn__ic--l.check.disabled::after, .btn__text--box--l.check:disabled::after, .btn__text--box--l.check.disabled::after, .btn__ic--box--l.check:disabled::after, .btn__ic--box--l.check.disabled::after {
  display: none;
}
.btn__ic--l.danger, .btn__text--box--l.danger, .btn__ic--box--l.danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--l.danger [class*=ic-], .btn__text--box--l.danger [class*=ic-], .btn__ic--box--l.danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--l.danger::after, .btn__text--box--l.danger::after, .btn__ic--box--l.danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.danger:focus, .btn__text--box--l.danger:focus, .btn__ic--box--l.danger:focus {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.danger:focus [class*=ic-], .btn__text--box--l.danger:focus [class*=ic-], .btn__ic--box--l.danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger:focus::after, .btn__text--box--l.danger:focus::after, .btn__ic--box--l.danger:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--l.danger:hover, .btn__text--box--l.danger:hover, .btn__ic--box--l.danger:hover {
  color: var(--btn-danger-font);
  background-color: var(--btn-danger-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--l.danger:hover [class*=ic-], .btn__text--box--l.danger:hover [class*=ic-], .btn__ic--box--l.danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger:hover::after, .btn__text--box--l.danger:hover::after, .btn__ic--box--l.danger:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--l.danger:not(:disabled):not(.disabled):active, .btn__ic--l.danger:not(:disabled):not(.disabled).active, .btn__ic--l.danger:not(:disabled):not(.disabled).actvie, .btn__text--box--l.danger:not(:disabled):not(.disabled):active, .btn__text--box--l.danger:not(:disabled):not(.disabled).active, .btn__text--box--l.danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.danger:not(:disabled):not(.disabled):active, .btn__ic--box--l.danger:not(:disabled):not(.disabled).active, .btn__ic--box--l.danger:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--l.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger:not(:disabled):not(.disabled):active::after, .btn__ic--l.danger:not(:disabled):not(.disabled).active::after, .btn__ic--l.danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.danger:not(:disabled):not(.disabled):active::after, .btn__text--box--l.danger:not(:disabled):not(.disabled).active::after, .btn__text--box--l.danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.danger:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--l.danger:disabled, .btn__ic--l.danger.disabled, .btn__text--box--l.danger:disabled, .btn__text--box--l.danger.disabled, .btn__ic--box--l.danger:disabled, .btn__ic--box--l.danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.danger:disabled [class*=ic-], .btn__ic--l.danger.disabled [class*=ic-], .btn__text--box--l.danger:disabled [class*=ic-], .btn__text--box--l.danger.disabled [class*=ic-], .btn__ic--box--l.danger:disabled [class*=ic-], .btn__ic--box--l.danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.danger:disabled::after, .btn__ic--l.danger.disabled::after, .btn__text--box--l.danger:disabled::after, .btn__text--box--l.danger.disabled::after, .btn__ic--box--l.danger:disabled::after, .btn__ic--box--l.danger.disabled::after {
  display: none;
}
.btn__ic--l.error, .btn__text--box--l.error, .btn__ic--box--l.error {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--l.error [class*=ic-], .btn__text--box--l.error [class*=ic-], .btn__ic--box--l.error [class*=ic-] {
  background: var(--btn-error-icon);
  pointer-events: none;
}
.btn__ic--l.error::after, .btn__text--box--l.error::after, .btn__ic--box--l.error::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.error:focus, .btn__text--box--l.error:focus, .btn__ic--box--l.error:focus {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.error:focus [class*=ic-], .btn__text--box--l.error:focus [class*=ic-], .btn__ic--box--l.error:focus [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--l.error:focus::after, .btn__text--box--l.error:focus::after, .btn__ic--box--l.error:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--l.error:hover, .btn__text--box--l.error:hover, .btn__ic--box--l.error:hover {
  color: var(--btn-error-font);
  background-color: var(--btn-error-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--l.error:hover [class*=ic-], .btn__text--box--l.error:hover [class*=ic-], .btn__ic--box--l.error:hover [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--l.error:hover::after, .btn__text--box--l.error:hover::after, .btn__ic--box--l.error:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--l.error:not(:disabled):not(.disabled):active, .btn__ic--l.error:not(:disabled):not(.disabled).active, .btn__ic--l.error:not(:disabled):not(.disabled).actvie, .btn__text--box--l.error:not(:disabled):not(.disabled):active, .btn__text--box--l.error:not(:disabled):not(.disabled).active, .btn__text--box--l.error:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.error:not(:disabled):not(.disabled):active, .btn__ic--box--l.error:not(:disabled):not(.disabled).active, .btn__ic--box--l.error:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--l.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.error:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--l.error:not(:disabled):not(.disabled):active::after, .btn__ic--l.error:not(:disabled):not(.disabled).active::after, .btn__ic--l.error:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.error:not(:disabled):not(.disabled):active::after, .btn__text--box--l.error:not(:disabled):not(.disabled).active::after, .btn__text--box--l.error:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.error:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.error:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.error:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--l.error:disabled, .btn__ic--l.error.disabled, .btn__text--box--l.error:disabled, .btn__text--box--l.error.disabled, .btn__ic--box--l.error:disabled, .btn__ic--box--l.error.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.error:disabled [class*=ic-], .btn__ic--l.error.disabled [class*=ic-], .btn__text--box--l.error:disabled [class*=ic-], .btn__text--box--l.error.disabled [class*=ic-], .btn__ic--box--l.error:disabled [class*=ic-], .btn__ic--box--l.error.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.error:disabled::after, .btn__ic--l.error.disabled::after, .btn__text--box--l.error:disabled::after, .btn__text--box--l.error.disabled::after, .btn__ic--box--l.error:disabled::after, .btn__ic--box--l.error.disabled::after {
  display: none;
}
.btn__ic--l.ghost-primary, .btn__text--box--l.ghost-primary, .btn__ic--box--l.ghost-primary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-primary [class*=ic-], .btn__text--box--l.ghost-primary [class*=ic-], .btn__ic--box--l.ghost-primary [class*=ic-] {
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--l.ghost-primary::after, .btn__text--box--l.ghost-primary::after, .btn__ic--box--l.ghost-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.ghost-primary:focus, .btn__text--box--l.ghost-primary:focus, .btn__ic--box--l.ghost-primary:focus {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.ghost-primary:focus [class*=ic-], .btn__text--box--l.ghost-primary:focus [class*=ic-], .btn__ic--box--l.ghost-primary:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.ghost-primary:focus::after, .btn__text--box--l.ghost-primary:focus::after, .btn__ic--box--l.ghost-primary:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.ghost-primary:hover, .btn__text--box--l.ghost-primary:hover, .btn__ic--box--l.ghost-primary:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-primary:hover [class*=ic-], .btn__text--box--l.ghost-primary:hover [class*=ic-], .btn__ic--box--l.ghost-primary:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.ghost-primary:hover::after, .btn__text--box--l.ghost-primary:hover::after, .btn__ic--box--l.ghost-primary:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled):active, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).active, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--l.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__text--box--l.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.ghost-primary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--l.ghost-primary:disabled, .btn__ic--l.ghost-primary.disabled, .btn__text--box--l.ghost-primary:disabled, .btn__text--box--l.ghost-primary.disabled, .btn__ic--box--l.ghost-primary:disabled, .btn__ic--box--l.ghost-primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.ghost-primary:disabled [class*=ic-], .btn__ic--l.ghost-primary.disabled [class*=ic-], .btn__text--box--l.ghost-primary:disabled [class*=ic-], .btn__text--box--l.ghost-primary.disabled [class*=ic-], .btn__ic--box--l.ghost-primary:disabled [class*=ic-], .btn__ic--box--l.ghost-primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.ghost-primary:disabled::after, .btn__ic--l.ghost-primary.disabled::after, .btn__text--box--l.ghost-primary:disabled::after, .btn__text--box--l.ghost-primary.disabled::after, .btn__ic--box--l.ghost-primary:disabled::after, .btn__ic--box--l.ghost-primary.disabled::after {
  display: none;
}
.btn__ic--l.ghost-tertiary, .btn__text--box--l.ghost-tertiary, .btn__ic--box--l.ghost-tertiary {
  background-color: transparent;
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-tertiary [class*=ic-], .btn__text--box--l.ghost-tertiary [class*=ic-], .btn__ic--box--l.ghost-tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--l.ghost-tertiary::after, .btn__text--box--l.ghost-tertiary::after, .btn__ic--box--l.ghost-tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.ghost-tertiary:focus, .btn__text--box--l.ghost-tertiary:focus, .btn__ic--box--l.ghost-tertiary:focus {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.ghost-tertiary:focus [class*=ic-], .btn__text--box--l.ghost-tertiary:focus [class*=ic-], .btn__ic--box--l.ghost-tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.ghost-tertiary:focus::after, .btn__text--box--l.ghost-tertiary:focus::after, .btn__ic--box--l.ghost-tertiary:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.ghost-tertiary:hover, .btn__text--box--l.ghost-tertiary:hover, .btn__ic--box--l.ghost-tertiary:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-tertiary:hover [class*=ic-], .btn__text--box--l.ghost-tertiary:hover [class*=ic-], .btn__ic--box--l.ghost-tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.ghost-tertiary:hover::after, .btn__text--box--l.ghost-tertiary:hover::after, .btn__ic--box--l.ghost-tertiary:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--l.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.ghost-tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--l.ghost-tertiary:disabled, .btn__ic--l.ghost-tertiary.disabled, .btn__text--box--l.ghost-tertiary:disabled, .btn__text--box--l.ghost-tertiary.disabled, .btn__ic--box--l.ghost-tertiary:disabled, .btn__ic--box--l.ghost-tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.ghost-tertiary:disabled [class*=ic-], .btn__ic--l.ghost-tertiary.disabled [class*=ic-], .btn__text--box--l.ghost-tertiary:disabled [class*=ic-], .btn__text--box--l.ghost-tertiary.disabled [class*=ic-], .btn__ic--box--l.ghost-tertiary:disabled [class*=ic-], .btn__ic--box--l.ghost-tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.ghost-tertiary:disabled::after, .btn__ic--l.ghost-tertiary.disabled::after, .btn__text--box--l.ghost-tertiary:disabled::after, .btn__text--box--l.ghost-tertiary.disabled::after, .btn__ic--box--l.ghost-tertiary:disabled::after, .btn__ic--box--l.ghost-tertiary.disabled::after {
  display: none;
}
.btn__ic--l.ghost-danger, .btn__text--box--l.ghost-danger, .btn__ic--box--l.ghost-danger {
  background-color: transparent;
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-danger [class*=ic-], .btn__text--box--l.ghost-danger [class*=ic-], .btn__ic--box--l.ghost-danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--l.ghost-danger::after, .btn__text--box--l.ghost-danger::after, .btn__ic--box--l.ghost-danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.ghost-danger:focus, .btn__text--box--l.ghost-danger:focus, .btn__ic--box--l.ghost-danger:focus {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.ghost-danger:focus [class*=ic-], .btn__text--box--l.ghost-danger:focus [class*=ic-], .btn__ic--box--l.ghost-danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.ghost-danger:focus::after, .btn__text--box--l.ghost-danger:focus::after, .btn__ic--box--l.ghost-danger:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--l.ghost-danger:hover, .btn__text--box--l.ghost-danger:hover, .btn__ic--box--l.ghost-danger:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-danger:hover [class*=ic-], .btn__text--box--l.ghost-danger:hover [class*=ic-], .btn__ic--box--l.ghost-danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.ghost-danger:hover::after, .btn__text--box--l.ghost-danger:hover::after, .btn__ic--box--l.ghost-danger:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--l.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled):active, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).active, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--l.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--l.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__text--box--l.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.ghost-danger:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--l.ghost-danger:disabled, .btn__ic--l.ghost-danger.disabled, .btn__text--box--l.ghost-danger:disabled, .btn__text--box--l.ghost-danger.disabled, .btn__ic--box--l.ghost-danger:disabled, .btn__ic--box--l.ghost-danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--l.ghost-danger:disabled [class*=ic-], .btn__ic--l.ghost-danger.disabled [class*=ic-], .btn__text--box--l.ghost-danger:disabled [class*=ic-], .btn__text--box--l.ghost-danger.disabled [class*=ic-], .btn__ic--box--l.ghost-danger:disabled [class*=ic-], .btn__ic--box--l.ghost-danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.ghost-danger:disabled::after, .btn__ic--l.ghost-danger.disabled::after, .btn__text--box--l.ghost-danger:disabled::after, .btn__text--box--l.ghost-danger.disabled::after, .btn__ic--box--l.ghost-danger:disabled::after, .btn__ic--box--l.ghost-danger.disabled::after {
  display: none;
}
.btn__ic--l.primary-line, .btn__text--box--l.primary-line, .btn__ic--box--l.primary-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary-line [class*=ic-], .btn__text--box--l.primary-line [class*=ic-], .btn__ic--box--l.primary-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--l.primary-line::after, .btn__text--box--l.primary-line::after, .btn__ic--box--l.primary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.primary-line:focus, .btn__text--box--l.primary-line:focus, .btn__ic--box--l.primary-line:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.primary-line:focus [class*=ic-], .btn__text--box--l.primary-line:focus [class*=ic-], .btn__ic--box--l.primary-line:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.primary-line:focus::after, .btn__text--box--l.primary-line:focus::after, .btn__ic--box--l.primary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.primary-line:hover, .btn__text--box--l.primary-line:hover, .btn__ic--box--l.primary-line:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary-line:hover [class*=ic-], .btn__text--box--l.primary-line:hover [class*=ic-], .btn__ic--box--l.primary-line:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.primary-line:hover::after, .btn__text--box--l.primary-line:hover::after, .btn__ic--box--l.primary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.primary-line:not(:disabled):not(.disabled):active, .btn__ic--l.primary-line:not(:disabled):not(.disabled).active, .btn__text--box--l.primary-line:not(:disabled):not(.disabled):active, .btn__text--box--l.primary-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.primary-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.primary-line:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.primary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--l.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.primary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.primary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.primary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.primary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--l.primary-line:disabled, .btn__ic--l.primary-line.disabled, .btn__text--box--l.primary-line:disabled, .btn__text--box--l.primary-line.disabled, .btn__ic--box--l.primary-line:disabled, .btn__ic--box--l.primary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.primary-line:disabled [class*=ic-], .btn__ic--l.primary-line.disabled [class*=ic-], .btn__text--box--l.primary-line:disabled [class*=ic-], .btn__text--box--l.primary-line.disabled [class*=ic-], .btn__ic--box--l.primary-line:disabled [class*=ic-], .btn__ic--box--l.primary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.primary-line:disabled::after, .btn__ic--l.primary-line.disabled::after, .btn__text--box--l.primary-line:disabled::after, .btn__text--box--l.primary-line.disabled::after, .btn__ic--box--l.primary-line:disabled::after, .btn__ic--box--l.primary-line.disabled::after {
  display: none;
}
.btn__ic--l.gray-line, .btn__text--box--l.gray-line, .btn__ic--box--l.gray-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--l.gray-line [class*=ic-], .btn__text--box--l.gray-line [class*=ic-], .btn__ic--box--l.gray-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--l.gray-line::after, .btn__text--box--l.gray-line::after, .btn__ic--box--l.gray-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.gray-line:focus, .btn__text--box--l.gray-line:focus, .btn__ic--box--l.gray-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.gray-line:focus [class*=ic-], .btn__text--box--l.gray-line:focus [class*=ic-], .btn__ic--box--l.gray-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.gray-line:focus::after, .btn__text--box--l.gray-line:focus::after, .btn__ic--box--l.gray-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.gray-line:hover, .btn__text--box--l.gray-line:hover, .btn__ic--box--l.gray-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--l.gray-line:hover [class*=ic-], .btn__text--box--l.gray-line:hover [class*=ic-], .btn__ic--box--l.gray-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.gray-line:hover::after, .btn__text--box--l.gray-line:hover::after, .btn__ic--box--l.gray-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.gray-line:not(:disabled):not(.disabled):active, .btn__ic--l.gray-line:not(:disabled):not(.disabled).active, .btn__text--box--l.gray-line:not(:disabled):not(.disabled):active, .btn__text--box--l.gray-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.gray-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.gray-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--l.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.gray-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.gray-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.gray-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.gray-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.gray-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--l.gray-line:disabled, .btn__ic--l.gray-line.disabled, .btn__text--box--l.gray-line:disabled, .btn__text--box--l.gray-line.disabled, .btn__ic--box--l.gray-line:disabled, .btn__ic--box--l.gray-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.gray-line:disabled [class*=ic-], .btn__ic--l.gray-line.disabled [class*=ic-], .btn__text--box--l.gray-line:disabled [class*=ic-], .btn__text--box--l.gray-line.disabled [class*=ic-], .btn__ic--box--l.gray-line:disabled [class*=ic-], .btn__ic--box--l.gray-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.gray-line:disabled::after, .btn__ic--l.gray-line.disabled::after, .btn__text--box--l.gray-line:disabled::after, .btn__text--box--l.gray-line.disabled::after, .btn__ic--box--l.gray-line:disabled::after, .btn__ic--box--l.gray-line.disabled::after {
  display: none;
}
.btn__ic--l.secondary-line, .btn__text--box--l.secondary-line, .btn__ic--box--l.secondary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.secondary-line [class*=ic-], .btn__text--box--l.secondary-line [class*=ic-], .btn__ic--box--l.secondary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--l.secondary-line::after, .btn__text--box--l.secondary-line::after, .btn__ic--box--l.secondary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.secondary-line:focus, .btn__text--box--l.secondary-line:focus, .btn__ic--box--l.secondary-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
}
.btn__ic--l.secondary-line:focus [class*=ic-], .btn__text--box--l.secondary-line:focus [class*=ic-], .btn__ic--box--l.secondary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.secondary-line:focus::after, .btn__text--box--l.secondary-line:focus::after, .btn__ic--box--l.secondary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.secondary-line:hover, .btn__text--box--l.secondary-line:hover, .btn__ic--box--l.secondary-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.secondary-line:hover [class*=ic-], .btn__text--box--l.secondary-line:hover [class*=ic-], .btn__ic--box--l.secondary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.secondary-line:hover::after, .btn__text--box--l.secondary-line:hover::after, .btn__ic--box--l.secondary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--l.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--l.secondary-line:not(:disabled):not(.disabled).active, .btn__text--box--l.secondary-line:not(:disabled):not(.disabled):active, .btn__text--box--l.secondary-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--l.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.secondary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.secondary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.secondary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.secondary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--l.secondary-line:disabled, .btn__ic--l.secondary-line.disabled, .btn__text--box--l.secondary-line:disabled, .btn__text--box--l.secondary-line.disabled, .btn__ic--box--l.secondary-line:disabled, .btn__ic--box--l.secondary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.secondary-line:disabled [class*=ic-], .btn__ic--l.secondary-line.disabled [class*=ic-], .btn__text--box--l.secondary-line:disabled [class*=ic-], .btn__text--box--l.secondary-line.disabled [class*=ic-], .btn__ic--box--l.secondary-line:disabled [class*=ic-], .btn__ic--box--l.secondary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.secondary-line:disabled::after, .btn__ic--l.secondary-line.disabled::after, .btn__text--box--l.secondary-line:disabled::after, .btn__text--box--l.secondary-line.disabled::after, .btn__ic--box--l.secondary-line:disabled::after, .btn__ic--box--l.secondary-line.disabled::after {
  display: none;
}
.btn__ic--l.tertiary-line, .btn__text--box--l.tertiary-line, .btn__ic--box--l.tertiary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.tertiary-line [class*=ic-], .btn__text--box--l.tertiary-line [class*=ic-], .btn__ic--box--l.tertiary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--l.tertiary-line::after, .btn__text--box--l.tertiary-line::after, .btn__ic--box--l.tertiary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.tertiary-line:focus, .btn__text--box--l.tertiary-line:focus, .btn__ic--box--l.tertiary-line:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--l.tertiary-line:focus [class*=ic-], .btn__text--box--l.tertiary-line:focus [class*=ic-], .btn__ic--box--l.tertiary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary-line:focus::after, .btn__text--box--l.tertiary-line:focus::after, .btn__ic--box--l.tertiary-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.tertiary-line:hover, .btn__text--box--l.tertiary-line:hover, .btn__ic--box--l.tertiary-line:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.tertiary-line:hover [class*=ic-], .btn__text--box--l.tertiary-line:hover [class*=ic-], .btn__ic--box--l.tertiary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary-line:hover::after, .btn__text--box--l.tertiary-line:hover::after, .btn__ic--box--l.tertiary-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--l.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--l.tertiary-line:not(:disabled):not(.disabled).active, .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled):active, .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--l.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--l.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.tertiary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--l.tertiary-line:disabled, .btn__ic--l.tertiary-line.disabled, .btn__text--box--l.tertiary-line:disabled, .btn__text--box--l.tertiary-line.disabled, .btn__ic--box--l.tertiary-line:disabled, .btn__ic--box--l.tertiary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.tertiary-line:disabled [class*=ic-], .btn__ic--l.tertiary-line.disabled [class*=ic-], .btn__text--box--l.tertiary-line:disabled [class*=ic-], .btn__text--box--l.tertiary-line.disabled [class*=ic-], .btn__ic--box--l.tertiary-line:disabled [class*=ic-], .btn__ic--box--l.tertiary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.tertiary-line:disabled::after, .btn__ic--l.tertiary-line.disabled::after, .btn__text--box--l.tertiary-line:disabled::after, .btn__text--box--l.tertiary-line.disabled::after, .btn__ic--box--l.tertiary-line:disabled::after, .btn__ic--box--l.tertiary-line.disabled::after {
  display: none;
}
.btn__ic--l.check-line, .btn__text--box--l.check-line, .btn__ic--box--l.check-line {
  position: relative;
  isolation: isolate;
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check-line [class*=ic-], .btn__text--box--l.check-line [class*=ic-], .btn__ic--box--l.check-line [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__ic--l.check-line::after, .btn__text--box--l.check-line::after, .btn__ic--box--l.check-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.check-line:focus, .btn__text--box--l.check-line:focus, .btn__ic--box--l.check-line:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.check-line:focus [class*=ic-], .btn__text--box--l.check-line:focus [class*=ic-], .btn__ic--box--l.check-line:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--l.check-line:focus::after, .btn__text--box--l.check-line:focus::after, .btn__ic--box--l.check-line:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--l.check-line:hover, .btn__text--box--l.check-line:hover, .btn__ic--box--l.check-line:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check-line:hover [class*=ic-], .btn__text--box--l.check-line:hover [class*=ic-], .btn__ic--box--l.check-line:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--l.check-line:hover::after, .btn__text--box--l.check-line:hover::after, .btn__ic--box--l.check-line:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--l.check-line:not(:disabled):not(.disabled):active, .btn__ic--l.check-line:not(:disabled):not(.disabled).active, .btn__text--box--l.check-line:not(:disabled):not(.disabled):active, .btn__text--box--l.check-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.check-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.check-line:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--l.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.check-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--l.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.check-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.check-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.check-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.check-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__ic--l.check-line:disabled, .btn__ic--l.check-line.disabled, .btn__text--box--l.check-line:disabled, .btn__text--box--l.check-line.disabled, .btn__ic--box--l.check-line:disabled, .btn__ic--box--l.check-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.check-line:disabled [class*=ic-], .btn__ic--l.check-line.disabled [class*=ic-], .btn__text--box--l.check-line:disabled [class*=ic-], .btn__text--box--l.check-line.disabled [class*=ic-], .btn__ic--box--l.check-line:disabled [class*=ic-], .btn__ic--box--l.check-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.check-line:disabled::after, .btn__ic--l.check-line.disabled::after, .btn__text--box--l.check-line:disabled::after, .btn__text--box--l.check-line.disabled::after, .btn__ic--box--l.check-line:disabled::after, .btn__ic--box--l.check-line.disabled::after {
  display: none;
}
.btn__ic--l.danger-line, .btn__text--box--l.danger-line, .btn__ic--box--l.danger-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--l.danger-line [class*=ic-], .btn__text--box--l.danger-line [class*=ic-], .btn__ic--box--l.danger-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--l.danger-line::after, .btn__text--box--l.danger-line::after, .btn__ic--box--l.danger-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--l.danger-line:focus, .btn__text--box--l.danger-line:focus, .btn__ic--box--l.danger-line:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--l.danger-line:focus [class*=ic-], .btn__text--box--l.danger-line:focus [class*=ic-], .btn__ic--box--l.danger-line:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger-line:focus::after, .btn__text--box--l.danger-line:focus::after, .btn__ic--box--l.danger-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--l.danger-line:hover, .btn__text--box--l.danger-line:hover, .btn__ic--box--l.danger-line:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--l.danger-line:hover [class*=ic-], .btn__text--box--l.danger-line:hover [class*=ic-], .btn__ic--box--l.danger-line:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger-line:hover::after, .btn__text--box--l.danger-line:hover::after, .btn__ic--box--l.danger-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--l.danger-line:not(:disabled):not(.disabled):active, .btn__ic--l.danger-line:not(:disabled):not(.disabled).active, .btn__text--box--l.danger-line:not(:disabled):not(.disabled):active, .btn__text--box--l.danger-line:not(:disabled):not(.disabled).active, .btn__ic--box--l.danger-line:not(:disabled):not(.disabled):active, .btn__ic--box--l.danger-line:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--l.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--l.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--l.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--l.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--l.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--l.danger-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--l.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--l.danger-line:not(:disabled):not(.disabled).active::after, .btn__text--box--l.danger-line:not(:disabled):not(.disabled):active::after, .btn__text--box--l.danger-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--l.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--l.danger-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--l.danger-line:disabled, .btn__ic--l.danger-line.disabled, .btn__text--box--l.danger-line:disabled, .btn__text--box--l.danger-line.disabled, .btn__ic--box--l.danger-line:disabled, .btn__ic--box--l.danger-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--l.danger-line:disabled [class*=ic-], .btn__ic--l.danger-line.disabled [class*=ic-], .btn__text--box--l.danger-line:disabled [class*=ic-], .btn__text--box--l.danger-line.disabled [class*=ic-], .btn__ic--box--l.danger-line:disabled [class*=ic-], .btn__ic--box--l.danger-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--l.danger-line:disabled::after, .btn__ic--l.danger-line.disabled::after, .btn__text--box--l.danger-line:disabled::after, .btn__text--box--l.danger-line.disabled::after, .btn__ic--box--l.danger-line:disabled::after, .btn__ic--box--l.danger-line.disabled::after {
  display: none;
}
.btn__text--box--l {
  --icon-size: 1.875rem;
  --icon-gap: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: var(--icon-gap);
}
.btn__text--box--l.google {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--l.google::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_google.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--l.google::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--l.google:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--l.google:focus::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--l.google:hover {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--l.google:hover::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--l.google:not(:disabled):not(.disabled):active, .btn__text--box--l.google:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--l.google:not(:disabled):not(.disabled):active::after, .btn__text--box--l.google:not(:disabled):not(.disabled).active::after {
  background-color: rgba(43, 47, 66, 0.25);
}
.btn__text--box--l.google:disabled, .btn__text--box--l.google.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_google_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--l.google:disabled::after, .btn__text--box--l.google.disabled::after {
  display: none;
}
.btn__text--box--l.kakao {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--l.kakao::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_kakao.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--l.kakao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--l.kakao:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--l.kakao:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--l.kakao:hover {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--l.kakao:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--l.kakao:not(:disabled):not(.disabled):active, .btn__text--box--l.kakao:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--l.kakao:not(:disabled):not(.disabled):active::after, .btn__text--box--l.kakao:not(:disabled):not(.disabled).active::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__text--box--l.kakao:disabled, .btn__text--box--l.kakao.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_kakao_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--l.kakao:disabled::after, .btn__text--box--l.kakao.disabled::after {
  display: none;
}
.btn__text--box--l.excel {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.excel::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_xls.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--l.excel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--l.excel:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.excel:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--l.excel:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.excel:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--l.excel:not(:disabled):not(.disabled):active, .btn__text--box--l.excel:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.excel:not(:disabled):not(.disabled):active::after, .btn__text--box--l.excel:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--l.excel:disabled, .btn__text--box--l.excel.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--l.excel:disabled::after, .btn__text--box--l.excel.disabled::after {
  display: none;
}
.btn__text--box--l.pdf {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--l.pdf::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--l.pdf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--l.pdf:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--l.pdf:focus::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--l.pdf:hover {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--l.pdf:hover::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--l.pdf:not(:disabled):not(.disabled):active, .btn__text--box--l.pdf:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--l.pdf:not(:disabled):not(.disabled):active::after, .btn__text--box--l.pdf:not(:disabled):not(.disabled).active::after {
  background-color: rgba(222, 52, 18, 0.25);
}
.btn__text--box--l.pdf:disabled, .btn__text--box--l.pdf.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--l.pdf:disabled::after, .btn__text--box--l.pdf.disabled::after {
  display: none;
}
.btn__text--box--l.csv {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.csv::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--l.csv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--l.csv:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.csv:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--l.csv:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.csv:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--l.csv:not(:disabled):not(.disabled):active, .btn__text--box--l.csv:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--l.csv:not(:disabled):not(.disabled):active::after, .btn__text--box--l.csv:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--l.csv:disabled, .btn__text--box--l.csv.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--l.csv:disabled::after, .btn__text--box--l.csv.disabled::after {
  display: none;
}
.btn__ic--m {
  height: fit-content;
  line-height: 0;
  padding: 0.313rem;
}
.btn__ic--box--m {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 2.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.313rem 1.125rem;
}
.btn__ic--box--m .btn__ic__text {
  font-weight: 400;
  pointer-events: none;
}
.btn__ic--box--m span:first-of-type {
  margin-right: 0.625rem;
}
.btn__text--box--m {
  height: 2.125rem;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.5rem 1.125rem;
}
.btn__ic--m.primary, .btn__text--box--m.primary, .btn__ic--box--m.primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary [class*=ic-], .btn__text--box--m.primary [class*=ic-], .btn__ic--box--m.primary [class*=ic-] {
  background: var(--btn-primary-icon);
  pointer-events: none;
}
.btn__ic--m.primary::after, .btn__text--box--m.primary::after, .btn__ic--box--m.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.primary:focus, .btn__text--box--m.primary:focus, .btn__ic--box--m.primary:focus {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.primary:focus [class*=ic-], .btn__text--box--m.primary:focus [class*=ic-], .btn__ic--box--m.primary:focus [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--m.primary:focus::after, .btn__text--box--m.primary:focus::after, .btn__ic--box--m.primary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.primary:hover, .btn__text--box--m.primary:hover, .btn__ic--box--m.primary:hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary:hover [class*=ic-], .btn__text--box--m.primary:hover [class*=ic-], .btn__ic--box--m.primary:hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--m.primary:hover::after, .btn__text--box--m.primary:hover::after, .btn__ic--box--m.primary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.primary:not(:disabled):not(.disabled):active, .btn__ic--m.primary:not(:disabled):not(.disabled).active, .btn__ic--m.primary:not(:disabled):not(.disabled).actvie, .btn__text--box--m.primary:not(:disabled):not(.disabled):active, .btn__text--box--m.primary:not(:disabled):not(.disabled).active, .btn__text--box--m.primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.primary:not(:disabled):not(.disabled):active, .btn__ic--box--m.primary:not(:disabled):not(.disabled).active, .btn__ic--box--m.primary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--m.primary:not(:disabled):not(.disabled):active::after, .btn__ic--m.primary:not(:disabled):not(.disabled).active::after, .btn__ic--m.primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.primary:not(:disabled):not(.disabled):active::after, .btn__text--box--m.primary:not(:disabled):not(.disabled).active::after, .btn__text--box--m.primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.primary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--m.primary:disabled, .btn__ic--m.primary.disabled, .btn__text--box--m.primary:disabled, .btn__text--box--m.primary.disabled, .btn__ic--box--m.primary:disabled, .btn__ic--box--m.primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.primary:disabled [class*=ic-], .btn__ic--m.primary.disabled [class*=ic-], .btn__text--box--m.primary:disabled [class*=ic-], .btn__text--box--m.primary.disabled [class*=ic-], .btn__ic--box--m.primary:disabled [class*=ic-], .btn__ic--box--m.primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.primary:disabled::after, .btn__ic--m.primary.disabled::after, .btn__text--box--m.primary:disabled::after, .btn__text--box--m.primary.disabled::after, .btn__ic--box--m.primary:disabled::after, .btn__ic--box--m.primary.disabled::after {
  display: none;
}
.btn__ic--m.secondary, .btn__text--box--m.secondary, .btn__ic--box--m.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--m.secondary [class*=ic-], .btn__text--box--m.secondary [class*=ic-], .btn__ic--box--m.secondary [class*=ic-] {
  background: var(--btn-secondary-icon);
  pointer-events: none;
}
.btn__ic--m.secondary::after, .btn__text--box--m.secondary::after, .btn__ic--box--m.secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.secondary:focus, .btn__text--box--m.secondary:focus, .btn__ic--box--m.secondary:focus {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.secondary:focus [class*=ic-], .btn__text--box--m.secondary:focus [class*=ic-], .btn__ic--box--m.secondary:focus [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--m.secondary:focus::after, .btn__text--box--m.secondary:focus::after, .btn__ic--box--m.secondary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.secondary:hover, .btn__text--box--m.secondary:hover, .btn__ic--box--m.secondary:hover {
  color: var(--btn-secondary-font);
  background-color: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--m.secondary:hover [class*=ic-], .btn__text--box--m.secondary:hover [class*=ic-], .btn__ic--box--m.secondary:hover [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--m.secondary:hover::after, .btn__text--box--m.secondary:hover::after, .btn__ic--box--m.secondary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.secondary:not(:disabled):not(.disabled):active, .btn__ic--m.secondary:not(:disabled):not(.disabled).active, .btn__ic--m.secondary:not(:disabled):not(.disabled).actvie, .btn__text--box--m.secondary:not(:disabled):not(.disabled):active, .btn__text--box--m.secondary:not(:disabled):not(.disabled).active, .btn__text--box--m.secondary:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.secondary:not(:disabled):not(.disabled):active, .btn__ic--box--m.secondary:not(:disabled):not(.disabled).active, .btn__ic--box--m.secondary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--m.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.secondary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--m.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--m.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--m.secondary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.secondary:not(:disabled):not(.disabled):active::after, .btn__text--box--m.secondary:not(:disabled):not(.disabled).active::after, .btn__text--box--m.secondary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.secondary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--m.secondary:disabled, .btn__ic--m.secondary.disabled, .btn__text--box--m.secondary:disabled, .btn__text--box--m.secondary.disabled, .btn__ic--box--m.secondary:disabled, .btn__ic--box--m.secondary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.secondary:disabled [class*=ic-], .btn__ic--m.secondary.disabled [class*=ic-], .btn__text--box--m.secondary:disabled [class*=ic-], .btn__text--box--m.secondary.disabled [class*=ic-], .btn__ic--box--m.secondary:disabled [class*=ic-], .btn__ic--box--m.secondary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.secondary:disabled::after, .btn__ic--m.secondary.disabled::after, .btn__text--box--m.secondary:disabled::after, .btn__text--box--m.secondary.disabled::after, .btn__ic--box--m.secondary:disabled::after, .btn__ic--box--m.secondary.disabled::after {
  display: none;
}
.btn__ic--m.tertiary, .btn__text--box--m.tertiary, .btn__ic--box--m.tertiary {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.tertiary [class*=ic-], .btn__text--box--m.tertiary [class*=ic-], .btn__ic--box--m.tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--m.tertiary::after, .btn__text--box--m.tertiary::after, .btn__ic--box--m.tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.tertiary:focus, .btn__text--box--m.tertiary:focus, .btn__ic--box--m.tertiary:focus {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.tertiary:focus [class*=ic-], .btn__text--box--m.tertiary:focus [class*=ic-], .btn__ic--box--m.tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary:focus::after, .btn__text--box--m.tertiary:focus::after, .btn__ic--box--m.tertiary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.tertiary:hover, .btn__text--box--m.tertiary:hover, .btn__ic--box--m.tertiary:hover {
  color: var(--color-gray-070);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.tertiary:hover [class*=ic-], .btn__text--box--m.tertiary:hover [class*=ic-], .btn__ic--box--m.tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary:hover::after, .btn__text--box--m.tertiary:hover::after, .btn__ic--box--m.tertiary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.tertiary:not(:disabled):not(.disabled):active, .btn__ic--m.tertiary:not(:disabled):not(.disabled).active, .btn__ic--m.tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--m.tertiary:not(:disabled):not(.disabled):active, .btn__text--box--m.tertiary:not(:disabled):not(.disabled).active, .btn__text--box--m.tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--m.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--m.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--m.tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--m.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--m.tertiary:disabled, .btn__ic--m.tertiary.disabled, .btn__text--box--m.tertiary:disabled, .btn__text--box--m.tertiary.disabled, .btn__ic--box--m.tertiary:disabled, .btn__ic--box--m.tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.tertiary:disabled [class*=ic-], .btn__ic--m.tertiary.disabled [class*=ic-], .btn__text--box--m.tertiary:disabled [class*=ic-], .btn__text--box--m.tertiary.disabled [class*=ic-], .btn__ic--box--m.tertiary:disabled [class*=ic-], .btn__ic--box--m.tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.tertiary:disabled::after, .btn__ic--m.tertiary.disabled::after, .btn__text--box--m.tertiary:disabled::after, .btn__text--box--m.tertiary.disabled::after, .btn__ic--box--m.tertiary:disabled::after, .btn__ic--box--m.tertiary.disabled::after {
  display: none;
}
.btn__ic--m.check, .btn__text--box--m.check, .btn__ic--box--m.check {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check [class*=ic-], .btn__text--box--m.check [class*=ic-], .btn__ic--box--m.check [class*=ic-] {
  background: var(--color-gray-000);
  pointer-events: none;
}
.btn__ic--m.check::after, .btn__text--box--m.check::after, .btn__ic--box--m.check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.check:focus, .btn__text--box--m.check:focus, .btn__ic--box--m.check:focus {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.check:focus [class*=ic-], .btn__text--box--m.check:focus [class*=ic-], .btn__ic--box--m.check:focus [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--m.check:focus::after, .btn__text--box--m.check:focus::after, .btn__ic--box--m.check:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.check:hover, .btn__text--box--m.check:hover, .btn__ic--box--m.check:hover {
  color: var(--color-gray-000);
  background-color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check:hover [class*=ic-], .btn__text--box--m.check:hover [class*=ic-], .btn__ic--box--m.check:hover [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--m.check:hover::after, .btn__text--box--m.check:hover::after, .btn__ic--box--m.check:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--m.check:not(:disabled):not(.disabled):active, .btn__ic--m.check:not(:disabled):not(.disabled).active, .btn__ic--m.check:not(:disabled):not(.disabled).actvie, .btn__text--box--m.check:not(:disabled):not(.disabled):active, .btn__text--box--m.check:not(:disabled):not(.disabled).active, .btn__text--box--m.check:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.check:not(:disabled):not(.disabled):active, .btn__ic--box--m.check:not(:disabled):not(.disabled).active, .btn__ic--box--m.check:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.check:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--m.check:not(:disabled):not(.disabled):active::after, .btn__ic--m.check:not(:disabled):not(.disabled).active::after, .btn__ic--m.check:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.check:not(:disabled):not(.disabled):active::after, .btn__text--box--m.check:not(:disabled):not(.disabled).active::after, .btn__text--box--m.check:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.check:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.check:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.check:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--m.check:disabled, .btn__ic--m.check.disabled, .btn__text--box--m.check:disabled, .btn__text--box--m.check.disabled, .btn__ic--box--m.check:disabled, .btn__ic--box--m.check.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.check:disabled [class*=ic-], .btn__ic--m.check.disabled [class*=ic-], .btn__text--box--m.check:disabled [class*=ic-], .btn__text--box--m.check.disabled [class*=ic-], .btn__ic--box--m.check:disabled [class*=ic-], .btn__ic--box--m.check.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.check:disabled::after, .btn__ic--m.check.disabled::after, .btn__text--box--m.check:disabled::after, .btn__text--box--m.check.disabled::after, .btn__ic--box--m.check:disabled::after, .btn__ic--box--m.check.disabled::after {
  display: none;
}
.btn__ic--m.danger, .btn__text--box--m.danger, .btn__ic--box--m.danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--m.danger [class*=ic-], .btn__text--box--m.danger [class*=ic-], .btn__ic--box--m.danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--m.danger::after, .btn__text--box--m.danger::after, .btn__ic--box--m.danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.danger:focus, .btn__text--box--m.danger:focus, .btn__ic--box--m.danger:focus {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.danger:focus [class*=ic-], .btn__text--box--m.danger:focus [class*=ic-], .btn__ic--box--m.danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger:focus::after, .btn__text--box--m.danger:focus::after, .btn__ic--box--m.danger:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--m.danger:hover, .btn__text--box--m.danger:hover, .btn__ic--box--m.danger:hover {
  color: var(--btn-danger-font);
  background-color: var(--btn-danger-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--m.danger:hover [class*=ic-], .btn__text--box--m.danger:hover [class*=ic-], .btn__ic--box--m.danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger:hover::after, .btn__text--box--m.danger:hover::after, .btn__ic--box--m.danger:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--m.danger:not(:disabled):not(.disabled):active, .btn__ic--m.danger:not(:disabled):not(.disabled).active, .btn__ic--m.danger:not(:disabled):not(.disabled).actvie, .btn__text--box--m.danger:not(:disabled):not(.disabled):active, .btn__text--box--m.danger:not(:disabled):not(.disabled).active, .btn__text--box--m.danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.danger:not(:disabled):not(.disabled):active, .btn__ic--box--m.danger:not(:disabled):not(.disabled).active, .btn__ic--box--m.danger:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--m.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger:not(:disabled):not(.disabled):active::after, .btn__ic--m.danger:not(:disabled):not(.disabled).active::after, .btn__ic--m.danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.danger:not(:disabled):not(.disabled):active::after, .btn__text--box--m.danger:not(:disabled):not(.disabled).active::after, .btn__text--box--m.danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.danger:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--m.danger:disabled, .btn__ic--m.danger.disabled, .btn__text--box--m.danger:disabled, .btn__text--box--m.danger.disabled, .btn__ic--box--m.danger:disabled, .btn__ic--box--m.danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.danger:disabled [class*=ic-], .btn__ic--m.danger.disabled [class*=ic-], .btn__text--box--m.danger:disabled [class*=ic-], .btn__text--box--m.danger.disabled [class*=ic-], .btn__ic--box--m.danger:disabled [class*=ic-], .btn__ic--box--m.danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.danger:disabled::after, .btn__ic--m.danger.disabled::after, .btn__text--box--m.danger:disabled::after, .btn__text--box--m.danger.disabled::after, .btn__ic--box--m.danger:disabled::after, .btn__ic--box--m.danger.disabled::after {
  display: none;
}
.btn__ic--m.error, .btn__text--box--m.error, .btn__ic--box--m.error {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--m.error [class*=ic-], .btn__text--box--m.error [class*=ic-], .btn__ic--box--m.error [class*=ic-] {
  background: var(--btn-error-icon);
  pointer-events: none;
}
.btn__ic--m.error::after, .btn__text--box--m.error::after, .btn__ic--box--m.error::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.error:focus, .btn__text--box--m.error:focus, .btn__ic--box--m.error:focus {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.error:focus [class*=ic-], .btn__text--box--m.error:focus [class*=ic-], .btn__ic--box--m.error:focus [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--m.error:focus::after, .btn__text--box--m.error:focus::after, .btn__ic--box--m.error:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--m.error:hover, .btn__text--box--m.error:hover, .btn__ic--box--m.error:hover {
  color: var(--btn-error-font);
  background-color: var(--btn-error-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--m.error:hover [class*=ic-], .btn__text--box--m.error:hover [class*=ic-], .btn__ic--box--m.error:hover [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--m.error:hover::after, .btn__text--box--m.error:hover::after, .btn__ic--box--m.error:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--m.error:not(:disabled):not(.disabled):active, .btn__ic--m.error:not(:disabled):not(.disabled).active, .btn__ic--m.error:not(:disabled):not(.disabled).actvie, .btn__text--box--m.error:not(:disabled):not(.disabled):active, .btn__text--box--m.error:not(:disabled):not(.disabled).active, .btn__text--box--m.error:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.error:not(:disabled):not(.disabled):active, .btn__ic--box--m.error:not(:disabled):not(.disabled).active, .btn__ic--box--m.error:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--m.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.error:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--m.error:not(:disabled):not(.disabled):active::after, .btn__ic--m.error:not(:disabled):not(.disabled).active::after, .btn__ic--m.error:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.error:not(:disabled):not(.disabled):active::after, .btn__text--box--m.error:not(:disabled):not(.disabled).active::after, .btn__text--box--m.error:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.error:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.error:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.error:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--m.error:disabled, .btn__ic--m.error.disabled, .btn__text--box--m.error:disabled, .btn__text--box--m.error.disabled, .btn__ic--box--m.error:disabled, .btn__ic--box--m.error.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.error:disabled [class*=ic-], .btn__ic--m.error.disabled [class*=ic-], .btn__text--box--m.error:disabled [class*=ic-], .btn__text--box--m.error.disabled [class*=ic-], .btn__ic--box--m.error:disabled [class*=ic-], .btn__ic--box--m.error.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.error:disabled::after, .btn__ic--m.error.disabled::after, .btn__text--box--m.error:disabled::after, .btn__text--box--m.error.disabled::after, .btn__ic--box--m.error:disabled::after, .btn__ic--box--m.error.disabled::after {
  display: none;
}
.btn__ic--m.ghost-primary, .btn__text--box--m.ghost-primary, .btn__ic--box--m.ghost-primary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-primary [class*=ic-], .btn__text--box--m.ghost-primary [class*=ic-], .btn__ic--box--m.ghost-primary [class*=ic-] {
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--m.ghost-primary::after, .btn__text--box--m.ghost-primary::after, .btn__ic--box--m.ghost-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.ghost-primary:focus, .btn__text--box--m.ghost-primary:focus, .btn__ic--box--m.ghost-primary:focus {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.ghost-primary:focus [class*=ic-], .btn__text--box--m.ghost-primary:focus [class*=ic-], .btn__ic--box--m.ghost-primary:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.ghost-primary:focus::after, .btn__text--box--m.ghost-primary:focus::after, .btn__ic--box--m.ghost-primary:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.ghost-primary:hover, .btn__text--box--m.ghost-primary:hover, .btn__ic--box--m.ghost-primary:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-primary:hover [class*=ic-], .btn__text--box--m.ghost-primary:hover [class*=ic-], .btn__ic--box--m.ghost-primary:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.ghost-primary:hover::after, .btn__text--box--m.ghost-primary:hover::after, .btn__ic--box--m.ghost-primary:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled):active, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).active, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--m.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__text--box--m.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.ghost-primary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--m.ghost-primary:disabled, .btn__ic--m.ghost-primary.disabled, .btn__text--box--m.ghost-primary:disabled, .btn__text--box--m.ghost-primary.disabled, .btn__ic--box--m.ghost-primary:disabled, .btn__ic--box--m.ghost-primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.ghost-primary:disabled [class*=ic-], .btn__ic--m.ghost-primary.disabled [class*=ic-], .btn__text--box--m.ghost-primary:disabled [class*=ic-], .btn__text--box--m.ghost-primary.disabled [class*=ic-], .btn__ic--box--m.ghost-primary:disabled [class*=ic-], .btn__ic--box--m.ghost-primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.ghost-primary:disabled::after, .btn__ic--m.ghost-primary.disabled::after, .btn__text--box--m.ghost-primary:disabled::after, .btn__text--box--m.ghost-primary.disabled::after, .btn__ic--box--m.ghost-primary:disabled::after, .btn__ic--box--m.ghost-primary.disabled::after {
  display: none;
}
.btn__ic--m.ghost-tertiary, .btn__text--box--m.ghost-tertiary, .btn__ic--box--m.ghost-tertiary {
  background-color: transparent;
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-tertiary [class*=ic-], .btn__text--box--m.ghost-tertiary [class*=ic-], .btn__ic--box--m.ghost-tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--m.ghost-tertiary::after, .btn__text--box--m.ghost-tertiary::after, .btn__ic--box--m.ghost-tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.ghost-tertiary:focus, .btn__text--box--m.ghost-tertiary:focus, .btn__ic--box--m.ghost-tertiary:focus {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.ghost-tertiary:focus [class*=ic-], .btn__text--box--m.ghost-tertiary:focus [class*=ic-], .btn__ic--box--m.ghost-tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.ghost-tertiary:focus::after, .btn__text--box--m.ghost-tertiary:focus::after, .btn__ic--box--m.ghost-tertiary:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.ghost-tertiary:hover, .btn__text--box--m.ghost-tertiary:hover, .btn__ic--box--m.ghost-tertiary:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-tertiary:hover [class*=ic-], .btn__text--box--m.ghost-tertiary:hover [class*=ic-], .btn__ic--box--m.ghost-tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.ghost-tertiary:hover::after, .btn__text--box--m.ghost-tertiary:hover::after, .btn__ic--box--m.ghost-tertiary:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--m.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.ghost-tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--m.ghost-tertiary:disabled, .btn__ic--m.ghost-tertiary.disabled, .btn__text--box--m.ghost-tertiary:disabled, .btn__text--box--m.ghost-tertiary.disabled, .btn__ic--box--m.ghost-tertiary:disabled, .btn__ic--box--m.ghost-tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.ghost-tertiary:disabled [class*=ic-], .btn__ic--m.ghost-tertiary.disabled [class*=ic-], .btn__text--box--m.ghost-tertiary:disabled [class*=ic-], .btn__text--box--m.ghost-tertiary.disabled [class*=ic-], .btn__ic--box--m.ghost-tertiary:disabled [class*=ic-], .btn__ic--box--m.ghost-tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.ghost-tertiary:disabled::after, .btn__ic--m.ghost-tertiary.disabled::after, .btn__text--box--m.ghost-tertiary:disabled::after, .btn__text--box--m.ghost-tertiary.disabled::after, .btn__ic--box--m.ghost-tertiary:disabled::after, .btn__ic--box--m.ghost-tertiary.disabled::after {
  display: none;
}
.btn__ic--m.ghost-danger, .btn__text--box--m.ghost-danger, .btn__ic--box--m.ghost-danger {
  background-color: transparent;
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-danger [class*=ic-], .btn__text--box--m.ghost-danger [class*=ic-], .btn__ic--box--m.ghost-danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--m.ghost-danger::after, .btn__text--box--m.ghost-danger::after, .btn__ic--box--m.ghost-danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.ghost-danger:focus, .btn__text--box--m.ghost-danger:focus, .btn__ic--box--m.ghost-danger:focus {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.ghost-danger:focus [class*=ic-], .btn__text--box--m.ghost-danger:focus [class*=ic-], .btn__ic--box--m.ghost-danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.ghost-danger:focus::after, .btn__text--box--m.ghost-danger:focus::after, .btn__ic--box--m.ghost-danger:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--m.ghost-danger:hover, .btn__text--box--m.ghost-danger:hover, .btn__ic--box--m.ghost-danger:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-danger:hover [class*=ic-], .btn__text--box--m.ghost-danger:hover [class*=ic-], .btn__ic--box--m.ghost-danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.ghost-danger:hover::after, .btn__text--box--m.ghost-danger:hover::after, .btn__ic--box--m.ghost-danger:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--m.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled):active, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).active, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--m.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--m.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__text--box--m.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.ghost-danger:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--m.ghost-danger:disabled, .btn__ic--m.ghost-danger.disabled, .btn__text--box--m.ghost-danger:disabled, .btn__text--box--m.ghost-danger.disabled, .btn__ic--box--m.ghost-danger:disabled, .btn__ic--box--m.ghost-danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--m.ghost-danger:disabled [class*=ic-], .btn__ic--m.ghost-danger.disabled [class*=ic-], .btn__text--box--m.ghost-danger:disabled [class*=ic-], .btn__text--box--m.ghost-danger.disabled [class*=ic-], .btn__ic--box--m.ghost-danger:disabled [class*=ic-], .btn__ic--box--m.ghost-danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.ghost-danger:disabled::after, .btn__ic--m.ghost-danger.disabled::after, .btn__text--box--m.ghost-danger:disabled::after, .btn__text--box--m.ghost-danger.disabled::after, .btn__ic--box--m.ghost-danger:disabled::after, .btn__ic--box--m.ghost-danger.disabled::after {
  display: none;
}
.btn__ic--m.primary-line, .btn__text--box--m.primary-line, .btn__ic--box--m.primary-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary-line [class*=ic-], .btn__text--box--m.primary-line [class*=ic-], .btn__ic--box--m.primary-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--m.primary-line::after, .btn__text--box--m.primary-line::after, .btn__ic--box--m.primary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.primary-line:focus, .btn__text--box--m.primary-line:focus, .btn__ic--box--m.primary-line:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.primary-line:focus [class*=ic-], .btn__text--box--m.primary-line:focus [class*=ic-], .btn__ic--box--m.primary-line:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.primary-line:focus::after, .btn__text--box--m.primary-line:focus::after, .btn__ic--box--m.primary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.primary-line:hover, .btn__text--box--m.primary-line:hover, .btn__ic--box--m.primary-line:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary-line:hover [class*=ic-], .btn__text--box--m.primary-line:hover [class*=ic-], .btn__ic--box--m.primary-line:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.primary-line:hover::after, .btn__text--box--m.primary-line:hover::after, .btn__ic--box--m.primary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.primary-line:not(:disabled):not(.disabled):active, .btn__ic--m.primary-line:not(:disabled):not(.disabled).active, .btn__text--box--m.primary-line:not(:disabled):not(.disabled):active, .btn__text--box--m.primary-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.primary-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.primary-line:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.primary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--m.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.primary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.primary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.primary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.primary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--m.primary-line:disabled, .btn__ic--m.primary-line.disabled, .btn__text--box--m.primary-line:disabled, .btn__text--box--m.primary-line.disabled, .btn__ic--box--m.primary-line:disabled, .btn__ic--box--m.primary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.primary-line:disabled [class*=ic-], .btn__ic--m.primary-line.disabled [class*=ic-], .btn__text--box--m.primary-line:disabled [class*=ic-], .btn__text--box--m.primary-line.disabled [class*=ic-], .btn__ic--box--m.primary-line:disabled [class*=ic-], .btn__ic--box--m.primary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.primary-line:disabled::after, .btn__ic--m.primary-line.disabled::after, .btn__text--box--m.primary-line:disabled::after, .btn__text--box--m.primary-line.disabled::after, .btn__ic--box--m.primary-line:disabled::after, .btn__ic--box--m.primary-line.disabled::after {
  display: none;
}
.btn__ic--m.gray-line, .btn__text--box--m.gray-line, .btn__ic--box--m.gray-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--m.gray-line [class*=ic-], .btn__text--box--m.gray-line [class*=ic-], .btn__ic--box--m.gray-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--m.gray-line::after, .btn__text--box--m.gray-line::after, .btn__ic--box--m.gray-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.gray-line:focus, .btn__text--box--m.gray-line:focus, .btn__ic--box--m.gray-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.gray-line:focus [class*=ic-], .btn__text--box--m.gray-line:focus [class*=ic-], .btn__ic--box--m.gray-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.gray-line:focus::after, .btn__text--box--m.gray-line:focus::after, .btn__ic--box--m.gray-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.gray-line:hover, .btn__text--box--m.gray-line:hover, .btn__ic--box--m.gray-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--m.gray-line:hover [class*=ic-], .btn__text--box--m.gray-line:hover [class*=ic-], .btn__ic--box--m.gray-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.gray-line:hover::after, .btn__text--box--m.gray-line:hover::after, .btn__ic--box--m.gray-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.gray-line:not(:disabled):not(.disabled):active, .btn__ic--m.gray-line:not(:disabled):not(.disabled).active, .btn__text--box--m.gray-line:not(:disabled):not(.disabled):active, .btn__text--box--m.gray-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.gray-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.gray-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--m.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.gray-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.gray-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.gray-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.gray-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.gray-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--m.gray-line:disabled, .btn__ic--m.gray-line.disabled, .btn__text--box--m.gray-line:disabled, .btn__text--box--m.gray-line.disabled, .btn__ic--box--m.gray-line:disabled, .btn__ic--box--m.gray-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.gray-line:disabled [class*=ic-], .btn__ic--m.gray-line.disabled [class*=ic-], .btn__text--box--m.gray-line:disabled [class*=ic-], .btn__text--box--m.gray-line.disabled [class*=ic-], .btn__ic--box--m.gray-line:disabled [class*=ic-], .btn__ic--box--m.gray-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.gray-line:disabled::after, .btn__ic--m.gray-line.disabled::after, .btn__text--box--m.gray-line:disabled::after, .btn__text--box--m.gray-line.disabled::after, .btn__ic--box--m.gray-line:disabled::after, .btn__ic--box--m.gray-line.disabled::after {
  display: none;
}
.btn__ic--m.secondary-line, .btn__text--box--m.secondary-line, .btn__ic--box--m.secondary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.secondary-line [class*=ic-], .btn__text--box--m.secondary-line [class*=ic-], .btn__ic--box--m.secondary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--m.secondary-line::after, .btn__text--box--m.secondary-line::after, .btn__ic--box--m.secondary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.secondary-line:focus, .btn__text--box--m.secondary-line:focus, .btn__ic--box--m.secondary-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
}
.btn__ic--m.secondary-line:focus [class*=ic-], .btn__text--box--m.secondary-line:focus [class*=ic-], .btn__ic--box--m.secondary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.secondary-line:focus::after, .btn__text--box--m.secondary-line:focus::after, .btn__ic--box--m.secondary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.secondary-line:hover, .btn__text--box--m.secondary-line:hover, .btn__ic--box--m.secondary-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.secondary-line:hover [class*=ic-], .btn__text--box--m.secondary-line:hover [class*=ic-], .btn__ic--box--m.secondary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.secondary-line:hover::after, .btn__text--box--m.secondary-line:hover::after, .btn__ic--box--m.secondary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--m.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--m.secondary-line:not(:disabled):not(.disabled).active, .btn__text--box--m.secondary-line:not(:disabled):not(.disabled):active, .btn__text--box--m.secondary-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--m.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.secondary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.secondary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.secondary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.secondary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--m.secondary-line:disabled, .btn__ic--m.secondary-line.disabled, .btn__text--box--m.secondary-line:disabled, .btn__text--box--m.secondary-line.disabled, .btn__ic--box--m.secondary-line:disabled, .btn__ic--box--m.secondary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.secondary-line:disabled [class*=ic-], .btn__ic--m.secondary-line.disabled [class*=ic-], .btn__text--box--m.secondary-line:disabled [class*=ic-], .btn__text--box--m.secondary-line.disabled [class*=ic-], .btn__ic--box--m.secondary-line:disabled [class*=ic-], .btn__ic--box--m.secondary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.secondary-line:disabled::after, .btn__ic--m.secondary-line.disabled::after, .btn__text--box--m.secondary-line:disabled::after, .btn__text--box--m.secondary-line.disabled::after, .btn__ic--box--m.secondary-line:disabled::after, .btn__ic--box--m.secondary-line.disabled::after {
  display: none;
}
.btn__ic--m.tertiary-line, .btn__text--box--m.tertiary-line, .btn__ic--box--m.tertiary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.tertiary-line [class*=ic-], .btn__text--box--m.tertiary-line [class*=ic-], .btn__ic--box--m.tertiary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--m.tertiary-line::after, .btn__text--box--m.tertiary-line::after, .btn__ic--box--m.tertiary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.tertiary-line:focus, .btn__text--box--m.tertiary-line:focus, .btn__ic--box--m.tertiary-line:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--m.tertiary-line:focus [class*=ic-], .btn__text--box--m.tertiary-line:focus [class*=ic-], .btn__ic--box--m.tertiary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary-line:focus::after, .btn__text--box--m.tertiary-line:focus::after, .btn__ic--box--m.tertiary-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.tertiary-line:hover, .btn__text--box--m.tertiary-line:hover, .btn__ic--box--m.tertiary-line:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.tertiary-line:hover [class*=ic-], .btn__text--box--m.tertiary-line:hover [class*=ic-], .btn__ic--box--m.tertiary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary-line:hover::after, .btn__text--box--m.tertiary-line:hover::after, .btn__ic--box--m.tertiary-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--m.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--m.tertiary-line:not(:disabled):not(.disabled).active, .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled):active, .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--m.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--m.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.tertiary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--m.tertiary-line:disabled, .btn__ic--m.tertiary-line.disabled, .btn__text--box--m.tertiary-line:disabled, .btn__text--box--m.tertiary-line.disabled, .btn__ic--box--m.tertiary-line:disabled, .btn__ic--box--m.tertiary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.tertiary-line:disabled [class*=ic-], .btn__ic--m.tertiary-line.disabled [class*=ic-], .btn__text--box--m.tertiary-line:disabled [class*=ic-], .btn__text--box--m.tertiary-line.disabled [class*=ic-], .btn__ic--box--m.tertiary-line:disabled [class*=ic-], .btn__ic--box--m.tertiary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.tertiary-line:disabled::after, .btn__ic--m.tertiary-line.disabled::after, .btn__text--box--m.tertiary-line:disabled::after, .btn__text--box--m.tertiary-line.disabled::after, .btn__ic--box--m.tertiary-line:disabled::after, .btn__ic--box--m.tertiary-line.disabled::after {
  display: none;
}
.btn__ic--m.check-line, .btn__text--box--m.check-line, .btn__ic--box--m.check-line {
  position: relative;
  isolation: isolate;
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check-line [class*=ic-], .btn__text--box--m.check-line [class*=ic-], .btn__ic--box--m.check-line [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__ic--m.check-line::after, .btn__text--box--m.check-line::after, .btn__ic--box--m.check-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.check-line:focus, .btn__text--box--m.check-line:focus, .btn__ic--box--m.check-line:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.check-line:focus [class*=ic-], .btn__text--box--m.check-line:focus [class*=ic-], .btn__ic--box--m.check-line:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--m.check-line:focus::after, .btn__text--box--m.check-line:focus::after, .btn__ic--box--m.check-line:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--m.check-line:hover, .btn__text--box--m.check-line:hover, .btn__ic--box--m.check-line:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check-line:hover [class*=ic-], .btn__text--box--m.check-line:hover [class*=ic-], .btn__ic--box--m.check-line:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--m.check-line:hover::after, .btn__text--box--m.check-line:hover::after, .btn__ic--box--m.check-line:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--m.check-line:not(:disabled):not(.disabled):active, .btn__ic--m.check-line:not(:disabled):not(.disabled).active, .btn__text--box--m.check-line:not(:disabled):not(.disabled):active, .btn__text--box--m.check-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.check-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.check-line:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--m.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.check-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--m.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.check-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.check-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.check-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.check-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__ic--m.check-line:disabled, .btn__ic--m.check-line.disabled, .btn__text--box--m.check-line:disabled, .btn__text--box--m.check-line.disabled, .btn__ic--box--m.check-line:disabled, .btn__ic--box--m.check-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.check-line:disabled [class*=ic-], .btn__ic--m.check-line.disabled [class*=ic-], .btn__text--box--m.check-line:disabled [class*=ic-], .btn__text--box--m.check-line.disabled [class*=ic-], .btn__ic--box--m.check-line:disabled [class*=ic-], .btn__ic--box--m.check-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.check-line:disabled::after, .btn__ic--m.check-line.disabled::after, .btn__text--box--m.check-line:disabled::after, .btn__text--box--m.check-line.disabled::after, .btn__ic--box--m.check-line:disabled::after, .btn__ic--box--m.check-line.disabled::after {
  display: none;
}
.btn__ic--m.danger-line, .btn__text--box--m.danger-line, .btn__ic--box--m.danger-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--m.danger-line [class*=ic-], .btn__text--box--m.danger-line [class*=ic-], .btn__ic--box--m.danger-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--m.danger-line::after, .btn__text--box--m.danger-line::after, .btn__ic--box--m.danger-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--m.danger-line:focus, .btn__text--box--m.danger-line:focus, .btn__ic--box--m.danger-line:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--m.danger-line:focus [class*=ic-], .btn__text--box--m.danger-line:focus [class*=ic-], .btn__ic--box--m.danger-line:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger-line:focus::after, .btn__text--box--m.danger-line:focus::after, .btn__ic--box--m.danger-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--m.danger-line:hover, .btn__text--box--m.danger-line:hover, .btn__ic--box--m.danger-line:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--m.danger-line:hover [class*=ic-], .btn__text--box--m.danger-line:hover [class*=ic-], .btn__ic--box--m.danger-line:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger-line:hover::after, .btn__text--box--m.danger-line:hover::after, .btn__ic--box--m.danger-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--m.danger-line:not(:disabled):not(.disabled):active, .btn__ic--m.danger-line:not(:disabled):not(.disabled).active, .btn__text--box--m.danger-line:not(:disabled):not(.disabled):active, .btn__text--box--m.danger-line:not(:disabled):not(.disabled).active, .btn__ic--box--m.danger-line:not(:disabled):not(.disabled):active, .btn__ic--box--m.danger-line:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--m.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--m.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--m.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--m.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--m.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--m.danger-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--m.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--m.danger-line:not(:disabled):not(.disabled).active::after, .btn__text--box--m.danger-line:not(:disabled):not(.disabled):active::after, .btn__text--box--m.danger-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--m.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--m.danger-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--m.danger-line:disabled, .btn__ic--m.danger-line.disabled, .btn__text--box--m.danger-line:disabled, .btn__text--box--m.danger-line.disabled, .btn__ic--box--m.danger-line:disabled, .btn__ic--box--m.danger-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--m.danger-line:disabled [class*=ic-], .btn__ic--m.danger-line.disabled [class*=ic-], .btn__text--box--m.danger-line:disabled [class*=ic-], .btn__text--box--m.danger-line.disabled [class*=ic-], .btn__ic--box--m.danger-line:disabled [class*=ic-], .btn__ic--box--m.danger-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--m.danger-line:disabled::after, .btn__ic--m.danger-line.disabled::after, .btn__text--box--m.danger-line:disabled::after, .btn__text--box--m.danger-line.disabled::after, .btn__ic--box--m.danger-line:disabled::after, .btn__ic--box--m.danger-line.disabled::after {
  display: none;
}
.btn__text--box--m {
  --icon-size: 1.375rem;
  --icon-gap: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: var(--icon-gap);
}
.btn__text--box--m.google {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--m.google::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_google.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--m.google::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--m.google:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--m.google:focus::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--m.google:hover {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--m.google:hover::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--m.google:not(:disabled):not(.disabled):active, .btn__text--box--m.google:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--m.google:not(:disabled):not(.disabled):active::after, .btn__text--box--m.google:not(:disabled):not(.disabled).active::after {
  background-color: rgba(43, 47, 66, 0.25);
}
.btn__text--box--m.google:disabled, .btn__text--box--m.google.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_google_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--m.google:disabled::after, .btn__text--box--m.google.disabled::after {
  display: none;
}
.btn__text--box--m.kakao {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--m.kakao::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_kakao.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--m.kakao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--m.kakao:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--m.kakao:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--m.kakao:hover {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--m.kakao:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--m.kakao:not(:disabled):not(.disabled):active, .btn__text--box--m.kakao:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--m.kakao:not(:disabled):not(.disabled):active::after, .btn__text--box--m.kakao:not(:disabled):not(.disabled).active::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__text--box--m.kakao:disabled, .btn__text--box--m.kakao.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_kakao_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--m.kakao:disabled::after, .btn__text--box--m.kakao.disabled::after {
  display: none;
}
.btn__text--box--m.excel {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.excel::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_xls.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--m.excel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--m.excel:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.excel:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--m.excel:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.excel:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--m.excel:not(:disabled):not(.disabled):active, .btn__text--box--m.excel:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.excel:not(:disabled):not(.disabled):active::after, .btn__text--box--m.excel:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--m.excel:disabled, .btn__text--box--m.excel.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--m.excel:disabled::after, .btn__text--box--m.excel.disabled::after {
  display: none;
}
.btn__text--box--m.pdf {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--m.pdf::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--m.pdf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--m.pdf:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--m.pdf:focus::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--m.pdf:hover {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--m.pdf:hover::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--m.pdf:not(:disabled):not(.disabled):active, .btn__text--box--m.pdf:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--m.pdf:not(:disabled):not(.disabled):active::after, .btn__text--box--m.pdf:not(:disabled):not(.disabled).active::after {
  background-color: rgba(222, 52, 18, 0.25);
}
.btn__text--box--m.pdf:disabled, .btn__text--box--m.pdf.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--m.pdf:disabled::after, .btn__text--box--m.pdf.disabled::after {
  display: none;
}
.btn__text--box--m.csv {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.csv::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--m.csv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--m.csv:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.csv:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--m.csv:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.csv:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--m.csv:not(:disabled):not(.disabled):active, .btn__text--box--m.csv:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--m.csv:not(:disabled):not(.disabled):active::after, .btn__text--box--m.csv:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--m.csv:disabled, .btn__text--box--m.csv.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--m.csv:disabled::after, .btn__text--box--m.csv.disabled::after {
  display: none;
}
.btn__ic {
  height: fit-content;
  line-height: 0;
  padding: 0.313rem;
}
.btn__ic--box {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 1.875rem;
  font-size: 0.875rem;
  padding: 0.313rem 1rem;
}
.btn__ic--box .btn__ic__text {
  font-weight: 400;
  pointer-events: none;
}
.btn__ic--box span:first-of-type {
  margin-right: 0.5625rem;
}
.btn__text--box {
  height: 1.875rem;
  font-size: 0.875rem;
  padding: 0.375rem 1rem;
}
.btn__ic.primary, .btn__text--box.primary, .btn__ic--box.primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary [class*=ic-], .btn__text--box.primary [class*=ic-], .btn__ic--box.primary [class*=ic-] {
  background: var(--btn-primary-icon);
  pointer-events: none;
}
.btn__ic.primary::after, .btn__text--box.primary::after, .btn__ic--box.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.primary:focus, .btn__text--box.primary:focus, .btn__ic--box.primary:focus {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.primary:focus [class*=ic-], .btn__text--box.primary:focus [class*=ic-], .btn__ic--box.primary:focus [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic.primary:focus::after, .btn__text--box.primary:focus::after, .btn__ic--box.primary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.primary:hover, .btn__text--box.primary:hover, .btn__ic--box.primary:hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary:hover [class*=ic-], .btn__text--box.primary:hover [class*=ic-], .btn__ic--box.primary:hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic.primary:hover::after, .btn__text--box.primary:hover::after, .btn__ic--box.primary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.primary:not(:disabled):not(.disabled):active, .btn__ic.primary:not(:disabled):not(.disabled).active, .btn__ic.primary:not(:disabled):not(.disabled).actvie, .btn__text--box.primary:not(:disabled):not(.disabled):active, .btn__text--box.primary:not(:disabled):not(.disabled).active, .btn__text--box.primary:not(:disabled):not(.disabled).actvie, .btn__ic--box.primary:not(:disabled):not(.disabled):active, .btn__ic--box.primary:not(:disabled):not(.disabled).active, .btn__ic--box.primary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic.primary:not(:disabled):not(.disabled):active::after, .btn__ic.primary:not(:disabled):not(.disabled).active::after, .btn__ic.primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box.primary:not(:disabled):not(.disabled):active::after, .btn__text--box.primary:not(:disabled):not(.disabled).active::after, .btn__text--box.primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.primary:not(:disabled):not(.disabled):active::after, .btn__ic--box.primary:not(:disabled):not(.disabled).active::after, .btn__ic--box.primary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic.primary:disabled, .btn__ic.primary.disabled, .btn__text--box.primary:disabled, .btn__text--box.primary.disabled, .btn__ic--box.primary:disabled, .btn__ic--box.primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.primary:disabled [class*=ic-], .btn__ic.primary.disabled [class*=ic-], .btn__text--box.primary:disabled [class*=ic-], .btn__text--box.primary.disabled [class*=ic-], .btn__ic--box.primary:disabled [class*=ic-], .btn__ic--box.primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.primary:disabled::after, .btn__ic.primary.disabled::after, .btn__text--box.primary:disabled::after, .btn__text--box.primary.disabled::after, .btn__ic--box.primary:disabled::after, .btn__ic--box.primary.disabled::after {
  display: none;
}
.btn__ic.secondary, .btn__text--box.secondary, .btn__ic--box.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic.secondary [class*=ic-], .btn__text--box.secondary [class*=ic-], .btn__ic--box.secondary [class*=ic-] {
  background: var(--btn-secondary-icon);
  pointer-events: none;
}
.btn__ic.secondary::after, .btn__text--box.secondary::after, .btn__ic--box.secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.secondary:focus, .btn__text--box.secondary:focus, .btn__ic--box.secondary:focus {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.secondary:focus [class*=ic-], .btn__text--box.secondary:focus [class*=ic-], .btn__ic--box.secondary:focus [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic.secondary:focus::after, .btn__text--box.secondary:focus::after, .btn__ic--box.secondary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.secondary:hover, .btn__text--box.secondary:hover, .btn__ic--box.secondary:hover {
  color: var(--btn-secondary-font);
  background-color: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic.secondary:hover [class*=ic-], .btn__text--box.secondary:hover [class*=ic-], .btn__ic--box.secondary:hover [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic.secondary:hover::after, .btn__text--box.secondary:hover::after, .btn__ic--box.secondary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.secondary:not(:disabled):not(.disabled):active, .btn__ic.secondary:not(:disabled):not(.disabled).active, .btn__ic.secondary:not(:disabled):not(.disabled).actvie, .btn__text--box.secondary:not(:disabled):not(.disabled):active, .btn__text--box.secondary:not(:disabled):not(.disabled).active, .btn__text--box.secondary:not(:disabled):not(.disabled).actvie, .btn__ic--box.secondary:not(:disabled):not(.disabled):active, .btn__ic--box.secondary:not(:disabled):not(.disabled).active, .btn__ic--box.secondary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.secondary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic.secondary:not(:disabled):not(.disabled):active::after, .btn__ic.secondary:not(:disabled):not(.disabled).active::after, .btn__ic.secondary:not(:disabled):not(.disabled).actvie::after, .btn__text--box.secondary:not(:disabled):not(.disabled):active::after, .btn__text--box.secondary:not(:disabled):not(.disabled).active::after, .btn__text--box.secondary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--box.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--box.secondary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic.secondary:disabled, .btn__ic.secondary.disabled, .btn__text--box.secondary:disabled, .btn__text--box.secondary.disabled, .btn__ic--box.secondary:disabled, .btn__ic--box.secondary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.secondary:disabled [class*=ic-], .btn__ic.secondary.disabled [class*=ic-], .btn__text--box.secondary:disabled [class*=ic-], .btn__text--box.secondary.disabled [class*=ic-], .btn__ic--box.secondary:disabled [class*=ic-], .btn__ic--box.secondary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.secondary:disabled::after, .btn__ic.secondary.disabled::after, .btn__text--box.secondary:disabled::after, .btn__text--box.secondary.disabled::after, .btn__ic--box.secondary:disabled::after, .btn__ic--box.secondary.disabled::after {
  display: none;
}
.btn__ic.tertiary, .btn__text--box.tertiary, .btn__ic--box.tertiary {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.tertiary [class*=ic-], .btn__text--box.tertiary [class*=ic-], .btn__ic--box.tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic.tertiary::after, .btn__text--box.tertiary::after, .btn__ic--box.tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.tertiary:focus, .btn__text--box.tertiary:focus, .btn__ic--box.tertiary:focus {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.tertiary:focus [class*=ic-], .btn__text--box.tertiary:focus [class*=ic-], .btn__ic--box.tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary:focus::after, .btn__text--box.tertiary:focus::after, .btn__ic--box.tertiary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.tertiary:hover, .btn__text--box.tertiary:hover, .btn__ic--box.tertiary:hover {
  color: var(--color-gray-070);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.tertiary:hover [class*=ic-], .btn__text--box.tertiary:hover [class*=ic-], .btn__ic--box.tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary:hover::after, .btn__text--box.tertiary:hover::after, .btn__ic--box.tertiary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.tertiary:not(:disabled):not(.disabled):active, .btn__ic.tertiary:not(:disabled):not(.disabled).active, .btn__ic.tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box.tertiary:not(:disabled):not(.disabled):active, .btn__text--box.tertiary:not(:disabled):not(.disabled).active, .btn__text--box.tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box.tertiary:not(:disabled):not(.disabled):active, .btn__ic--box.tertiary:not(:disabled):not(.disabled).active, .btn__ic--box.tertiary:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box.tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box.tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box.tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic.tertiary:disabled, .btn__ic.tertiary.disabled, .btn__text--box.tertiary:disabled, .btn__text--box.tertiary.disabled, .btn__ic--box.tertiary:disabled, .btn__ic--box.tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.tertiary:disabled [class*=ic-], .btn__ic.tertiary.disabled [class*=ic-], .btn__text--box.tertiary:disabled [class*=ic-], .btn__text--box.tertiary.disabled [class*=ic-], .btn__ic--box.tertiary:disabled [class*=ic-], .btn__ic--box.tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.tertiary:disabled::after, .btn__ic.tertiary.disabled::after, .btn__text--box.tertiary:disabled::after, .btn__text--box.tertiary.disabled::after, .btn__ic--box.tertiary:disabled::after, .btn__ic--box.tertiary.disabled::after {
  display: none;
}
.btn__ic.check, .btn__text--box.check, .btn__ic--box.check {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check [class*=ic-], .btn__text--box.check [class*=ic-], .btn__ic--box.check [class*=ic-] {
  background: var(--color-gray-000);
  pointer-events: none;
}
.btn__ic.check::after, .btn__text--box.check::after, .btn__ic--box.check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.check:focus, .btn__text--box.check:focus, .btn__ic--box.check:focus {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.check:focus [class*=ic-], .btn__text--box.check:focus [class*=ic-], .btn__ic--box.check:focus [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic.check:focus::after, .btn__text--box.check:focus::after, .btn__ic--box.check:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.check:hover, .btn__text--box.check:hover, .btn__ic--box.check:hover {
  color: var(--color-gray-000);
  background-color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check:hover [class*=ic-], .btn__text--box.check:hover [class*=ic-], .btn__ic--box.check:hover [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic.check:hover::after, .btn__text--box.check:hover::after, .btn__ic--box.check:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic.check:not(:disabled):not(.disabled):active, .btn__ic.check:not(:disabled):not(.disabled).active, .btn__ic.check:not(:disabled):not(.disabled).actvie, .btn__text--box.check:not(:disabled):not(.disabled):active, .btn__text--box.check:not(:disabled):not(.disabled).active, .btn__text--box.check:not(:disabled):not(.disabled).actvie, .btn__ic--box.check:not(:disabled):not(.disabled):active, .btn__ic--box.check:not(:disabled):not(.disabled).active, .btn__ic--box.check:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.check:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic.check:not(:disabled):not(.disabled):active::after, .btn__ic.check:not(:disabled):not(.disabled).active::after, .btn__ic.check:not(:disabled):not(.disabled).actvie::after, .btn__text--box.check:not(:disabled):not(.disabled):active::after, .btn__text--box.check:not(:disabled):not(.disabled).active::after, .btn__text--box.check:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.check:not(:disabled):not(.disabled):active::after, .btn__ic--box.check:not(:disabled):not(.disabled).active::after, .btn__ic--box.check:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic.check:disabled, .btn__ic.check.disabled, .btn__text--box.check:disabled, .btn__text--box.check.disabled, .btn__ic--box.check:disabled, .btn__ic--box.check.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.check:disabled [class*=ic-], .btn__ic.check.disabled [class*=ic-], .btn__text--box.check:disabled [class*=ic-], .btn__text--box.check.disabled [class*=ic-], .btn__ic--box.check:disabled [class*=ic-], .btn__ic--box.check.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.check:disabled::after, .btn__ic.check.disabled::after, .btn__text--box.check:disabled::after, .btn__text--box.check.disabled::after, .btn__ic--box.check:disabled::after, .btn__ic--box.check.disabled::after {
  display: none;
}
.btn__ic.danger, .btn__text--box.danger, .btn__ic--box.danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic.danger [class*=ic-], .btn__text--box.danger [class*=ic-], .btn__ic--box.danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic.danger::after, .btn__text--box.danger::after, .btn__ic--box.danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.danger:focus, .btn__text--box.danger:focus, .btn__ic--box.danger:focus {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.danger:focus [class*=ic-], .btn__text--box.danger:focus [class*=ic-], .btn__ic--box.danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger:focus::after, .btn__text--box.danger:focus::after, .btn__ic--box.danger:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic.danger:hover, .btn__text--box.danger:hover, .btn__ic--box.danger:hover {
  color: var(--btn-danger-font);
  background-color: var(--btn-danger-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic.danger:hover [class*=ic-], .btn__text--box.danger:hover [class*=ic-], .btn__ic--box.danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger:hover::after, .btn__text--box.danger:hover::after, .btn__ic--box.danger:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic.danger:not(:disabled):not(.disabled):active, .btn__ic.danger:not(:disabled):not(.disabled).active, .btn__ic.danger:not(:disabled):not(.disabled).actvie, .btn__text--box.danger:not(:disabled):not(.disabled):active, .btn__text--box.danger:not(:disabled):not(.disabled).active, .btn__text--box.danger:not(:disabled):not(.disabled).actvie, .btn__ic--box.danger:not(:disabled):not(.disabled):active, .btn__ic--box.danger:not(:disabled):not(.disabled).active, .btn__ic--box.danger:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger:not(:disabled):not(.disabled):active::after, .btn__ic.danger:not(:disabled):not(.disabled).active::after, .btn__ic.danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box.danger:not(:disabled):not(.disabled):active::after, .btn__text--box.danger:not(:disabled):not(.disabled).active::after, .btn__text--box.danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.danger:not(:disabled):not(.disabled):active::after, .btn__ic--box.danger:not(:disabled):not(.disabled).active::after, .btn__ic--box.danger:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic.danger:disabled, .btn__ic.danger.disabled, .btn__text--box.danger:disabled, .btn__text--box.danger.disabled, .btn__ic--box.danger:disabled, .btn__ic--box.danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.danger:disabled [class*=ic-], .btn__ic.danger.disabled [class*=ic-], .btn__text--box.danger:disabled [class*=ic-], .btn__text--box.danger.disabled [class*=ic-], .btn__ic--box.danger:disabled [class*=ic-], .btn__ic--box.danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.danger:disabled::after, .btn__ic.danger.disabled::after, .btn__text--box.danger:disabled::after, .btn__text--box.danger.disabled::after, .btn__ic--box.danger:disabled::after, .btn__ic--box.danger.disabled::after {
  display: none;
}
.btn__ic.error, .btn__text--box.error, .btn__ic--box.error {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic.error [class*=ic-], .btn__text--box.error [class*=ic-], .btn__ic--box.error [class*=ic-] {
  background: var(--btn-error-icon);
  pointer-events: none;
}
.btn__ic.error::after, .btn__text--box.error::after, .btn__ic--box.error::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.error:focus, .btn__text--box.error:focus, .btn__ic--box.error:focus {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.error:focus [class*=ic-], .btn__text--box.error:focus [class*=ic-], .btn__ic--box.error:focus [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic.error:focus::after, .btn__text--box.error:focus::after, .btn__ic--box.error:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic.error:hover, .btn__text--box.error:hover, .btn__ic--box.error:hover {
  color: var(--btn-error-font);
  background-color: var(--btn-error-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic.error:hover [class*=ic-], .btn__text--box.error:hover [class*=ic-], .btn__ic--box.error:hover [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic.error:hover::after, .btn__text--box.error:hover::after, .btn__ic--box.error:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic.error:not(:disabled):not(.disabled):active, .btn__ic.error:not(:disabled):not(.disabled).active, .btn__ic.error:not(:disabled):not(.disabled).actvie, .btn__text--box.error:not(:disabled):not(.disabled):active, .btn__text--box.error:not(:disabled):not(.disabled).active, .btn__text--box.error:not(:disabled):not(.disabled).actvie, .btn__ic--box.error:not(:disabled):not(.disabled):active, .btn__ic--box.error:not(:disabled):not(.disabled).active, .btn__ic--box.error:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.error:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic.error:not(:disabled):not(.disabled):active::after, .btn__ic.error:not(:disabled):not(.disabled).active::after, .btn__ic.error:not(:disabled):not(.disabled).actvie::after, .btn__text--box.error:not(:disabled):not(.disabled):active::after, .btn__text--box.error:not(:disabled):not(.disabled).active::after, .btn__text--box.error:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.error:not(:disabled):not(.disabled):active::after, .btn__ic--box.error:not(:disabled):not(.disabled).active::after, .btn__ic--box.error:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic.error:disabled, .btn__ic.error.disabled, .btn__text--box.error:disabled, .btn__text--box.error.disabled, .btn__ic--box.error:disabled, .btn__ic--box.error.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.error:disabled [class*=ic-], .btn__ic.error.disabled [class*=ic-], .btn__text--box.error:disabled [class*=ic-], .btn__text--box.error.disabled [class*=ic-], .btn__ic--box.error:disabled [class*=ic-], .btn__ic--box.error.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.error:disabled::after, .btn__ic.error.disabled::after, .btn__text--box.error:disabled::after, .btn__text--box.error.disabled::after, .btn__ic--box.error:disabled::after, .btn__ic--box.error.disabled::after {
  display: none;
}
.btn__ic.ghost-primary, .btn__text--box.ghost-primary, .btn__ic--box.ghost-primary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-primary [class*=ic-], .btn__text--box.ghost-primary [class*=ic-], .btn__ic--box.ghost-primary [class*=ic-] {
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic.ghost-primary::after, .btn__text--box.ghost-primary::after, .btn__ic--box.ghost-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.ghost-primary:focus, .btn__text--box.ghost-primary:focus, .btn__ic--box.ghost-primary:focus {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.ghost-primary:focus [class*=ic-], .btn__text--box.ghost-primary:focus [class*=ic-], .btn__ic--box.ghost-primary:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.ghost-primary:focus::after, .btn__text--box.ghost-primary:focus::after, .btn__ic--box.ghost-primary:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.ghost-primary:hover, .btn__text--box.ghost-primary:hover, .btn__ic--box.ghost-primary:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-primary:hover [class*=ic-], .btn__text--box.ghost-primary:hover [class*=ic-], .btn__ic--box.ghost-primary:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.ghost-primary:hover::after, .btn__text--box.ghost-primary:hover::after, .btn__ic--box.ghost-primary:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__text--box.ghost-primary:not(:disabled):not(.disabled):active, .btn__text--box.ghost-primary:not(:disabled):not(.disabled).active, .btn__text--box.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__text--box.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__text--box.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--box.ghost-primary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic.ghost-primary:disabled, .btn__ic.ghost-primary.disabled, .btn__text--box.ghost-primary:disabled, .btn__text--box.ghost-primary.disabled, .btn__ic--box.ghost-primary:disabled, .btn__ic--box.ghost-primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.ghost-primary:disabled [class*=ic-], .btn__ic.ghost-primary.disabled [class*=ic-], .btn__text--box.ghost-primary:disabled [class*=ic-], .btn__text--box.ghost-primary.disabled [class*=ic-], .btn__ic--box.ghost-primary:disabled [class*=ic-], .btn__ic--box.ghost-primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.ghost-primary:disabled::after, .btn__ic.ghost-primary.disabled::after, .btn__text--box.ghost-primary:disabled::after, .btn__text--box.ghost-primary.disabled::after, .btn__ic--box.ghost-primary:disabled::after, .btn__ic--box.ghost-primary.disabled::after {
  display: none;
}
.btn__ic.ghost-tertiary, .btn__text--box.ghost-tertiary, .btn__ic--box.ghost-tertiary {
  background-color: transparent;
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-tertiary [class*=ic-], .btn__text--box.ghost-tertiary [class*=ic-], .btn__ic--box.ghost-tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic.ghost-tertiary::after, .btn__text--box.ghost-tertiary::after, .btn__ic--box.ghost-tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.ghost-tertiary:focus, .btn__text--box.ghost-tertiary:focus, .btn__ic--box.ghost-tertiary:focus {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.ghost-tertiary:focus [class*=ic-], .btn__text--box.ghost-tertiary:focus [class*=ic-], .btn__ic--box.ghost-tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.ghost-tertiary:focus::after, .btn__text--box.ghost-tertiary:focus::after, .btn__ic--box.ghost-tertiary:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.ghost-tertiary:hover, .btn__text--box.ghost-tertiary:hover, .btn__ic--box.ghost-tertiary:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-tertiary:hover [class*=ic-], .btn__text--box.ghost-tertiary:hover [class*=ic-], .btn__ic--box.ghost-tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.ghost-tertiary:hover::after, .btn__text--box.ghost-tertiary:hover::after, .btn__ic--box.ghost-tertiary:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box.ghost-tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic.ghost-tertiary:disabled, .btn__ic.ghost-tertiary.disabled, .btn__text--box.ghost-tertiary:disabled, .btn__text--box.ghost-tertiary.disabled, .btn__ic--box.ghost-tertiary:disabled, .btn__ic--box.ghost-tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.ghost-tertiary:disabled [class*=ic-], .btn__ic.ghost-tertiary.disabled [class*=ic-], .btn__text--box.ghost-tertiary:disabled [class*=ic-], .btn__text--box.ghost-tertiary.disabled [class*=ic-], .btn__ic--box.ghost-tertiary:disabled [class*=ic-], .btn__ic--box.ghost-tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.ghost-tertiary:disabled::after, .btn__ic.ghost-tertiary.disabled::after, .btn__text--box.ghost-tertiary:disabled::after, .btn__text--box.ghost-tertiary.disabled::after, .btn__ic--box.ghost-tertiary:disabled::after, .btn__ic--box.ghost-tertiary.disabled::after {
  display: none;
}
.btn__ic.ghost-danger, .btn__text--box.ghost-danger, .btn__ic--box.ghost-danger {
  background-color: transparent;
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-danger [class*=ic-], .btn__text--box.ghost-danger [class*=ic-], .btn__ic--box.ghost-danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic.ghost-danger::after, .btn__text--box.ghost-danger::after, .btn__ic--box.ghost-danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.ghost-danger:focus, .btn__text--box.ghost-danger:focus, .btn__ic--box.ghost-danger:focus {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.ghost-danger:focus [class*=ic-], .btn__text--box.ghost-danger:focus [class*=ic-], .btn__ic--box.ghost-danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.ghost-danger:focus::after, .btn__text--box.ghost-danger:focus::after, .btn__ic--box.ghost-danger:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic.ghost-danger:hover, .btn__text--box.ghost-danger:hover, .btn__ic--box.ghost-danger:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-danger:hover [class*=ic-], .btn__text--box.ghost-danger:hover [class*=ic-], .btn__ic--box.ghost-danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.ghost-danger:hover::after, .btn__text--box.ghost-danger:hover::after, .btn__ic--box.ghost-danger:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__text--box.ghost-danger:not(:disabled):not(.disabled):active, .btn__text--box.ghost-danger:not(:disabled):not(.disabled).active, .btn__text--box.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__text--box.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__text--box.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--box.ghost-danger:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic.ghost-danger:disabled, .btn__ic.ghost-danger.disabled, .btn__text--box.ghost-danger:disabled, .btn__text--box.ghost-danger.disabled, .btn__ic--box.ghost-danger:disabled, .btn__ic--box.ghost-danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic.ghost-danger:disabled [class*=ic-], .btn__ic.ghost-danger.disabled [class*=ic-], .btn__text--box.ghost-danger:disabled [class*=ic-], .btn__text--box.ghost-danger.disabled [class*=ic-], .btn__ic--box.ghost-danger:disabled [class*=ic-], .btn__ic--box.ghost-danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.ghost-danger:disabled::after, .btn__ic.ghost-danger.disabled::after, .btn__text--box.ghost-danger:disabled::after, .btn__text--box.ghost-danger.disabled::after, .btn__ic--box.ghost-danger:disabled::after, .btn__ic--box.ghost-danger.disabled::after {
  display: none;
}
.btn__ic.primary-line, .btn__text--box.primary-line, .btn__ic--box.primary-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary-line [class*=ic-], .btn__text--box.primary-line [class*=ic-], .btn__ic--box.primary-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic.primary-line::after, .btn__text--box.primary-line::after, .btn__ic--box.primary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.primary-line:focus, .btn__text--box.primary-line:focus, .btn__ic--box.primary-line:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.primary-line:focus [class*=ic-], .btn__text--box.primary-line:focus [class*=ic-], .btn__ic--box.primary-line:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.primary-line:focus::after, .btn__text--box.primary-line:focus::after, .btn__ic--box.primary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.primary-line:hover, .btn__text--box.primary-line:hover, .btn__ic--box.primary-line:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary-line:hover [class*=ic-], .btn__text--box.primary-line:hover [class*=ic-], .btn__ic--box.primary-line:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.primary-line:hover::after, .btn__text--box.primary-line:hover::after, .btn__ic--box.primary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.primary-line:not(:disabled):not(.disabled):active, .btn__ic.primary-line:not(:disabled):not(.disabled).active, .btn__text--box.primary-line:not(:disabled):not(.disabled):active, .btn__text--box.primary-line:not(:disabled):not(.disabled).active, .btn__ic--box.primary-line:not(:disabled):not(.disabled):active, .btn__ic--box.primary-line:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.primary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic.primary-line:not(:disabled):not(.disabled).active::after, .btn__text--box.primary-line:not(:disabled):not(.disabled):active::after, .btn__text--box.primary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.primary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic.primary-line:disabled, .btn__ic.primary-line.disabled, .btn__text--box.primary-line:disabled, .btn__text--box.primary-line.disabled, .btn__ic--box.primary-line:disabled, .btn__ic--box.primary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.primary-line:disabled [class*=ic-], .btn__ic.primary-line.disabled [class*=ic-], .btn__text--box.primary-line:disabled [class*=ic-], .btn__text--box.primary-line.disabled [class*=ic-], .btn__ic--box.primary-line:disabled [class*=ic-], .btn__ic--box.primary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.primary-line:disabled::after, .btn__ic.primary-line.disabled::after, .btn__text--box.primary-line:disabled::after, .btn__text--box.primary-line.disabled::after, .btn__ic--box.primary-line:disabled::after, .btn__ic--box.primary-line.disabled::after {
  display: none;
}
.btn__ic.gray-line, .btn__text--box.gray-line, .btn__ic--box.gray-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic.gray-line [class*=ic-], .btn__text--box.gray-line [class*=ic-], .btn__ic--box.gray-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic.gray-line::after, .btn__text--box.gray-line::after, .btn__ic--box.gray-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.gray-line:focus, .btn__text--box.gray-line:focus, .btn__ic--box.gray-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.gray-line:focus [class*=ic-], .btn__text--box.gray-line:focus [class*=ic-], .btn__ic--box.gray-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.gray-line:focus::after, .btn__text--box.gray-line:focus::after, .btn__ic--box.gray-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.gray-line:hover, .btn__text--box.gray-line:hover, .btn__ic--box.gray-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic.gray-line:hover [class*=ic-], .btn__text--box.gray-line:hover [class*=ic-], .btn__ic--box.gray-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.gray-line:hover::after, .btn__text--box.gray-line:hover::after, .btn__ic--box.gray-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.gray-line:not(:disabled):not(.disabled):active, .btn__ic.gray-line:not(:disabled):not(.disabled).active, .btn__text--box.gray-line:not(:disabled):not(.disabled):active, .btn__text--box.gray-line:not(:disabled):not(.disabled).active, .btn__ic--box.gray-line:not(:disabled):not(.disabled):active, .btn__ic--box.gray-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.gray-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic.gray-line:not(:disabled):not(.disabled).active::after, .btn__text--box.gray-line:not(:disabled):not(.disabled):active::after, .btn__text--box.gray-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.gray-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic.gray-line:disabled, .btn__ic.gray-line.disabled, .btn__text--box.gray-line:disabled, .btn__text--box.gray-line.disabled, .btn__ic--box.gray-line:disabled, .btn__ic--box.gray-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.gray-line:disabled [class*=ic-], .btn__ic.gray-line.disabled [class*=ic-], .btn__text--box.gray-line:disabled [class*=ic-], .btn__text--box.gray-line.disabled [class*=ic-], .btn__ic--box.gray-line:disabled [class*=ic-], .btn__ic--box.gray-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.gray-line:disabled::after, .btn__ic.gray-line.disabled::after, .btn__text--box.gray-line:disabled::after, .btn__text--box.gray-line.disabled::after, .btn__ic--box.gray-line:disabled::after, .btn__ic--box.gray-line.disabled::after {
  display: none;
}
.btn__ic.secondary-line, .btn__text--box.secondary-line, .btn__ic--box.secondary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.secondary-line [class*=ic-], .btn__text--box.secondary-line [class*=ic-], .btn__ic--box.secondary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic.secondary-line::after, .btn__text--box.secondary-line::after, .btn__ic--box.secondary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.secondary-line:focus, .btn__text--box.secondary-line:focus, .btn__ic--box.secondary-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
}
.btn__ic.secondary-line:focus [class*=ic-], .btn__text--box.secondary-line:focus [class*=ic-], .btn__ic--box.secondary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.secondary-line:focus::after, .btn__text--box.secondary-line:focus::after, .btn__ic--box.secondary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.secondary-line:hover, .btn__text--box.secondary-line:hover, .btn__ic--box.secondary-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.secondary-line:hover [class*=ic-], .btn__text--box.secondary-line:hover [class*=ic-], .btn__ic--box.secondary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.secondary-line:hover::after, .btn__text--box.secondary-line:hover::after, .btn__ic--box.secondary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic.secondary-line:not(:disabled):not(.disabled):active, .btn__ic.secondary-line:not(:disabled):not(.disabled).active, .btn__text--box.secondary-line:not(:disabled):not(.disabled):active, .btn__text--box.secondary-line:not(:disabled):not(.disabled).active, .btn__ic--box.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--box.secondary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.secondary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic.secondary-line:not(:disabled):not(.disabled).active::after, .btn__text--box.secondary-line:not(:disabled):not(.disabled):active::after, .btn__text--box.secondary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.secondary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic.secondary-line:disabled, .btn__ic.secondary-line.disabled, .btn__text--box.secondary-line:disabled, .btn__text--box.secondary-line.disabled, .btn__ic--box.secondary-line:disabled, .btn__ic--box.secondary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.secondary-line:disabled [class*=ic-], .btn__ic.secondary-line.disabled [class*=ic-], .btn__text--box.secondary-line:disabled [class*=ic-], .btn__text--box.secondary-line.disabled [class*=ic-], .btn__ic--box.secondary-line:disabled [class*=ic-], .btn__ic--box.secondary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.secondary-line:disabled::after, .btn__ic.secondary-line.disabled::after, .btn__text--box.secondary-line:disabled::after, .btn__text--box.secondary-line.disabled::after, .btn__ic--box.secondary-line:disabled::after, .btn__ic--box.secondary-line.disabled::after {
  display: none;
}
.btn__ic.tertiary-line, .btn__text--box.tertiary-line, .btn__ic--box.tertiary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.tertiary-line [class*=ic-], .btn__text--box.tertiary-line [class*=ic-], .btn__ic--box.tertiary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic.tertiary-line::after, .btn__text--box.tertiary-line::after, .btn__ic--box.tertiary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.tertiary-line:focus, .btn__text--box.tertiary-line:focus, .btn__ic--box.tertiary-line:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic.tertiary-line:focus [class*=ic-], .btn__text--box.tertiary-line:focus [class*=ic-], .btn__ic--box.tertiary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary-line:focus::after, .btn__text--box.tertiary-line:focus::after, .btn__ic--box.tertiary-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.tertiary-line:hover, .btn__text--box.tertiary-line:hover, .btn__ic--box.tertiary-line:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.tertiary-line:hover [class*=ic-], .btn__text--box.tertiary-line:hover [class*=ic-], .btn__ic--box.tertiary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary-line:hover::after, .btn__text--box.tertiary-line:hover::after, .btn__ic--box.tertiary-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic.tertiary-line:not(:disabled):not(.disabled).active, .btn__text--box.tertiary-line:not(:disabled):not(.disabled):active, .btn__text--box.tertiary-line:not(:disabled):not(.disabled).active, .btn__ic--box.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--box.tertiary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__text--box.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__text--box.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.tertiary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic.tertiary-line:disabled, .btn__ic.tertiary-line.disabled, .btn__text--box.tertiary-line:disabled, .btn__text--box.tertiary-line.disabled, .btn__ic--box.tertiary-line:disabled, .btn__ic--box.tertiary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.tertiary-line:disabled [class*=ic-], .btn__ic.tertiary-line.disabled [class*=ic-], .btn__text--box.tertiary-line:disabled [class*=ic-], .btn__text--box.tertiary-line.disabled [class*=ic-], .btn__ic--box.tertiary-line:disabled [class*=ic-], .btn__ic--box.tertiary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.tertiary-line:disabled::after, .btn__ic.tertiary-line.disabled::after, .btn__text--box.tertiary-line:disabled::after, .btn__text--box.tertiary-line.disabled::after, .btn__ic--box.tertiary-line:disabled::after, .btn__ic--box.tertiary-line.disabled::after {
  display: none;
}
.btn__ic.check-line, .btn__text--box.check-line, .btn__ic--box.check-line {
  position: relative;
  isolation: isolate;
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check-line [class*=ic-], .btn__text--box.check-line [class*=ic-], .btn__ic--box.check-line [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__ic.check-line::after, .btn__text--box.check-line::after, .btn__ic--box.check-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.check-line:focus, .btn__text--box.check-line:focus, .btn__ic--box.check-line:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.check-line:focus [class*=ic-], .btn__text--box.check-line:focus [class*=ic-], .btn__ic--box.check-line:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic.check-line:focus::after, .btn__text--box.check-line:focus::after, .btn__ic--box.check-line:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic.check-line:hover, .btn__text--box.check-line:hover, .btn__ic--box.check-line:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check-line:hover [class*=ic-], .btn__text--box.check-line:hover [class*=ic-], .btn__ic--box.check-line:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic.check-line:hover::after, .btn__text--box.check-line:hover::after, .btn__ic--box.check-line:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic.check-line:not(:disabled):not(.disabled):active, .btn__ic.check-line:not(:disabled):not(.disabled).active, .btn__text--box.check-line:not(:disabled):not(.disabled):active, .btn__text--box.check-line:not(:disabled):not(.disabled).active, .btn__ic--box.check-line:not(:disabled):not(.disabled):active, .btn__ic--box.check-line:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.check-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic.check-line:not(:disabled):not(.disabled):active::after, .btn__ic.check-line:not(:disabled):not(.disabled).active::after, .btn__text--box.check-line:not(:disabled):not(.disabled):active::after, .btn__text--box.check-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.check-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__ic.check-line:disabled, .btn__ic.check-line.disabled, .btn__text--box.check-line:disabled, .btn__text--box.check-line.disabled, .btn__ic--box.check-line:disabled, .btn__ic--box.check-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.check-line:disabled [class*=ic-], .btn__ic.check-line.disabled [class*=ic-], .btn__text--box.check-line:disabled [class*=ic-], .btn__text--box.check-line.disabled [class*=ic-], .btn__ic--box.check-line:disabled [class*=ic-], .btn__ic--box.check-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.check-line:disabled::after, .btn__ic.check-line.disabled::after, .btn__text--box.check-line:disabled::after, .btn__text--box.check-line.disabled::after, .btn__ic--box.check-line:disabled::after, .btn__ic--box.check-line.disabled::after {
  display: none;
}
.btn__ic.danger-line, .btn__text--box.danger-line, .btn__ic--box.danger-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic.danger-line [class*=ic-], .btn__text--box.danger-line [class*=ic-], .btn__ic--box.danger-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic.danger-line::after, .btn__text--box.danger-line::after, .btn__ic--box.danger-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic.danger-line:focus, .btn__text--box.danger-line:focus, .btn__ic--box.danger-line:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic.danger-line:focus [class*=ic-], .btn__text--box.danger-line:focus [class*=ic-], .btn__ic--box.danger-line:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger-line:focus::after, .btn__text--box.danger-line:focus::after, .btn__ic--box.danger-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic.danger-line:hover, .btn__text--box.danger-line:hover, .btn__ic--box.danger-line:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic.danger-line:hover [class*=ic-], .btn__text--box.danger-line:hover [class*=ic-], .btn__ic--box.danger-line:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger-line:hover::after, .btn__text--box.danger-line:hover::after, .btn__ic--box.danger-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic.danger-line:not(:disabled):not(.disabled):active, .btn__ic.danger-line:not(:disabled):not(.disabled).active, .btn__text--box.danger-line:not(:disabled):not(.disabled):active, .btn__text--box.danger-line:not(:disabled):not(.disabled).active, .btn__ic--box.danger-line:not(:disabled):not(.disabled):active, .btn__ic--box.danger-line:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box.danger-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic.danger-line:not(:disabled):not(.disabled).active::after, .btn__text--box.danger-line:not(:disabled):not(.disabled):active::after, .btn__text--box.danger-line:not(:disabled):not(.disabled).active::after, .btn__ic--box.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--box.danger-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic.danger-line:disabled, .btn__ic.danger-line.disabled, .btn__text--box.danger-line:disabled, .btn__text--box.danger-line.disabled, .btn__ic--box.danger-line:disabled, .btn__ic--box.danger-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic.danger-line:disabled [class*=ic-], .btn__ic.danger-line.disabled [class*=ic-], .btn__text--box.danger-line:disabled [class*=ic-], .btn__text--box.danger-line.disabled [class*=ic-], .btn__ic--box.danger-line:disabled [class*=ic-], .btn__ic--box.danger-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic.danger-line:disabled::after, .btn__ic.danger-line.disabled::after, .btn__text--box.danger-line:disabled::after, .btn__text--box.danger-line.disabled::after, .btn__ic--box.danger-line:disabled::after, .btn__ic--box.danger-line.disabled::after {
  display: none;
}
.btn__text--box {
  --icon-size: 1.375rem;
  --icon-gap: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: var(--icon-gap);
}
.btn__text--box.google {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box.google::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_google.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box.google::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box.google:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box.google:focus::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box.google:hover {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box.google:hover::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box.google:not(:disabled):not(.disabled):active, .btn__text--box.google:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box.google:not(:disabled):not(.disabled):active::after, .btn__text--box.google:not(:disabled):not(.disabled).active::after {
  background-color: rgba(43, 47, 66, 0.25);
}
.btn__text--box.google:disabled, .btn__text--box.google.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_google_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box.google:disabled::after, .btn__text--box.google.disabled::after {
  display: none;
}
.btn__text--box.kakao {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box.kakao::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_kakao.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box.kakao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box.kakao:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box.kakao:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box.kakao:hover {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box.kakao:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box.kakao:not(:disabled):not(.disabled):active, .btn__text--box.kakao:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box.kakao:not(:disabled):not(.disabled):active::after, .btn__text--box.kakao:not(:disabled):not(.disabled).active::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__text--box.kakao:disabled, .btn__text--box.kakao.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_kakao_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box.kakao:disabled::after, .btn__text--box.kakao.disabled::after {
  display: none;
}
.btn__text--box.excel {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.excel::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_xls.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box.excel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box.excel:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.excel:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box.excel:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.excel:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box.excel:not(:disabled):not(.disabled):active, .btn__text--box.excel:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.excel:not(:disabled):not(.disabled):active::after, .btn__text--box.excel:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box.excel:disabled, .btn__text--box.excel.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box.excel:disabled::after, .btn__text--box.excel.disabled::after {
  display: none;
}
.btn__text--box.pdf {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box.pdf::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box.pdf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box.pdf:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box.pdf:focus::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box.pdf:hover {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box.pdf:hover::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box.pdf:not(:disabled):not(.disabled):active, .btn__text--box.pdf:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box.pdf:not(:disabled):not(.disabled):active::after, .btn__text--box.pdf:not(:disabled):not(.disabled).active::after {
  background-color: rgba(222, 52, 18, 0.25);
}
.btn__text--box.pdf:disabled, .btn__text--box.pdf.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box.pdf:disabled::after, .btn__text--box.pdf.disabled::after {
  display: none;
}
.btn__text--box.csv {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.csv::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box.csv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box.csv:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.csv:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box.csv:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.csv:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box.csv:not(:disabled):not(.disabled):active, .btn__text--box.csv:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box.csv:not(:disabled):not(.disabled):active::after, .btn__text--box.csv:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box.csv:disabled, .btn__text--box.csv.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box.csv:disabled::after, .btn__text--box.csv.disabled::after {
  display: none;
}
.btn__ic--s {
  height: fit-content;
  line-height: 0;
  padding: 0.125rem;
}
.btn__ic--box--s {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 1.5rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}
.btn__ic--box--s .btn__ic__text {
  font-weight: 400;
  pointer-events: none;
}
.btn__ic--box--s span:first-of-type {
  margin-right: 0.25rem;
}
.btn__text--box--s {
  height: 1.5rem;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
}
.btn__ic--s.primary, .btn__text--box--s.primary, .btn__ic--box--s.primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary [class*=ic-], .btn__text--box--s.primary [class*=ic-], .btn__ic--box--s.primary [class*=ic-] {
  background: var(--btn-primary-icon);
  pointer-events: none;
}
.btn__ic--s.primary::after, .btn__text--box--s.primary::after, .btn__ic--box--s.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.primary:focus, .btn__text--box--s.primary:focus, .btn__ic--box--s.primary:focus {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.primary:focus [class*=ic-], .btn__text--box--s.primary:focus [class*=ic-], .btn__ic--box--s.primary:focus [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--s.primary:focus::after, .btn__text--box--s.primary:focus::after, .btn__ic--box--s.primary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.primary:hover, .btn__text--box--s.primary:hover, .btn__ic--box--s.primary:hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary:hover [class*=ic-], .btn__text--box--s.primary:hover [class*=ic-], .btn__ic--box--s.primary:hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--s.primary:hover::after, .btn__text--box--s.primary:hover::after, .btn__ic--box--s.primary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.primary:not(:disabled):not(.disabled):active, .btn__ic--s.primary:not(:disabled):not(.disabled).active, .btn__ic--s.primary:not(:disabled):not(.disabled).actvie, .btn__text--box--s.primary:not(:disabled):not(.disabled):active, .btn__text--box--s.primary:not(:disabled):not(.disabled).active, .btn__text--box--s.primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.primary:not(:disabled):not(.disabled):active, .btn__ic--box--s.primary:not(:disabled):not(.disabled).active, .btn__ic--box--s.primary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--s.primary:not(:disabled):not(.disabled):active::after, .btn__ic--s.primary:not(:disabled):not(.disabled).active::after, .btn__ic--s.primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.primary:not(:disabled):not(.disabled):active::after, .btn__text--box--s.primary:not(:disabled):not(.disabled).active::after, .btn__text--box--s.primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.primary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--s.primary:disabled, .btn__ic--s.primary.disabled, .btn__text--box--s.primary:disabled, .btn__text--box--s.primary.disabled, .btn__ic--box--s.primary:disabled, .btn__ic--box--s.primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.primary:disabled [class*=ic-], .btn__ic--s.primary.disabled [class*=ic-], .btn__text--box--s.primary:disabled [class*=ic-], .btn__text--box--s.primary.disabled [class*=ic-], .btn__ic--box--s.primary:disabled [class*=ic-], .btn__ic--box--s.primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.primary:disabled::after, .btn__ic--s.primary.disabled::after, .btn__text--box--s.primary:disabled::after, .btn__text--box--s.primary.disabled::after, .btn__ic--box--s.primary:disabled::after, .btn__ic--box--s.primary.disabled::after {
  display: none;
}
.btn__ic--s.secondary, .btn__text--box--s.secondary, .btn__ic--box--s.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--s.secondary [class*=ic-], .btn__text--box--s.secondary [class*=ic-], .btn__ic--box--s.secondary [class*=ic-] {
  background: var(--btn-secondary-icon);
  pointer-events: none;
}
.btn__ic--s.secondary::after, .btn__text--box--s.secondary::after, .btn__ic--box--s.secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.secondary:focus, .btn__text--box--s.secondary:focus, .btn__ic--box--s.secondary:focus {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.secondary:focus [class*=ic-], .btn__text--box--s.secondary:focus [class*=ic-], .btn__ic--box--s.secondary:focus [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--s.secondary:focus::after, .btn__text--box--s.secondary:focus::after, .btn__ic--box--s.secondary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.secondary:hover, .btn__text--box--s.secondary:hover, .btn__ic--box--s.secondary:hover {
  color: var(--btn-secondary-font);
  background-color: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--s.secondary:hover [class*=ic-], .btn__text--box--s.secondary:hover [class*=ic-], .btn__ic--box--s.secondary:hover [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--s.secondary:hover::after, .btn__text--box--s.secondary:hover::after, .btn__ic--box--s.secondary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.secondary:not(:disabled):not(.disabled):active, .btn__ic--s.secondary:not(:disabled):not(.disabled).active, .btn__ic--s.secondary:not(:disabled):not(.disabled).actvie, .btn__text--box--s.secondary:not(:disabled):not(.disabled):active, .btn__text--box--s.secondary:not(:disabled):not(.disabled).active, .btn__text--box--s.secondary:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.secondary:not(:disabled):not(.disabled):active, .btn__ic--box--s.secondary:not(:disabled):not(.disabled).active, .btn__ic--box--s.secondary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--s.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.secondary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--s.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--s.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--s.secondary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.secondary:not(:disabled):not(.disabled):active::after, .btn__text--box--s.secondary:not(:disabled):not(.disabled).active::after, .btn__text--box--s.secondary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.secondary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--s.secondary:disabled, .btn__ic--s.secondary.disabled, .btn__text--box--s.secondary:disabled, .btn__text--box--s.secondary.disabled, .btn__ic--box--s.secondary:disabled, .btn__ic--box--s.secondary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.secondary:disabled [class*=ic-], .btn__ic--s.secondary.disabled [class*=ic-], .btn__text--box--s.secondary:disabled [class*=ic-], .btn__text--box--s.secondary.disabled [class*=ic-], .btn__ic--box--s.secondary:disabled [class*=ic-], .btn__ic--box--s.secondary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.secondary:disabled::after, .btn__ic--s.secondary.disabled::after, .btn__text--box--s.secondary:disabled::after, .btn__text--box--s.secondary.disabled::after, .btn__ic--box--s.secondary:disabled::after, .btn__ic--box--s.secondary.disabled::after {
  display: none;
}
.btn__ic--s.tertiary, .btn__text--box--s.tertiary, .btn__ic--box--s.tertiary {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.tertiary [class*=ic-], .btn__text--box--s.tertiary [class*=ic-], .btn__ic--box--s.tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--s.tertiary::after, .btn__text--box--s.tertiary::after, .btn__ic--box--s.tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.tertiary:focus, .btn__text--box--s.tertiary:focus, .btn__ic--box--s.tertiary:focus {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.tertiary:focus [class*=ic-], .btn__text--box--s.tertiary:focus [class*=ic-], .btn__ic--box--s.tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary:focus::after, .btn__text--box--s.tertiary:focus::after, .btn__ic--box--s.tertiary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.tertiary:hover, .btn__text--box--s.tertiary:hover, .btn__ic--box--s.tertiary:hover {
  color: var(--color-gray-070);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.tertiary:hover [class*=ic-], .btn__text--box--s.tertiary:hover [class*=ic-], .btn__ic--box--s.tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary:hover::after, .btn__text--box--s.tertiary:hover::after, .btn__ic--box--s.tertiary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.tertiary:not(:disabled):not(.disabled):active, .btn__ic--s.tertiary:not(:disabled):not(.disabled).active, .btn__ic--s.tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--s.tertiary:not(:disabled):not(.disabled):active, .btn__text--box--s.tertiary:not(:disabled):not(.disabled).active, .btn__text--box--s.tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--s.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--s.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--s.tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--s.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--s.tertiary:disabled, .btn__ic--s.tertiary.disabled, .btn__text--box--s.tertiary:disabled, .btn__text--box--s.tertiary.disabled, .btn__ic--box--s.tertiary:disabled, .btn__ic--box--s.tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.tertiary:disabled [class*=ic-], .btn__ic--s.tertiary.disabled [class*=ic-], .btn__text--box--s.tertiary:disabled [class*=ic-], .btn__text--box--s.tertiary.disabled [class*=ic-], .btn__ic--box--s.tertiary:disabled [class*=ic-], .btn__ic--box--s.tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.tertiary:disabled::after, .btn__ic--s.tertiary.disabled::after, .btn__text--box--s.tertiary:disabled::after, .btn__text--box--s.tertiary.disabled::after, .btn__ic--box--s.tertiary:disabled::after, .btn__ic--box--s.tertiary.disabled::after {
  display: none;
}
.btn__ic--s.check, .btn__text--box--s.check, .btn__ic--box--s.check {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check [class*=ic-], .btn__text--box--s.check [class*=ic-], .btn__ic--box--s.check [class*=ic-] {
  background: var(--color-gray-000);
  pointer-events: none;
}
.btn__ic--s.check::after, .btn__text--box--s.check::after, .btn__ic--box--s.check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.check:focus, .btn__text--box--s.check:focus, .btn__ic--box--s.check:focus {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.check:focus [class*=ic-], .btn__text--box--s.check:focus [class*=ic-], .btn__ic--box--s.check:focus [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--s.check:focus::after, .btn__text--box--s.check:focus::after, .btn__ic--box--s.check:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.check:hover, .btn__text--box--s.check:hover, .btn__ic--box--s.check:hover {
  color: var(--color-gray-000);
  background-color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check:hover [class*=ic-], .btn__text--box--s.check:hover [class*=ic-], .btn__ic--box--s.check:hover [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--s.check:hover::after, .btn__text--box--s.check:hover::after, .btn__ic--box--s.check:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--s.check:not(:disabled):not(.disabled):active, .btn__ic--s.check:not(:disabled):not(.disabled).active, .btn__ic--s.check:not(:disabled):not(.disabled).actvie, .btn__text--box--s.check:not(:disabled):not(.disabled):active, .btn__text--box--s.check:not(:disabled):not(.disabled).active, .btn__text--box--s.check:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.check:not(:disabled):not(.disabled):active, .btn__ic--box--s.check:not(:disabled):not(.disabled).active, .btn__ic--box--s.check:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.check:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--s.check:not(:disabled):not(.disabled):active::after, .btn__ic--s.check:not(:disabled):not(.disabled).active::after, .btn__ic--s.check:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.check:not(:disabled):not(.disabled):active::after, .btn__text--box--s.check:not(:disabled):not(.disabled).active::after, .btn__text--box--s.check:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.check:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.check:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.check:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--s.check:disabled, .btn__ic--s.check.disabled, .btn__text--box--s.check:disabled, .btn__text--box--s.check.disabled, .btn__ic--box--s.check:disabled, .btn__ic--box--s.check.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.check:disabled [class*=ic-], .btn__ic--s.check.disabled [class*=ic-], .btn__text--box--s.check:disabled [class*=ic-], .btn__text--box--s.check.disabled [class*=ic-], .btn__ic--box--s.check:disabled [class*=ic-], .btn__ic--box--s.check.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.check:disabled::after, .btn__ic--s.check.disabled::after, .btn__text--box--s.check:disabled::after, .btn__text--box--s.check.disabled::after, .btn__ic--box--s.check:disabled::after, .btn__ic--box--s.check.disabled::after {
  display: none;
}
.btn__ic--s.danger, .btn__text--box--s.danger, .btn__ic--box--s.danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--s.danger [class*=ic-], .btn__text--box--s.danger [class*=ic-], .btn__ic--box--s.danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--s.danger::after, .btn__text--box--s.danger::after, .btn__ic--box--s.danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.danger:focus, .btn__text--box--s.danger:focus, .btn__ic--box--s.danger:focus {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.danger:focus [class*=ic-], .btn__text--box--s.danger:focus [class*=ic-], .btn__ic--box--s.danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger:focus::after, .btn__text--box--s.danger:focus::after, .btn__ic--box--s.danger:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--s.danger:hover, .btn__text--box--s.danger:hover, .btn__ic--box--s.danger:hover {
  color: var(--btn-danger-font);
  background-color: var(--btn-danger-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--s.danger:hover [class*=ic-], .btn__text--box--s.danger:hover [class*=ic-], .btn__ic--box--s.danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger:hover::after, .btn__text--box--s.danger:hover::after, .btn__ic--box--s.danger:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--s.danger:not(:disabled):not(.disabled):active, .btn__ic--s.danger:not(:disabled):not(.disabled).active, .btn__ic--s.danger:not(:disabled):not(.disabled).actvie, .btn__text--box--s.danger:not(:disabled):not(.disabled):active, .btn__text--box--s.danger:not(:disabled):not(.disabled).active, .btn__text--box--s.danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.danger:not(:disabled):not(.disabled):active, .btn__ic--box--s.danger:not(:disabled):not(.disabled).active, .btn__ic--box--s.danger:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--s.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger:not(:disabled):not(.disabled):active::after, .btn__ic--s.danger:not(:disabled):not(.disabled).active::after, .btn__ic--s.danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.danger:not(:disabled):not(.disabled):active::after, .btn__text--box--s.danger:not(:disabled):not(.disabled).active::after, .btn__text--box--s.danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.danger:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--s.danger:disabled, .btn__ic--s.danger.disabled, .btn__text--box--s.danger:disabled, .btn__text--box--s.danger.disabled, .btn__ic--box--s.danger:disabled, .btn__ic--box--s.danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.danger:disabled [class*=ic-], .btn__ic--s.danger.disabled [class*=ic-], .btn__text--box--s.danger:disabled [class*=ic-], .btn__text--box--s.danger.disabled [class*=ic-], .btn__ic--box--s.danger:disabled [class*=ic-], .btn__ic--box--s.danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.danger:disabled::after, .btn__ic--s.danger.disabled::after, .btn__text--box--s.danger:disabled::after, .btn__text--box--s.danger.disabled::after, .btn__ic--box--s.danger:disabled::after, .btn__ic--box--s.danger.disabled::after {
  display: none;
}
.btn__ic--s.error, .btn__text--box--s.error, .btn__ic--box--s.error {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--s.error [class*=ic-], .btn__text--box--s.error [class*=ic-], .btn__ic--box--s.error [class*=ic-] {
  background: var(--btn-error-icon);
  pointer-events: none;
}
.btn__ic--s.error::after, .btn__text--box--s.error::after, .btn__ic--box--s.error::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.error:focus, .btn__text--box--s.error:focus, .btn__ic--box--s.error:focus {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.error:focus [class*=ic-], .btn__text--box--s.error:focus [class*=ic-], .btn__ic--box--s.error:focus [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--s.error:focus::after, .btn__text--box--s.error:focus::after, .btn__ic--box--s.error:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--s.error:hover, .btn__text--box--s.error:hover, .btn__ic--box--s.error:hover {
  color: var(--btn-error-font);
  background-color: var(--btn-error-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--s.error:hover [class*=ic-], .btn__text--box--s.error:hover [class*=ic-], .btn__ic--box--s.error:hover [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--s.error:hover::after, .btn__text--box--s.error:hover::after, .btn__ic--box--s.error:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--s.error:not(:disabled):not(.disabled):active, .btn__ic--s.error:not(:disabled):not(.disabled).active, .btn__ic--s.error:not(:disabled):not(.disabled).actvie, .btn__text--box--s.error:not(:disabled):not(.disabled):active, .btn__text--box--s.error:not(:disabled):not(.disabled).active, .btn__text--box--s.error:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.error:not(:disabled):not(.disabled):active, .btn__ic--box--s.error:not(:disabled):not(.disabled).active, .btn__ic--box--s.error:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--s.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.error:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--s.error:not(:disabled):not(.disabled):active::after, .btn__ic--s.error:not(:disabled):not(.disabled).active::after, .btn__ic--s.error:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.error:not(:disabled):not(.disabled):active::after, .btn__text--box--s.error:not(:disabled):not(.disabled).active::after, .btn__text--box--s.error:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.error:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.error:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.error:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--s.error:disabled, .btn__ic--s.error.disabled, .btn__text--box--s.error:disabled, .btn__text--box--s.error.disabled, .btn__ic--box--s.error:disabled, .btn__ic--box--s.error.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.error:disabled [class*=ic-], .btn__ic--s.error.disabled [class*=ic-], .btn__text--box--s.error:disabled [class*=ic-], .btn__text--box--s.error.disabled [class*=ic-], .btn__ic--box--s.error:disabled [class*=ic-], .btn__ic--box--s.error.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.error:disabled::after, .btn__ic--s.error.disabled::after, .btn__text--box--s.error:disabled::after, .btn__text--box--s.error.disabled::after, .btn__ic--box--s.error:disabled::after, .btn__ic--box--s.error.disabled::after {
  display: none;
}
.btn__ic--s.ghost-primary, .btn__text--box--s.ghost-primary, .btn__ic--box--s.ghost-primary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-primary [class*=ic-], .btn__text--box--s.ghost-primary [class*=ic-], .btn__ic--box--s.ghost-primary [class*=ic-] {
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--s.ghost-primary::after, .btn__text--box--s.ghost-primary::after, .btn__ic--box--s.ghost-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.ghost-primary:focus, .btn__text--box--s.ghost-primary:focus, .btn__ic--box--s.ghost-primary:focus {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.ghost-primary:focus [class*=ic-], .btn__text--box--s.ghost-primary:focus [class*=ic-], .btn__ic--box--s.ghost-primary:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.ghost-primary:focus::after, .btn__text--box--s.ghost-primary:focus::after, .btn__ic--box--s.ghost-primary:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.ghost-primary:hover, .btn__text--box--s.ghost-primary:hover, .btn__ic--box--s.ghost-primary:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-primary:hover [class*=ic-], .btn__text--box--s.ghost-primary:hover [class*=ic-], .btn__ic--box--s.ghost-primary:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.ghost-primary:hover::after, .btn__text--box--s.ghost-primary:hover::after, .btn__ic--box--s.ghost-primary:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled):active, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).active, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--s.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__text--box--s.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.ghost-primary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--s.ghost-primary:disabled, .btn__ic--s.ghost-primary.disabled, .btn__text--box--s.ghost-primary:disabled, .btn__text--box--s.ghost-primary.disabled, .btn__ic--box--s.ghost-primary:disabled, .btn__ic--box--s.ghost-primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.ghost-primary:disabled [class*=ic-], .btn__ic--s.ghost-primary.disabled [class*=ic-], .btn__text--box--s.ghost-primary:disabled [class*=ic-], .btn__text--box--s.ghost-primary.disabled [class*=ic-], .btn__ic--box--s.ghost-primary:disabled [class*=ic-], .btn__ic--box--s.ghost-primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.ghost-primary:disabled::after, .btn__ic--s.ghost-primary.disabled::after, .btn__text--box--s.ghost-primary:disabled::after, .btn__text--box--s.ghost-primary.disabled::after, .btn__ic--box--s.ghost-primary:disabled::after, .btn__ic--box--s.ghost-primary.disabled::after {
  display: none;
}
.btn__ic--s.ghost-tertiary, .btn__text--box--s.ghost-tertiary, .btn__ic--box--s.ghost-tertiary {
  background-color: transparent;
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-tertiary [class*=ic-], .btn__text--box--s.ghost-tertiary [class*=ic-], .btn__ic--box--s.ghost-tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--s.ghost-tertiary::after, .btn__text--box--s.ghost-tertiary::after, .btn__ic--box--s.ghost-tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.ghost-tertiary:focus, .btn__text--box--s.ghost-tertiary:focus, .btn__ic--box--s.ghost-tertiary:focus {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.ghost-tertiary:focus [class*=ic-], .btn__text--box--s.ghost-tertiary:focus [class*=ic-], .btn__ic--box--s.ghost-tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.ghost-tertiary:focus::after, .btn__text--box--s.ghost-tertiary:focus::after, .btn__ic--box--s.ghost-tertiary:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.ghost-tertiary:hover, .btn__text--box--s.ghost-tertiary:hover, .btn__ic--box--s.ghost-tertiary:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-tertiary:hover [class*=ic-], .btn__text--box--s.ghost-tertiary:hover [class*=ic-], .btn__ic--box--s.ghost-tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.ghost-tertiary:hover::after, .btn__text--box--s.ghost-tertiary:hover::after, .btn__ic--box--s.ghost-tertiary:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--s.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.ghost-tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--s.ghost-tertiary:disabled, .btn__ic--s.ghost-tertiary.disabled, .btn__text--box--s.ghost-tertiary:disabled, .btn__text--box--s.ghost-tertiary.disabled, .btn__ic--box--s.ghost-tertiary:disabled, .btn__ic--box--s.ghost-tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.ghost-tertiary:disabled [class*=ic-], .btn__ic--s.ghost-tertiary.disabled [class*=ic-], .btn__text--box--s.ghost-tertiary:disabled [class*=ic-], .btn__text--box--s.ghost-tertiary.disabled [class*=ic-], .btn__ic--box--s.ghost-tertiary:disabled [class*=ic-], .btn__ic--box--s.ghost-tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.ghost-tertiary:disabled::after, .btn__ic--s.ghost-tertiary.disabled::after, .btn__text--box--s.ghost-tertiary:disabled::after, .btn__text--box--s.ghost-tertiary.disabled::after, .btn__ic--box--s.ghost-tertiary:disabled::after, .btn__ic--box--s.ghost-tertiary.disabled::after {
  display: none;
}
.btn__ic--s.ghost-danger, .btn__text--box--s.ghost-danger, .btn__ic--box--s.ghost-danger {
  background-color: transparent;
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-danger [class*=ic-], .btn__text--box--s.ghost-danger [class*=ic-], .btn__ic--box--s.ghost-danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--s.ghost-danger::after, .btn__text--box--s.ghost-danger::after, .btn__ic--box--s.ghost-danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.ghost-danger:focus, .btn__text--box--s.ghost-danger:focus, .btn__ic--box--s.ghost-danger:focus {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.ghost-danger:focus [class*=ic-], .btn__text--box--s.ghost-danger:focus [class*=ic-], .btn__ic--box--s.ghost-danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.ghost-danger:focus::after, .btn__text--box--s.ghost-danger:focus::after, .btn__ic--box--s.ghost-danger:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--s.ghost-danger:hover, .btn__text--box--s.ghost-danger:hover, .btn__ic--box--s.ghost-danger:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-danger:hover [class*=ic-], .btn__text--box--s.ghost-danger:hover [class*=ic-], .btn__ic--box--s.ghost-danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.ghost-danger:hover::after, .btn__text--box--s.ghost-danger:hover::after, .btn__ic--box--s.ghost-danger:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--s.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled):active, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).active, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--s.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--s.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__text--box--s.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.ghost-danger:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--s.ghost-danger:disabled, .btn__ic--s.ghost-danger.disabled, .btn__text--box--s.ghost-danger:disabled, .btn__text--box--s.ghost-danger.disabled, .btn__ic--box--s.ghost-danger:disabled, .btn__ic--box--s.ghost-danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--s.ghost-danger:disabled [class*=ic-], .btn__ic--s.ghost-danger.disabled [class*=ic-], .btn__text--box--s.ghost-danger:disabled [class*=ic-], .btn__text--box--s.ghost-danger.disabled [class*=ic-], .btn__ic--box--s.ghost-danger:disabled [class*=ic-], .btn__ic--box--s.ghost-danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.ghost-danger:disabled::after, .btn__ic--s.ghost-danger.disabled::after, .btn__text--box--s.ghost-danger:disabled::after, .btn__text--box--s.ghost-danger.disabled::after, .btn__ic--box--s.ghost-danger:disabled::after, .btn__ic--box--s.ghost-danger.disabled::after {
  display: none;
}
.btn__ic--s.primary-line, .btn__text--box--s.primary-line, .btn__ic--box--s.primary-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary-line [class*=ic-], .btn__text--box--s.primary-line [class*=ic-], .btn__ic--box--s.primary-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--s.primary-line::after, .btn__text--box--s.primary-line::after, .btn__ic--box--s.primary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.primary-line:focus, .btn__text--box--s.primary-line:focus, .btn__ic--box--s.primary-line:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.primary-line:focus [class*=ic-], .btn__text--box--s.primary-line:focus [class*=ic-], .btn__ic--box--s.primary-line:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.primary-line:focus::after, .btn__text--box--s.primary-line:focus::after, .btn__ic--box--s.primary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.primary-line:hover, .btn__text--box--s.primary-line:hover, .btn__ic--box--s.primary-line:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary-line:hover [class*=ic-], .btn__text--box--s.primary-line:hover [class*=ic-], .btn__ic--box--s.primary-line:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.primary-line:hover::after, .btn__text--box--s.primary-line:hover::after, .btn__ic--box--s.primary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.primary-line:not(:disabled):not(.disabled):active, .btn__ic--s.primary-line:not(:disabled):not(.disabled).active, .btn__text--box--s.primary-line:not(:disabled):not(.disabled):active, .btn__text--box--s.primary-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.primary-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.primary-line:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.primary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--s.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.primary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.primary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.primary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.primary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--s.primary-line:disabled, .btn__ic--s.primary-line.disabled, .btn__text--box--s.primary-line:disabled, .btn__text--box--s.primary-line.disabled, .btn__ic--box--s.primary-line:disabled, .btn__ic--box--s.primary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.primary-line:disabled [class*=ic-], .btn__ic--s.primary-line.disabled [class*=ic-], .btn__text--box--s.primary-line:disabled [class*=ic-], .btn__text--box--s.primary-line.disabled [class*=ic-], .btn__ic--box--s.primary-line:disabled [class*=ic-], .btn__ic--box--s.primary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.primary-line:disabled::after, .btn__ic--s.primary-line.disabled::after, .btn__text--box--s.primary-line:disabled::after, .btn__text--box--s.primary-line.disabled::after, .btn__ic--box--s.primary-line:disabled::after, .btn__ic--box--s.primary-line.disabled::after {
  display: none;
}
.btn__ic--s.gray-line, .btn__text--box--s.gray-line, .btn__ic--box--s.gray-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--s.gray-line [class*=ic-], .btn__text--box--s.gray-line [class*=ic-], .btn__ic--box--s.gray-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--s.gray-line::after, .btn__text--box--s.gray-line::after, .btn__ic--box--s.gray-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.gray-line:focus, .btn__text--box--s.gray-line:focus, .btn__ic--box--s.gray-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.gray-line:focus [class*=ic-], .btn__text--box--s.gray-line:focus [class*=ic-], .btn__ic--box--s.gray-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.gray-line:focus::after, .btn__text--box--s.gray-line:focus::after, .btn__ic--box--s.gray-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.gray-line:hover, .btn__text--box--s.gray-line:hover, .btn__ic--box--s.gray-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--s.gray-line:hover [class*=ic-], .btn__text--box--s.gray-line:hover [class*=ic-], .btn__ic--box--s.gray-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.gray-line:hover::after, .btn__text--box--s.gray-line:hover::after, .btn__ic--box--s.gray-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.gray-line:not(:disabled):not(.disabled):active, .btn__ic--s.gray-line:not(:disabled):not(.disabled).active, .btn__text--box--s.gray-line:not(:disabled):not(.disabled):active, .btn__text--box--s.gray-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.gray-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.gray-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--s.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.gray-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.gray-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.gray-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.gray-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.gray-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--s.gray-line:disabled, .btn__ic--s.gray-line.disabled, .btn__text--box--s.gray-line:disabled, .btn__text--box--s.gray-line.disabled, .btn__ic--box--s.gray-line:disabled, .btn__ic--box--s.gray-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.gray-line:disabled [class*=ic-], .btn__ic--s.gray-line.disabled [class*=ic-], .btn__text--box--s.gray-line:disabled [class*=ic-], .btn__text--box--s.gray-line.disabled [class*=ic-], .btn__ic--box--s.gray-line:disabled [class*=ic-], .btn__ic--box--s.gray-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.gray-line:disabled::after, .btn__ic--s.gray-line.disabled::after, .btn__text--box--s.gray-line:disabled::after, .btn__text--box--s.gray-line.disabled::after, .btn__ic--box--s.gray-line:disabled::after, .btn__ic--box--s.gray-line.disabled::after {
  display: none;
}
.btn__ic--s.secondary-line, .btn__text--box--s.secondary-line, .btn__ic--box--s.secondary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.secondary-line [class*=ic-], .btn__text--box--s.secondary-line [class*=ic-], .btn__ic--box--s.secondary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--s.secondary-line::after, .btn__text--box--s.secondary-line::after, .btn__ic--box--s.secondary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.secondary-line:focus, .btn__text--box--s.secondary-line:focus, .btn__ic--box--s.secondary-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
}
.btn__ic--s.secondary-line:focus [class*=ic-], .btn__text--box--s.secondary-line:focus [class*=ic-], .btn__ic--box--s.secondary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.secondary-line:focus::after, .btn__text--box--s.secondary-line:focus::after, .btn__ic--box--s.secondary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.secondary-line:hover, .btn__text--box--s.secondary-line:hover, .btn__ic--box--s.secondary-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.secondary-line:hover [class*=ic-], .btn__text--box--s.secondary-line:hover [class*=ic-], .btn__ic--box--s.secondary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.secondary-line:hover::after, .btn__text--box--s.secondary-line:hover::after, .btn__ic--box--s.secondary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--s.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--s.secondary-line:not(:disabled):not(.disabled).active, .btn__text--box--s.secondary-line:not(:disabled):not(.disabled):active, .btn__text--box--s.secondary-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--s.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.secondary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.secondary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.secondary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.secondary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--s.secondary-line:disabled, .btn__ic--s.secondary-line.disabled, .btn__text--box--s.secondary-line:disabled, .btn__text--box--s.secondary-line.disabled, .btn__ic--box--s.secondary-line:disabled, .btn__ic--box--s.secondary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.secondary-line:disabled [class*=ic-], .btn__ic--s.secondary-line.disabled [class*=ic-], .btn__text--box--s.secondary-line:disabled [class*=ic-], .btn__text--box--s.secondary-line.disabled [class*=ic-], .btn__ic--box--s.secondary-line:disabled [class*=ic-], .btn__ic--box--s.secondary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.secondary-line:disabled::after, .btn__ic--s.secondary-line.disabled::after, .btn__text--box--s.secondary-line:disabled::after, .btn__text--box--s.secondary-line.disabled::after, .btn__ic--box--s.secondary-line:disabled::after, .btn__ic--box--s.secondary-line.disabled::after {
  display: none;
}
.btn__ic--s.tertiary-line, .btn__text--box--s.tertiary-line, .btn__ic--box--s.tertiary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.tertiary-line [class*=ic-], .btn__text--box--s.tertiary-line [class*=ic-], .btn__ic--box--s.tertiary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--s.tertiary-line::after, .btn__text--box--s.tertiary-line::after, .btn__ic--box--s.tertiary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.tertiary-line:focus, .btn__text--box--s.tertiary-line:focus, .btn__ic--box--s.tertiary-line:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--s.tertiary-line:focus [class*=ic-], .btn__text--box--s.tertiary-line:focus [class*=ic-], .btn__ic--box--s.tertiary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary-line:focus::after, .btn__text--box--s.tertiary-line:focus::after, .btn__ic--box--s.tertiary-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.tertiary-line:hover, .btn__text--box--s.tertiary-line:hover, .btn__ic--box--s.tertiary-line:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.tertiary-line:hover [class*=ic-], .btn__text--box--s.tertiary-line:hover [class*=ic-], .btn__ic--box--s.tertiary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary-line:hover::after, .btn__text--box--s.tertiary-line:hover::after, .btn__ic--box--s.tertiary-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--s.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--s.tertiary-line:not(:disabled):not(.disabled).active, .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled):active, .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--s.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--s.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.tertiary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--s.tertiary-line:disabled, .btn__ic--s.tertiary-line.disabled, .btn__text--box--s.tertiary-line:disabled, .btn__text--box--s.tertiary-line.disabled, .btn__ic--box--s.tertiary-line:disabled, .btn__ic--box--s.tertiary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.tertiary-line:disabled [class*=ic-], .btn__ic--s.tertiary-line.disabled [class*=ic-], .btn__text--box--s.tertiary-line:disabled [class*=ic-], .btn__text--box--s.tertiary-line.disabled [class*=ic-], .btn__ic--box--s.tertiary-line:disabled [class*=ic-], .btn__ic--box--s.tertiary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.tertiary-line:disabled::after, .btn__ic--s.tertiary-line.disabled::after, .btn__text--box--s.tertiary-line:disabled::after, .btn__text--box--s.tertiary-line.disabled::after, .btn__ic--box--s.tertiary-line:disabled::after, .btn__ic--box--s.tertiary-line.disabled::after {
  display: none;
}
.btn__ic--s.check-line, .btn__text--box--s.check-line, .btn__ic--box--s.check-line {
  position: relative;
  isolation: isolate;
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check-line [class*=ic-], .btn__text--box--s.check-line [class*=ic-], .btn__ic--box--s.check-line [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__ic--s.check-line::after, .btn__text--box--s.check-line::after, .btn__ic--box--s.check-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.check-line:focus, .btn__text--box--s.check-line:focus, .btn__ic--box--s.check-line:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.check-line:focus [class*=ic-], .btn__text--box--s.check-line:focus [class*=ic-], .btn__ic--box--s.check-line:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--s.check-line:focus::after, .btn__text--box--s.check-line:focus::after, .btn__ic--box--s.check-line:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--s.check-line:hover, .btn__text--box--s.check-line:hover, .btn__ic--box--s.check-line:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check-line:hover [class*=ic-], .btn__text--box--s.check-line:hover [class*=ic-], .btn__ic--box--s.check-line:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--s.check-line:hover::after, .btn__text--box--s.check-line:hover::after, .btn__ic--box--s.check-line:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--s.check-line:not(:disabled):not(.disabled):active, .btn__ic--s.check-line:not(:disabled):not(.disabled).active, .btn__text--box--s.check-line:not(:disabled):not(.disabled):active, .btn__text--box--s.check-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.check-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.check-line:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--s.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.check-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--s.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.check-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.check-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.check-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.check-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__ic--s.check-line:disabled, .btn__ic--s.check-line.disabled, .btn__text--box--s.check-line:disabled, .btn__text--box--s.check-line.disabled, .btn__ic--box--s.check-line:disabled, .btn__ic--box--s.check-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.check-line:disabled [class*=ic-], .btn__ic--s.check-line.disabled [class*=ic-], .btn__text--box--s.check-line:disabled [class*=ic-], .btn__text--box--s.check-line.disabled [class*=ic-], .btn__ic--box--s.check-line:disabled [class*=ic-], .btn__ic--box--s.check-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.check-line:disabled::after, .btn__ic--s.check-line.disabled::after, .btn__text--box--s.check-line:disabled::after, .btn__text--box--s.check-line.disabled::after, .btn__ic--box--s.check-line:disabled::after, .btn__ic--box--s.check-line.disabled::after {
  display: none;
}
.btn__ic--s.danger-line, .btn__text--box--s.danger-line, .btn__ic--box--s.danger-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--s.danger-line [class*=ic-], .btn__text--box--s.danger-line [class*=ic-], .btn__ic--box--s.danger-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--s.danger-line::after, .btn__text--box--s.danger-line::after, .btn__ic--box--s.danger-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--s.danger-line:focus, .btn__text--box--s.danger-line:focus, .btn__ic--box--s.danger-line:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--s.danger-line:focus [class*=ic-], .btn__text--box--s.danger-line:focus [class*=ic-], .btn__ic--box--s.danger-line:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger-line:focus::after, .btn__text--box--s.danger-line:focus::after, .btn__ic--box--s.danger-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--s.danger-line:hover, .btn__text--box--s.danger-line:hover, .btn__ic--box--s.danger-line:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--s.danger-line:hover [class*=ic-], .btn__text--box--s.danger-line:hover [class*=ic-], .btn__ic--box--s.danger-line:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger-line:hover::after, .btn__text--box--s.danger-line:hover::after, .btn__ic--box--s.danger-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--s.danger-line:not(:disabled):not(.disabled):active, .btn__ic--s.danger-line:not(:disabled):not(.disabled).active, .btn__text--box--s.danger-line:not(:disabled):not(.disabled):active, .btn__text--box--s.danger-line:not(:disabled):not(.disabled).active, .btn__ic--box--s.danger-line:not(:disabled):not(.disabled):active, .btn__ic--box--s.danger-line:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--s.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--s.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--s.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--s.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--s.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--s.danger-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--s.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--s.danger-line:not(:disabled):not(.disabled).active::after, .btn__text--box--s.danger-line:not(:disabled):not(.disabled):active::after, .btn__text--box--s.danger-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--s.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--s.danger-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--s.danger-line:disabled, .btn__ic--s.danger-line.disabled, .btn__text--box--s.danger-line:disabled, .btn__text--box--s.danger-line.disabled, .btn__ic--box--s.danger-line:disabled, .btn__ic--box--s.danger-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--s.danger-line:disabled [class*=ic-], .btn__ic--s.danger-line.disabled [class*=ic-], .btn__text--box--s.danger-line:disabled [class*=ic-], .btn__text--box--s.danger-line.disabled [class*=ic-], .btn__ic--box--s.danger-line:disabled [class*=ic-], .btn__ic--box--s.danger-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--s.danger-line:disabled::after, .btn__ic--s.danger-line.disabled::after, .btn__text--box--s.danger-line:disabled::after, .btn__text--box--s.danger-line.disabled::after, .btn__ic--box--s.danger-line:disabled::after, .btn__ic--box--s.danger-line.disabled::after {
  display: none;
}
.btn__text--box--s {
  --icon-size: 1.25rem;
  --icon-gap: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: var(--icon-gap);
}
.btn__text--box--s.google {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--s.google::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_google.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--s.google::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--s.google:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--s.google:focus::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--s.google:hover {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--s.google:hover::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--s.google:not(:disabled):not(.disabled):active, .btn__text--box--s.google:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--s.google:not(:disabled):not(.disabled):active::after, .btn__text--box--s.google:not(:disabled):not(.disabled).active::after {
  background-color: rgba(43, 47, 66, 0.25);
}
.btn__text--box--s.google:disabled, .btn__text--box--s.google.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_google_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--s.google:disabled::after, .btn__text--box--s.google.disabled::after {
  display: none;
}
.btn__text--box--s.kakao {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--s.kakao::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_kakao.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--s.kakao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--s.kakao:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--s.kakao:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--s.kakao:hover {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--s.kakao:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--s.kakao:not(:disabled):not(.disabled):active, .btn__text--box--s.kakao:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--s.kakao:not(:disabled):not(.disabled):active::after, .btn__text--box--s.kakao:not(:disabled):not(.disabled).active::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__text--box--s.kakao:disabled, .btn__text--box--s.kakao.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_kakao_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--s.kakao:disabled::after, .btn__text--box--s.kakao.disabled::after {
  display: none;
}
.btn__text--box--s.excel {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.excel::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_xls.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--s.excel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--s.excel:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.excel:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--s.excel:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.excel:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--s.excel:not(:disabled):not(.disabled):active, .btn__text--box--s.excel:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.excel:not(:disabled):not(.disabled):active::after, .btn__text--box--s.excel:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--s.excel:disabled, .btn__text--box--s.excel.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--s.excel:disabled::after, .btn__text--box--s.excel.disabled::after {
  display: none;
}
.btn__text--box--s.pdf {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--s.pdf::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--s.pdf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--s.pdf:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--s.pdf:focus::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--s.pdf:hover {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--s.pdf:hover::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--s.pdf:not(:disabled):not(.disabled):active, .btn__text--box--s.pdf:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--s.pdf:not(:disabled):not(.disabled):active::after, .btn__text--box--s.pdf:not(:disabled):not(.disabled).active::after {
  background-color: rgba(222, 52, 18, 0.25);
}
.btn__text--box--s.pdf:disabled, .btn__text--box--s.pdf.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--s.pdf:disabled::after, .btn__text--box--s.pdf.disabled::after {
  display: none;
}
.btn__text--box--s.csv {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.csv::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--s.csv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--s.csv:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.csv:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--s.csv:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.csv:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--s.csv:not(:disabled):not(.disabled):active, .btn__text--box--s.csv:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--s.csv:not(:disabled):not(.disabled):active::after, .btn__text--box--s.csv:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--s.csv:disabled, .btn__text--box--s.csv.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--s.csv:disabled::after, .btn__text--box--s.csv.disabled::after {
  display: none;
}
.btn__ic--xs {
  height: fit-content;
  line-height: 0;
  padding: 0.0625rem;
}
.btn__ic--box--xs {
  display: flex;
  align-items: center;
  line-height: 1;
  height: 1rem;
  font-size: 0.625rem;
  padding: 0.0625rem 0.125rem;
}
.btn__ic--box--xs .btn__ic__text {
  font-weight: 400;
  pointer-events: none;
}
.btn__ic--box--xs span:first-of-type {
  margin-right: 0.125rem;
}
.btn__text--box--xs {
  height: 1rem;
  font-size: 0.625rem;
  padding: 0.0625rem 0.25rem;
}
.btn__ic--xs.primary, .btn__text--box--xs.primary, .btn__ic--box--xs.primary {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary [class*=ic-], .btn__text--box--xs.primary [class*=ic-], .btn__ic--box--xs.primary [class*=ic-] {
  background: var(--btn-primary-icon);
  pointer-events: none;
}
.btn__ic--xs.primary::after, .btn__text--box--xs.primary::after, .btn__ic--box--xs.primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.primary:focus, .btn__text--box--xs.primary:focus, .btn__ic--box--xs.primary:focus {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.primary:focus [class*=ic-], .btn__text--box--xs.primary:focus [class*=ic-], .btn__ic--box--xs.primary:focus [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--xs.primary:focus::after, .btn__text--box--xs.primary:focus::after, .btn__ic--box--xs.primary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.primary:hover, .btn__text--box--xs.primary:hover, .btn__ic--box--xs.primary:hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary:hover [class*=ic-], .btn__text--box--xs.primary:hover [class*=ic-], .btn__ic--box--xs.primary:hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--xs.primary:hover::after, .btn__text--box--xs.primary:hover::after, .btn__ic--box--xs.primary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.primary:not(:disabled):not(.disabled):active, .btn__ic--xs.primary:not(:disabled):not(.disabled).active, .btn__ic--xs.primary:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.primary:not(:disabled):not(.disabled):active, .btn__text--box--xs.primary:not(:disabled):not(.disabled).active, .btn__text--box--xs.primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.primary:not(:disabled):not(.disabled):active, .btn__ic--box--xs.primary:not(:disabled):not(.disabled).active, .btn__ic--box--xs.primary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__ic--xs.primary:not(:disabled):not(.disabled):active::after, .btn__ic--xs.primary:not(:disabled):not(.disabled).active::after, .btn__ic--xs.primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.primary:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.primary:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.primary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--xs.primary:disabled, .btn__ic--xs.primary.disabled, .btn__text--box--xs.primary:disabled, .btn__text--box--xs.primary.disabled, .btn__ic--box--xs.primary:disabled, .btn__ic--box--xs.primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.primary:disabled [class*=ic-], .btn__ic--xs.primary.disabled [class*=ic-], .btn__text--box--xs.primary:disabled [class*=ic-], .btn__text--box--xs.primary.disabled [class*=ic-], .btn__ic--box--xs.primary:disabled [class*=ic-], .btn__ic--box--xs.primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.primary:disabled::after, .btn__ic--xs.primary.disabled::after, .btn__text--box--xs.primary:disabled::after, .btn__text--box--xs.primary.disabled::after, .btn__ic--box--xs.primary:disabled::after, .btn__ic--box--xs.primary.disabled::after {
  display: none;
}
.btn__ic--xs.secondary, .btn__text--box--xs.secondary, .btn__ic--box--xs.secondary {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--xs.secondary [class*=ic-], .btn__text--box--xs.secondary [class*=ic-], .btn__ic--box--xs.secondary [class*=ic-] {
  background: var(--btn-secondary-icon);
  pointer-events: none;
}
.btn__ic--xs.secondary::after, .btn__text--box--xs.secondary::after, .btn__ic--box--xs.secondary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.secondary:focus, .btn__text--box--xs.secondary:focus, .btn__ic--box--xs.secondary:focus {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.secondary:focus [class*=ic-], .btn__text--box--xs.secondary:focus [class*=ic-], .btn__ic--box--xs.secondary:focus [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--xs.secondary:focus::after, .btn__text--box--xs.secondary:focus::after, .btn__ic--box--xs.secondary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.secondary:hover, .btn__text--box--xs.secondary:hover, .btn__ic--box--xs.secondary:hover {
  color: var(--btn-secondary-font);
  background-color: var(--btn-secondary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--xs.secondary:hover [class*=ic-], .btn__text--box--xs.secondary:hover [class*=ic-], .btn__ic--box--xs.secondary:hover [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--xs.secondary:hover::after, .btn__text--box--xs.secondary:hover::after, .btn__ic--box--xs.secondary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.secondary:not(:disabled):not(.disabled):active, .btn__ic--xs.secondary:not(:disabled):not(.disabled).active, .btn__ic--xs.secondary:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.secondary:not(:disabled):not(.disabled):active, .btn__text--box--xs.secondary:not(:disabled):not(.disabled).active, .btn__text--box--xs.secondary:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled):active, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).active, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-secondary-bg);
  color: var(--btn-secondary-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-secondary-bg);
}
.btn__ic--xs.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.secondary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.secondary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-secondary-icon);
}
.btn__ic--xs.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--xs.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--xs.secondary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.secondary:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.secondary:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.secondary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.secondary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--xs.secondary:disabled, .btn__ic--xs.secondary.disabled, .btn__text--box--xs.secondary:disabled, .btn__text--box--xs.secondary.disabled, .btn__ic--box--xs.secondary:disabled, .btn__ic--box--xs.secondary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.secondary:disabled [class*=ic-], .btn__ic--xs.secondary.disabled [class*=ic-], .btn__text--box--xs.secondary:disabled [class*=ic-], .btn__text--box--xs.secondary.disabled [class*=ic-], .btn__ic--box--xs.secondary:disabled [class*=ic-], .btn__ic--box--xs.secondary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.secondary:disabled::after, .btn__ic--xs.secondary.disabled::after, .btn__text--box--xs.secondary:disabled::after, .btn__text--box--xs.secondary.disabled::after, .btn__ic--box--xs.secondary:disabled::after, .btn__ic--box--xs.secondary.disabled::after {
  display: none;
}
.btn__ic--xs.tertiary, .btn__text--box--xs.tertiary, .btn__ic--box--xs.tertiary {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.tertiary [class*=ic-], .btn__text--box--xs.tertiary [class*=ic-], .btn__ic--box--xs.tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--xs.tertiary::after, .btn__text--box--xs.tertiary::after, .btn__ic--box--xs.tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.tertiary:focus, .btn__text--box--xs.tertiary:focus, .btn__ic--box--xs.tertiary:focus {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.tertiary:focus [class*=ic-], .btn__text--box--xs.tertiary:focus [class*=ic-], .btn__ic--box--xs.tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary:focus::after, .btn__text--box--xs.tertiary:focus::after, .btn__ic--box--xs.tertiary:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.tertiary:hover, .btn__text--box--xs.tertiary:hover, .btn__ic--box--xs.tertiary:hover {
  color: var(--color-gray-070);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.tertiary:hover [class*=ic-], .btn__text--box--xs.tertiary:hover [class*=ic-], .btn__ic--box--xs.tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary:hover::after, .btn__text--box--xs.tertiary:hover::after, .btn__ic--box--xs.tertiary:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.tertiary:not(:disabled):not(.disabled):active, .btn__ic--xs.tertiary:not(:disabled):not(.disabled).active, .btn__ic--xs.tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled):active, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).active, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--xs.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--xs.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--xs.tertiary:disabled, .btn__ic--xs.tertiary.disabled, .btn__text--box--xs.tertiary:disabled, .btn__text--box--xs.tertiary.disabled, .btn__ic--box--xs.tertiary:disabled, .btn__ic--box--xs.tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.tertiary:disabled [class*=ic-], .btn__ic--xs.tertiary.disabled [class*=ic-], .btn__text--box--xs.tertiary:disabled [class*=ic-], .btn__text--box--xs.tertiary.disabled [class*=ic-], .btn__ic--box--xs.tertiary:disabled [class*=ic-], .btn__ic--box--xs.tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.tertiary:disabled::after, .btn__ic--xs.tertiary.disabled::after, .btn__text--box--xs.tertiary:disabled::after, .btn__text--box--xs.tertiary.disabled::after, .btn__ic--box--xs.tertiary:disabled::after, .btn__ic--box--xs.tertiary.disabled::after {
  display: none;
}
.btn__ic--xs.check, .btn__text--box--xs.check, .btn__ic--box--xs.check {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check [class*=ic-], .btn__text--box--xs.check [class*=ic-], .btn__ic--box--xs.check [class*=ic-] {
  background: var(--color-gray-000);
  pointer-events: none;
}
.btn__ic--xs.check::after, .btn__text--box--xs.check::after, .btn__ic--box--xs.check::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.check:focus, .btn__text--box--xs.check:focus, .btn__ic--box--xs.check:focus {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.check:focus [class*=ic-], .btn__text--box--xs.check:focus [class*=ic-], .btn__ic--box--xs.check:focus [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--xs.check:focus::after, .btn__text--box--xs.check:focus::after, .btn__ic--box--xs.check:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.check:hover, .btn__text--box--xs.check:hover, .btn__ic--box--xs.check:hover {
  color: var(--color-gray-000);
  background-color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check:hover [class*=ic-], .btn__text--box--xs.check:hover [class*=ic-], .btn__ic--box--xs.check:hover [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--xs.check:hover::after, .btn__text--box--xs.check:hover::after, .btn__ic--box--xs.check:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__ic--xs.check:not(:disabled):not(.disabled):active, .btn__ic--xs.check:not(:disabled):not(.disabled).active, .btn__ic--xs.check:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.check:not(:disabled):not(.disabled):active, .btn__text--box--xs.check:not(:disabled):not(.disabled).active, .btn__text--box--xs.check:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.check:not(:disabled):not(.disabled):active, .btn__ic--box--xs.check:not(:disabled):not(.disabled).active, .btn__ic--box--xs.check:not(:disabled):not(.disabled).actvie {
  background-color: var(--color-vivid-green-070);
  color: var(--color-gray-000);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.check:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.check:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.check:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.check:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-000);
}
.btn__ic--xs.check:not(:disabled):not(.disabled):active::after, .btn__ic--xs.check:not(:disabled):not(.disabled).active::after, .btn__ic--xs.check:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.check:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.check:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.check:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.check:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.check:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.check:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__ic--xs.check:disabled, .btn__ic--xs.check.disabled, .btn__text--box--xs.check:disabled, .btn__text--box--xs.check.disabled, .btn__ic--box--xs.check:disabled, .btn__ic--box--xs.check.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.check:disabled [class*=ic-], .btn__ic--xs.check.disabled [class*=ic-], .btn__text--box--xs.check:disabled [class*=ic-], .btn__text--box--xs.check.disabled [class*=ic-], .btn__ic--box--xs.check:disabled [class*=ic-], .btn__ic--box--xs.check.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.check:disabled::after, .btn__ic--xs.check.disabled::after, .btn__text--box--xs.check:disabled::after, .btn__text--box--xs.check.disabled::after, .btn__ic--box--xs.check:disabled::after, .btn__ic--box--xs.check.disabled::after {
  display: none;
}
.btn__ic--xs.danger, .btn__text--box--xs.danger, .btn__ic--box--xs.danger {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--xs.danger [class*=ic-], .btn__text--box--xs.danger [class*=ic-], .btn__ic--box--xs.danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--xs.danger::after, .btn__text--box--xs.danger::after, .btn__ic--box--xs.danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.danger:focus, .btn__text--box--xs.danger:focus, .btn__ic--box--xs.danger:focus {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.danger:focus [class*=ic-], .btn__text--box--xs.danger:focus [class*=ic-], .btn__ic--box--xs.danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger:focus::after, .btn__text--box--xs.danger:focus::after, .btn__ic--box--xs.danger:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--xs.danger:hover, .btn__text--box--xs.danger:hover, .btn__ic--box--xs.danger:hover {
  color: var(--btn-danger-font);
  background-color: var(--btn-danger-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--xs.danger:hover [class*=ic-], .btn__text--box--xs.danger:hover [class*=ic-], .btn__ic--box--xs.danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger:hover::after, .btn__text--box--xs.danger:hover::after, .btn__ic--box--xs.danger:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--xs.danger:not(:disabled):not(.disabled):active, .btn__ic--xs.danger:not(:disabled):not(.disabled).active, .btn__ic--xs.danger:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.danger:not(:disabled):not(.disabled):active, .btn__text--box--xs.danger:not(:disabled):not(.disabled).active, .btn__text--box--xs.danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.danger:not(:disabled):not(.disabled):active, .btn__ic--box--xs.danger:not(:disabled):not(.disabled).active, .btn__ic--box--xs.danger:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-danger-bg);
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-bg);
}
.btn__ic--xs.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger:not(:disabled):not(.disabled):active::after, .btn__ic--xs.danger:not(:disabled):not(.disabled).active::after, .btn__ic--xs.danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.danger:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.danger:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.danger:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--xs.danger:disabled, .btn__ic--xs.danger.disabled, .btn__text--box--xs.danger:disabled, .btn__text--box--xs.danger.disabled, .btn__ic--box--xs.danger:disabled, .btn__ic--box--xs.danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.danger:disabled [class*=ic-], .btn__ic--xs.danger.disabled [class*=ic-], .btn__text--box--xs.danger:disabled [class*=ic-], .btn__text--box--xs.danger.disabled [class*=ic-], .btn__ic--box--xs.danger:disabled [class*=ic-], .btn__ic--box--xs.danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.danger:disabled::after, .btn__ic--xs.danger.disabled::after, .btn__text--box--xs.danger:disabled::after, .btn__text--box--xs.danger.disabled::after, .btn__ic--box--xs.danger:disabled::after, .btn__ic--box--xs.danger.disabled::after {
  display: none;
}
.btn__ic--xs.error, .btn__text--box--xs.error, .btn__ic--box--xs.error {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--xs.error [class*=ic-], .btn__text--box--xs.error [class*=ic-], .btn__ic--box--xs.error [class*=ic-] {
  background: var(--btn-error-icon);
  pointer-events: none;
}
.btn__ic--xs.error::after, .btn__text--box--xs.error::after, .btn__ic--box--xs.error::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.error:focus, .btn__text--box--xs.error:focus, .btn__ic--box--xs.error:focus {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.error:focus [class*=ic-], .btn__text--box--xs.error:focus [class*=ic-], .btn__ic--box--xs.error:focus [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--xs.error:focus::after, .btn__text--box--xs.error:focus::after, .btn__ic--box--xs.error:focus::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--xs.error:hover, .btn__text--box--xs.error:hover, .btn__ic--box--xs.error:hover {
  color: var(--btn-error-font);
  background-color: var(--btn-error-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--xs.error:hover [class*=ic-], .btn__text--box--xs.error:hover [class*=ic-], .btn__ic--box--xs.error:hover [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--xs.error:hover::after, .btn__text--box--xs.error:hover::after, .btn__ic--box--xs.error:hover::after {
  background-color: rgba(var(--semantic-error-overlay), 0.12);
}
.btn__ic--xs.error:not(:disabled):not(.disabled):active, .btn__ic--xs.error:not(:disabled):not(.disabled).active, .btn__ic--xs.error:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.error:not(:disabled):not(.disabled):active, .btn__text--box--xs.error:not(:disabled):not(.disabled).active, .btn__text--box--xs.error:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.error:not(:disabled):not(.disabled):active, .btn__ic--box--xs.error:not(:disabled):not(.disabled).active, .btn__ic--box--xs.error:not(:disabled):not(.disabled).actvie {
  background-color: var(--btn-error-bg);
  color: var(--btn-error-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-error-bg);
}
.btn__ic--xs.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.error:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.error:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.error:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.error:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-error-icon);
}
.btn__ic--xs.error:not(:disabled):not(.disabled):active::after, .btn__ic--xs.error:not(:disabled):not(.disabled).active::after, .btn__ic--xs.error:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.error:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.error:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.error:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.error:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.error:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.error:not(:disabled):not(.disabled).actvie::after {
  background-color: rgba(var(--semantic-error-overlay), 0.25);
}
.btn__ic--xs.error:disabled, .btn__ic--xs.error.disabled, .btn__text--box--xs.error:disabled, .btn__text--box--xs.error.disabled, .btn__ic--box--xs.error:disabled, .btn__ic--box--xs.error.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.error:disabled [class*=ic-], .btn__ic--xs.error.disabled [class*=ic-], .btn__text--box--xs.error:disabled [class*=ic-], .btn__text--box--xs.error.disabled [class*=ic-], .btn__ic--box--xs.error:disabled [class*=ic-], .btn__ic--box--xs.error.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.error:disabled::after, .btn__ic--xs.error.disabled::after, .btn__text--box--xs.error:disabled::after, .btn__text--box--xs.error.disabled::after, .btn__ic--box--xs.error:disabled::after, .btn__ic--box--xs.error.disabled::after {
  display: none;
}
.btn__ic--xs.ghost-primary, .btn__text--box--xs.ghost-primary, .btn__ic--box--xs.ghost-primary {
  background-color: transparent;
  color: var(--btn-primary-bg);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-primary [class*=ic-], .btn__text--box--xs.ghost-primary [class*=ic-], .btn__ic--box--xs.ghost-primary [class*=ic-] {
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--xs.ghost-primary::after, .btn__text--box--xs.ghost-primary::after, .btn__ic--box--xs.ghost-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.ghost-primary:focus, .btn__text--box--xs.ghost-primary:focus, .btn__ic--box--xs.ghost-primary:focus {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.ghost-primary:focus [class*=ic-], .btn__text--box--xs.ghost-primary:focus [class*=ic-], .btn__ic--box--xs.ghost-primary:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.ghost-primary:focus::after, .btn__text--box--xs.ghost-primary:focus::after, .btn__ic--box--xs.ghost-primary:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.ghost-primary:hover, .btn__text--box--xs.ghost-primary:hover, .btn__ic--box--xs.ghost-primary:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-primary:hover [class*=ic-], .btn__text--box--xs.ghost-primary:hover [class*=ic-], .btn__ic--box--xs.ghost-primary:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.ghost-primary:hover::after, .btn__text--box--xs.ghost-primary:hover::after, .btn__ic--box--xs.ghost-primary:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled):active, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).active, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled):active, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).active, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--xs.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.ghost-primary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--xs.ghost-primary:disabled, .btn__ic--xs.ghost-primary.disabled, .btn__text--box--xs.ghost-primary:disabled, .btn__text--box--xs.ghost-primary.disabled, .btn__ic--box--xs.ghost-primary:disabled, .btn__ic--box--xs.ghost-primary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.ghost-primary:disabled [class*=ic-], .btn__ic--xs.ghost-primary.disabled [class*=ic-], .btn__text--box--xs.ghost-primary:disabled [class*=ic-], .btn__text--box--xs.ghost-primary.disabled [class*=ic-], .btn__ic--box--xs.ghost-primary:disabled [class*=ic-], .btn__ic--box--xs.ghost-primary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.ghost-primary:disabled::after, .btn__ic--xs.ghost-primary.disabled::after, .btn__text--box--xs.ghost-primary:disabled::after, .btn__text--box--xs.ghost-primary.disabled::after, .btn__ic--box--xs.ghost-primary:disabled::after, .btn__ic--box--xs.ghost-primary.disabled::after {
  display: none;
}
.btn__ic--xs.ghost-tertiary, .btn__text--box--xs.ghost-tertiary, .btn__ic--box--xs.ghost-tertiary {
  background-color: transparent;
  color: var(--color-gray-070);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-tertiary [class*=ic-], .btn__text--box--xs.ghost-tertiary [class*=ic-], .btn__ic--box--xs.ghost-tertiary [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--xs.ghost-tertiary::after, .btn__text--box--xs.ghost-tertiary::after, .btn__ic--box--xs.ghost-tertiary::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.ghost-tertiary:focus, .btn__text--box--xs.ghost-tertiary:focus, .btn__ic--box--xs.ghost-tertiary:focus {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.ghost-tertiary:focus [class*=ic-], .btn__text--box--xs.ghost-tertiary:focus [class*=ic-], .btn__ic--box--xs.ghost-tertiary:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.ghost-tertiary:focus::after, .btn__text--box--xs.ghost-tertiary:focus::after, .btn__ic--box--xs.ghost-tertiary:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.ghost-tertiary:hover, .btn__text--box--xs.ghost-tertiary:hover, .btn__ic--box--xs.ghost-tertiary:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-tertiary:hover [class*=ic-], .btn__text--box--xs.ghost-tertiary:hover [class*=ic-], .btn__ic--box--xs.ghost-tertiary:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.ghost-tertiary:hover::after, .btn__text--box--xs.ghost-tertiary:hover::after, .btn__ic--box--xs.ghost-tertiary:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.ghost-tertiary:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--xs.ghost-tertiary:disabled, .btn__ic--xs.ghost-tertiary.disabled, .btn__text--box--xs.ghost-tertiary:disabled, .btn__text--box--xs.ghost-tertiary.disabled, .btn__ic--box--xs.ghost-tertiary:disabled, .btn__ic--box--xs.ghost-tertiary.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.ghost-tertiary:disabled [class*=ic-], .btn__ic--xs.ghost-tertiary.disabled [class*=ic-], .btn__text--box--xs.ghost-tertiary:disabled [class*=ic-], .btn__text--box--xs.ghost-tertiary.disabled [class*=ic-], .btn__ic--box--xs.ghost-tertiary:disabled [class*=ic-], .btn__ic--box--xs.ghost-tertiary.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.ghost-tertiary:disabled::after, .btn__ic--xs.ghost-tertiary.disabled::after, .btn__text--box--xs.ghost-tertiary:disabled::after, .btn__text--box--xs.ghost-tertiary.disabled::after, .btn__ic--box--xs.ghost-tertiary:disabled::after, .btn__ic--box--xs.ghost-tertiary.disabled::after {
  display: none;
}
.btn__ic--xs.ghost-danger, .btn__text--box--xs.ghost-danger, .btn__ic--box--xs.ghost-danger {
  background-color: transparent;
  color: var(--btn-danger-font);
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-danger [class*=ic-], .btn__text--box--xs.ghost-danger [class*=ic-], .btn__ic--box--xs.ghost-danger [class*=ic-] {
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--xs.ghost-danger::after, .btn__text--box--xs.ghost-danger::after, .btn__ic--box--xs.ghost-danger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.ghost-danger:focus, .btn__text--box--xs.ghost-danger:focus, .btn__ic--box--xs.ghost-danger:focus {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.ghost-danger:focus [class*=ic-], .btn__text--box--xs.ghost-danger:focus [class*=ic-], .btn__ic--box--xs.ghost-danger:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.ghost-danger:focus::after, .btn__text--box--xs.ghost-danger:focus::after, .btn__ic--box--xs.ghost-danger:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--xs.ghost-danger:hover, .btn__text--box--xs.ghost-danger:hover, .btn__ic--box--xs.ghost-danger:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-danger:hover [class*=ic-], .btn__text--box--xs.ghost-danger:hover [class*=ic-], .btn__ic--box--xs.ghost-danger:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.ghost-danger:hover::after, .btn__text--box--xs.ghost-danger:hover::after, .btn__ic--box--xs.ghost-danger:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--xs.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled):active, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).active, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled):active, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).active, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie {
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem transparent;
}
.btn__ic--xs.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-], .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--xs.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie::after, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.ghost-danger:not(:disabled):not(.disabled).actvie::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--xs.ghost-danger:disabled, .btn__ic--xs.ghost-danger.disabled, .btn__text--box--xs.ghost-danger:disabled, .btn__text--box--xs.ghost-danger.disabled, .btn__ic--box--xs.ghost-danger:disabled, .btn__ic--box--xs.ghost-danger.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__ic--xs.ghost-danger:disabled [class*=ic-], .btn__ic--xs.ghost-danger.disabled [class*=ic-], .btn__text--box--xs.ghost-danger:disabled [class*=ic-], .btn__text--box--xs.ghost-danger.disabled [class*=ic-], .btn__ic--box--xs.ghost-danger:disabled [class*=ic-], .btn__ic--box--xs.ghost-danger.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.ghost-danger:disabled::after, .btn__ic--xs.ghost-danger.disabled::after, .btn__text--box--xs.ghost-danger:disabled::after, .btn__text--box--xs.ghost-danger.disabled::after, .btn__ic--box--xs.ghost-danger:disabled::after, .btn__ic--box--xs.ghost-danger.disabled::after {
  display: none;
}
.btn__ic--xs.primary-line, .btn__text--box--xs.primary-line, .btn__ic--box--xs.primary-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary-line [class*=ic-], .btn__text--box--xs.primary-line [class*=ic-], .btn__ic--box--xs.primary-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__ic--xs.primary-line::after, .btn__text--box--xs.primary-line::after, .btn__ic--box--xs.primary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.primary-line:focus, .btn__text--box--xs.primary-line:focus, .btn__ic--box--xs.primary-line:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.primary-line:focus [class*=ic-], .btn__text--box--xs.primary-line:focus [class*=ic-], .btn__ic--box--xs.primary-line:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.primary-line:focus::after, .btn__text--box--xs.primary-line:focus::after, .btn__ic--box--xs.primary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.primary-line:hover, .btn__text--box--xs.primary-line:hover, .btn__ic--box--xs.primary-line:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary-line:hover [class*=ic-], .btn__text--box--xs.primary-line:hover [class*=ic-], .btn__ic--box--xs.primary-line:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.primary-line:hover::after, .btn__text--box--xs.primary-line:hover::after, .btn__ic--box--xs.primary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.primary-line:not(:disabled):not(.disabled):active, .btn__ic--xs.primary-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.primary-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.primary-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.primary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__ic--xs.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.primary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.primary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.primary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.primary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--xs.primary-line:disabled, .btn__ic--xs.primary-line.disabled, .btn__text--box--xs.primary-line:disabled, .btn__text--box--xs.primary-line.disabled, .btn__ic--box--xs.primary-line:disabled, .btn__ic--box--xs.primary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.primary-line:disabled [class*=ic-], .btn__ic--xs.primary-line.disabled [class*=ic-], .btn__text--box--xs.primary-line:disabled [class*=ic-], .btn__text--box--xs.primary-line.disabled [class*=ic-], .btn__ic--box--xs.primary-line:disabled [class*=ic-], .btn__ic--box--xs.primary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.primary-line:disabled::after, .btn__ic--xs.primary-line.disabled::after, .btn__text--box--xs.primary-line:disabled::after, .btn__text--box--xs.primary-line.disabled::after, .btn__ic--box--xs.primary-line:disabled::after, .btn__ic--box--xs.primary-line.disabled::after {
  display: none;
}
.btn__ic--xs.gray-line, .btn__text--box--xs.gray-line, .btn__ic--box--xs.gray-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--xs.gray-line [class*=ic-], .btn__text--box--xs.gray-line [class*=ic-], .btn__ic--box--xs.gray-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--xs.gray-line::after, .btn__text--box--xs.gray-line::after, .btn__ic--box--xs.gray-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.gray-line:focus, .btn__text--box--xs.gray-line:focus, .btn__ic--box--xs.gray-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.gray-line:focus [class*=ic-], .btn__text--box--xs.gray-line:focus [class*=ic-], .btn__ic--box--xs.gray-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.gray-line:focus::after, .btn__text--box--xs.gray-line:focus::after, .btn__ic--box--xs.gray-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.gray-line:hover, .btn__text--box--xs.gray-line:hover, .btn__ic--box--xs.gray-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--xs.gray-line:hover [class*=ic-], .btn__text--box--xs.gray-line:hover [class*=ic-], .btn__ic--box--xs.gray-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.gray-line:hover::after, .btn__text--box--xs.gray-line:hover::after, .btn__ic--box--xs.gray-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.gray-line:not(:disabled):not(.disabled):active, .btn__ic--xs.gray-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.gray-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.gray-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__ic--xs.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.gray-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.gray-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.gray-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.gray-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.gray-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--xs.gray-line:disabled, .btn__ic--xs.gray-line.disabled, .btn__text--box--xs.gray-line:disabled, .btn__text--box--xs.gray-line.disabled, .btn__ic--box--xs.gray-line:disabled, .btn__ic--box--xs.gray-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.gray-line:disabled [class*=ic-], .btn__ic--xs.gray-line.disabled [class*=ic-], .btn__text--box--xs.gray-line:disabled [class*=ic-], .btn__text--box--xs.gray-line.disabled [class*=ic-], .btn__ic--box--xs.gray-line:disabled [class*=ic-], .btn__ic--box--xs.gray-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.gray-line:disabled::after, .btn__ic--xs.gray-line.disabled::after, .btn__text--box--xs.gray-line:disabled::after, .btn__text--box--xs.gray-line.disabled::after, .btn__ic--box--xs.gray-line:disabled::after, .btn__ic--box--xs.gray-line.disabled::after {
  display: none;
}
.btn__ic--xs.secondary-line, .btn__text--box--xs.secondary-line, .btn__ic--box--xs.secondary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.secondary-line [class*=ic-], .btn__text--box--xs.secondary-line [class*=ic-], .btn__ic--box--xs.secondary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--xs.secondary-line::after, .btn__text--box--xs.secondary-line::after, .btn__ic--box--xs.secondary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.secondary-line:focus, .btn__text--box--xs.secondary-line:focus, .btn__ic--box--xs.secondary-line:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
}
.btn__ic--xs.secondary-line:focus [class*=ic-], .btn__text--box--xs.secondary-line:focus [class*=ic-], .btn__ic--box--xs.secondary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.secondary-line:focus::after, .btn__text--box--xs.secondary-line:focus::after, .btn__ic--box--xs.secondary-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.secondary-line:hover, .btn__text--box--xs.secondary-line:hover, .btn__ic--box--xs.secondary-line:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.secondary-line:hover [class*=ic-], .btn__text--box--xs.secondary-line:hover [class*=ic-], .btn__ic--box--xs.secondary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.secondary-line:hover::after, .btn__text--box--xs.secondary-line:hover::after, .btn__ic--box--xs.secondary-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__ic--xs.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--xs.secondary-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__ic--xs.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.secondary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.secondary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.secondary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__ic--xs.secondary-line:disabled, .btn__ic--xs.secondary-line.disabled, .btn__text--box--xs.secondary-line:disabled, .btn__text--box--xs.secondary-line.disabled, .btn__ic--box--xs.secondary-line:disabled, .btn__ic--box--xs.secondary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.secondary-line:disabled [class*=ic-], .btn__ic--xs.secondary-line.disabled [class*=ic-], .btn__text--box--xs.secondary-line:disabled [class*=ic-], .btn__text--box--xs.secondary-line.disabled [class*=ic-], .btn__ic--box--xs.secondary-line:disabled [class*=ic-], .btn__ic--box--xs.secondary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.secondary-line:disabled::after, .btn__ic--xs.secondary-line.disabled::after, .btn__text--box--xs.secondary-line:disabled::after, .btn__text--box--xs.secondary-line.disabled::after, .btn__ic--box--xs.secondary-line:disabled::after, .btn__ic--box--xs.secondary-line.disabled::after {
  display: none;
}
.btn__ic--xs.tertiary-line, .btn__text--box--xs.tertiary-line, .btn__ic--box--xs.tertiary-line {
  position: relative;
  isolation: isolate;
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.tertiary-line [class*=ic-], .btn__text--box--xs.tertiary-line [class*=ic-], .btn__ic--box--xs.tertiary-line [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__ic--xs.tertiary-line::after, .btn__text--box--xs.tertiary-line::after, .btn__ic--box--xs.tertiary-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.tertiary-line:focus, .btn__text--box--xs.tertiary-line:focus, .btn__ic--box--xs.tertiary-line:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--xs.tertiary-line:focus [class*=ic-], .btn__text--box--xs.tertiary-line:focus [class*=ic-], .btn__ic--box--xs.tertiary-line:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary-line:focus::after, .btn__text--box--xs.tertiary-line:focus::after, .btn__ic--box--xs.tertiary-line:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.tertiary-line:hover, .btn__text--box--xs.tertiary-line:hover, .btn__ic--box--xs.tertiary-line:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.tertiary-line:hover [class*=ic-], .btn__text--box--xs.tertiary-line:hover [class*=ic-], .btn__ic--box--xs.tertiary-line:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary-line:hover::after, .btn__text--box--xs.tertiary-line:hover::after, .btn__ic--box--xs.tertiary-line:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__ic--xs.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--xs.tertiary-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
}
.btn__ic--xs.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__ic--xs.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.tertiary-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.tertiary-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__ic--xs.tertiary-line:disabled, .btn__ic--xs.tertiary-line.disabled, .btn__text--box--xs.tertiary-line:disabled, .btn__text--box--xs.tertiary-line.disabled, .btn__ic--box--xs.tertiary-line:disabled, .btn__ic--box--xs.tertiary-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.tertiary-line:disabled [class*=ic-], .btn__ic--xs.tertiary-line.disabled [class*=ic-], .btn__text--box--xs.tertiary-line:disabled [class*=ic-], .btn__text--box--xs.tertiary-line.disabled [class*=ic-], .btn__ic--box--xs.tertiary-line:disabled [class*=ic-], .btn__ic--box--xs.tertiary-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.tertiary-line:disabled::after, .btn__ic--xs.tertiary-line.disabled::after, .btn__text--box--xs.tertiary-line:disabled::after, .btn__text--box--xs.tertiary-line.disabled::after, .btn__ic--box--xs.tertiary-line:disabled::after, .btn__ic--box--xs.tertiary-line.disabled::after {
  display: none;
}
.btn__ic--xs.check-line, .btn__text--box--xs.check-line, .btn__ic--box--xs.check-line {
  position: relative;
  isolation: isolate;
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check-line [class*=ic-], .btn__text--box--xs.check-line [class*=ic-], .btn__ic--box--xs.check-line [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__ic--xs.check-line::after, .btn__text--box--xs.check-line::after, .btn__ic--box--xs.check-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.check-line:focus, .btn__text--box--xs.check-line:focus, .btn__ic--box--xs.check-line:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.check-line:focus [class*=ic-], .btn__text--box--xs.check-line:focus [class*=ic-], .btn__ic--box--xs.check-line:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--xs.check-line:focus::after, .btn__text--box--xs.check-line:focus::after, .btn__ic--box--xs.check-line:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--xs.check-line:hover, .btn__text--box--xs.check-line:hover, .btn__ic--box--xs.check-line:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check-line:hover [class*=ic-], .btn__text--box--xs.check-line:hover [class*=ic-], .btn__ic--box--xs.check-line:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--xs.check-line:hover::after, .btn__text--box--xs.check-line:hover::after, .btn__ic--box--xs.check-line:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__ic--xs.check-line:not(:disabled):not(.disabled):active, .btn__ic--xs.check-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.check-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.check-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.check-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.check-line:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__ic--xs.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.check-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.check-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.check-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__ic--xs.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.check-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.check-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.check-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.check-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.check-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__ic--xs.check-line:disabled, .btn__ic--xs.check-line.disabled, .btn__text--box--xs.check-line:disabled, .btn__text--box--xs.check-line.disabled, .btn__ic--box--xs.check-line:disabled, .btn__ic--box--xs.check-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.check-line:disabled [class*=ic-], .btn__ic--xs.check-line.disabled [class*=ic-], .btn__text--box--xs.check-line:disabled [class*=ic-], .btn__text--box--xs.check-line.disabled [class*=ic-], .btn__ic--box--xs.check-line:disabled [class*=ic-], .btn__ic--box--xs.check-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.check-line:disabled::after, .btn__ic--xs.check-line.disabled::after, .btn__text--box--xs.check-line:disabled::after, .btn__text--box--xs.check-line.disabled::after, .btn__ic--box--xs.check-line:disabled::after, .btn__ic--box--xs.check-line.disabled::after {
  display: none;
}
.btn__ic--xs.danger-line, .btn__text--box--xs.danger-line, .btn__ic--box--xs.danger-line {
  position: relative;
  isolation: isolate;
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--xs.danger-line [class*=ic-], .btn__text--box--xs.danger-line [class*=ic-], .btn__ic--box--xs.danger-line [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__ic--xs.danger-line::after, .btn__text--box--xs.danger-line::after, .btn__ic--box--xs.danger-line::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__ic--xs.danger-line:focus, .btn__text--box--xs.danger-line:focus, .btn__ic--box--xs.danger-line:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
}
.btn__ic--xs.danger-line:focus [class*=ic-], .btn__text--box--xs.danger-line:focus [class*=ic-], .btn__ic--box--xs.danger-line:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger-line:focus::after, .btn__text--box--xs.danger-line:focus::after, .btn__ic--box--xs.danger-line:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--xs.danger-line:hover, .btn__text--box--xs.danger-line:hover, .btn__ic--box--xs.danger-line:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--xs.danger-line:hover [class*=ic-], .btn__text--box--xs.danger-line:hover [class*=ic-], .btn__ic--box--xs.danger-line:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger-line:hover::after, .btn__text--box--xs.danger-line:hover::after, .btn__ic--box--xs.danger-line:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__ic--xs.danger-line:not(:disabled):not(.disabled):active, .btn__ic--xs.danger-line:not(:disabled):not(.disabled).active, .btn__text--box--xs.danger-line:not(:disabled):not(.disabled):active, .btn__text--box--xs.danger-line:not(:disabled):not(.disabled).active, .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled):active, .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__ic--xs.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--xs.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__text--box--xs.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__text--box--xs.danger-line:not(:disabled):not(.disabled).active [class*=ic-], .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled):active [class*=ic-], .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__ic--xs.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--xs.danger-line:not(:disabled):not(.disabled).active::after, .btn__text--box--xs.danger-line:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.danger-line:not(:disabled):not(.disabled).active::after, .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled):active::after, .btn__ic--box--xs.danger-line:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__ic--xs.danger-line:disabled, .btn__ic--xs.danger-line.disabled, .btn__text--box--xs.danger-line:disabled, .btn__text--box--xs.danger-line.disabled, .btn__ic--box--xs.danger-line:disabled, .btn__ic--box--xs.danger-line.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__ic--xs.danger-line:disabled [class*=ic-], .btn__ic--xs.danger-line.disabled [class*=ic-], .btn__text--box--xs.danger-line:disabled [class*=ic-], .btn__text--box--xs.danger-line.disabled [class*=ic-], .btn__ic--box--xs.danger-line:disabled [class*=ic-], .btn__ic--box--xs.danger-line.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__ic--xs.danger-line:disabled::after, .btn__ic--xs.danger-line.disabled::after, .btn__text--box--xs.danger-line:disabled::after, .btn__text--box--xs.danger-line.disabled::after, .btn__ic--box--xs.danger-line:disabled::after, .btn__ic--box--xs.danger-line.disabled::after {
  display: none;
}
.btn__text--box--xs {
  --icon-size: 1.375rem;
  --icon-gap: 0.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: var(--icon-gap);
}
.btn__text--box--xs.google {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--xs.google::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_google.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--xs.google::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--xs.google:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--xs.google:focus::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--xs.google:hover {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--xs.google:hover::after {
  background-color: rgba(43, 47, 66, 0.12);
}
.btn__text--box--xs.google:not(:disabled):not(.disabled):active, .btn__text--box--xs.google:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #4D536F;
  background-color: transparent;
  color: #2B2F42;
}
.btn__text--box--xs.google:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.google:not(:disabled):not(.disabled).active::after {
  background-color: rgba(43, 47, 66, 0.25);
}
.btn__text--box--xs.google:disabled, .btn__text--box--xs.google.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_google_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--xs.google:disabled::after, .btn__text--box--xs.google.disabled::after {
  display: none;
}
.btn__text--box--xs.kakao {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--xs.kakao::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/login/icon_kakao.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--xs.kakao::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--xs.kakao:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--xs.kakao:focus::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--xs.kakao:hover {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--xs.kakao:hover::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.12);
}
.btn__text--box--xs.kakao:not(:disabled):not(.disabled):active, .btn__text--box--xs.kakao:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #FADF2D;
  background-color: #FADF2D;
  color: #FFFFFF;
}
.btn__text--box--xs.kakao:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.kakao:not(:disabled):not(.disabled).active::after {
  background-color: rgba(var(--semantic-primary-overlay), 0.25);
}
.btn__text--box--xs.kakao:disabled, .btn__text--box--xs.kakao.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
  background-image: url("../../assets/media/icons/login/icon_kakao_disabled.svg");
  background-size: 1.375rem;
  background-repeat: no-repeat;
  background-position-x: 0.625rem;
  background-position-y: center;
}
.btn__text--box--xs.kakao:disabled::after, .btn__text--box--xs.kakao.disabled::after {
  display: none;
}
.btn__text--box--xs.excel {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.excel::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_xls.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--xs.excel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--xs.excel:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.excel:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--xs.excel:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.excel:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--xs.excel:not(:disabled):not(.disabled):active, .btn__text--box--xs.excel:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.excel:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.excel:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--xs.excel:disabled, .btn__text--box--xs.excel.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--xs.excel:disabled::after, .btn__text--box--xs.excel.disabled::after {
  display: none;
}
.btn__text--box--xs.pdf {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--xs.pdf::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_pdf.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--xs.pdf::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--xs.pdf:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--xs.pdf:focus::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--xs.pdf:hover {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--xs.pdf:hover::after {
  background-color: rgba(222, 52, 18, 0.12);
}
.btn__text--box--xs.pdf:not(:disabled):not(.disabled):active, .btn__text--box--xs.pdf:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #DE3412;
  background-color: transparent;
  color: #DE3412;
}
.btn__text--box--xs.pdf:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.pdf:not(:disabled):not(.disabled).active::after {
  background-color: rgba(222, 52, 18, 0.25);
}
.btn__text--box--xs.pdf:disabled, .btn__text--box--xs.pdf.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--xs.pdf:disabled::after, .btn__text--box--xs.pdf.disabled::after {
  display: none;
}
.btn__text--box--xs.csv {
  position: relative;
  isolation: isolate;
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.csv::before {
  content: "";
  width: var(--icon-size);
  height: var(--icon-size);
  background-image: url("../../assets/media/icons/fileUploader/icon_document_csv.svg");
  background-size: var(--icon-size);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  flex-shrink: 0;
}
.btn__text--box--xs.csv::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: -1;
}
.btn__text--box--xs.csv:focus {
  box-shadow: inset 0 0 0 0.0625rem #0D0E14;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.csv:focus::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--xs.csv:hover {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.csv:hover::after {
  background-color: rgba(27, 136, 36, 0.12);
}
.btn__text--box--xs.csv:not(:disabled):not(.disabled):active, .btn__text--box--xs.csv:not(:disabled):not(.disabled).active {
  box-shadow: inset 0 0 0 0.0625rem #1B8824;
  background-color: transparent;
  color: #1B8824;
}
.btn__text--box--xs.csv:not(:disabled):not(.disabled):active::after, .btn__text--box--xs.csv:not(:disabled):not(.disabled).active::after {
  background-color: rgba(27, 136, 36, 0.25);
}
.btn__text--box--xs.csv:disabled, .btn__text--box--xs.csv.disabled {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
  background-color: var(--color-gray-010);
  color: var(--color-gray-030);
}
.btn__text--box--xs.csv:disabled::after, .btn__text--box--xs.csv.disabled::after {
  display: none;
}
.btn__list {
  display: inline-flex;
  position: relative;
  vertical-align: middle;
}
.btn__list .btn__ic--l:not(:first-child), .btn__list .btn__text--box--l:not(:first-child), .btn__list .btn__ic--box--l:not(:first-child) {
  margin-left: 0.5rem;
}
.btn__list .btn__ic--m:not(:first-child), .btn__list .btn__text--box--m:not(:first-child), .btn__list .btn__ic--box--m:not(:first-child) {
  margin-left: 0.5rem;
}
.btn__list .btn__ic:not(:first-child), .btn__list .btn__text--box:not(:first-child), .btn__list .btn__ic--box:not(:first-child) {
  margin-left: 0.5rem;
}
.btn__list .btn__ic--s:not(:first-child), .btn__list .btn__text--box--s:not(:first-child), .btn__list .btn__ic--box--s:not(:first-child) {
  margin-left: 0.5rem;
}
.btn__list .btn__ic--xs:not(:first-child), .btn__list .btn__text--box--xs:not(:first-child), .btn__list .btn__ic--box--xs:not(:first-child) {
  margin-left: 0.5rem;
}

.btn__toggle__single,
.btn__toggle__multi {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}
.btn__toggle__single [class*=btn__ic]:not(:first-child),
.btn__toggle__single [class*=btn__text--box]:not(:first-child),
.btn__toggle__single [class*=btn__ic--box--box]:not(:first-child),
.btn__toggle__multi [class*=btn__ic]:not(:first-child),
.btn__toggle__multi [class*=btn__text--box]:not(:first-child),
.btn__toggle__multi [class*=btn__ic--box--box]:not(:first-child) {
  margin-left: -0.0625rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.btn__toggle__single [class*=btn__ic]:not(:last-of-type),
.btn__toggle__single [class*=btn__text--box]:not(:last-of-type),
.btn__toggle__single [class*=btn__ic--box--box]:not(:last-of-type),
.btn__toggle__multi [class*=btn__ic]:not(:last-of-type),
.btn__toggle__multi [class*=btn__text--box]:not(:last-of-type),
.btn__toggle__multi [class*=btn__ic--box--box]:not(:last-of-type) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn__toggle__single.primary .btn__ic--l,
.btn__toggle__single.primary .btn__text--box--l,
.btn__toggle__single.primary .btn__ic--box--l,
.btn__toggle__multi.primary .btn__ic--l,
.btn__toggle__multi.primary .btn__text--box--l,
.btn__toggle__multi.primary .btn__ic--box--l {
  background-color: var(--color-gray-005);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.btn__toggle__single.primary .btn__ic--l [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l [class*=ic-] {
  display: block;
  background: var(--color-gray-090);
  pointer-events: none;
}
.btn__toggle__single.primary .btn__ic--l:focus,
.btn__toggle__single.primary .btn__text--box--l:focus,
.btn__toggle__single.primary .btn__ic--box--l:focus,
.btn__toggle__multi.primary .btn__ic--l:focus,
.btn__toggle__multi.primary .btn__text--box--l:focus,
.btn__toggle__multi.primary .btn__ic--box--l:focus {
  background-color: var(--color-gray-015);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l:focus [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--l:hover,
.btn__toggle__single.primary .btn__text--box--l:hover,
.btn__toggle__single.primary .btn__ic--box--l:hover,
.btn__toggle__multi.primary .btn__ic--l:hover,
.btn__toggle__multi.primary .btn__text--box--l:hover,
.btn__toggle__multi.primary .btn__ic--box--l:hover {
  color: var(--color-gray-090);
  background-color: var(--color-gray-015);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l:hover [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.primary .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--box--l:not(:disabled):not(.disabled).active {
  background-color: var(--color-gray-020);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-020);
}
.btn__toggle__single.primary .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--l:disabled, .btn__toggle__single.primary .btn__ic--l.disabled,
.btn__toggle__single.primary .btn__text--box--l:disabled,
.btn__toggle__single.primary .btn__text--box--l.disabled,
.btn__toggle__single.primary .btn__ic--box--l:disabled,
.btn__toggle__single.primary .btn__ic--box--l.disabled,
.btn__toggle__multi.primary .btn__ic--l:disabled,
.btn__toggle__multi.primary .btn__ic--l.disabled,
.btn__toggle__multi.primary .btn__text--box--l:disabled,
.btn__toggle__multi.primary .btn__text--box--l.disabled,
.btn__toggle__multi.primary .btn__ic--box--l:disabled,
.btn__toggle__multi.primary .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.primary .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.primary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary .btn__ic--l.selected:not(:disabled), .btn__toggle__single.primary .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.primary .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.primary .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.primary .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.primary .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.primary .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.primary .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(.disabled) {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.primary .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--m,
.btn__toggle__single.primary .btn__text--box--m,
.btn__toggle__single.primary .btn__ic--box--m,
.btn__toggle__multi.primary .btn__ic--m,
.btn__toggle__multi.primary .btn__text--box--m,
.btn__toggle__multi.primary .btn__ic--box--m {
  background-color: var(--color-gray-005);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.btn__toggle__single.primary .btn__ic--m [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m [class*=ic-] {
  display: block;
  background: var(--color-gray-090);
  pointer-events: none;
}
.btn__toggle__single.primary .btn__ic--m:focus,
.btn__toggle__single.primary .btn__text--box--m:focus,
.btn__toggle__single.primary .btn__ic--box--m:focus,
.btn__toggle__multi.primary .btn__ic--m:focus,
.btn__toggle__multi.primary .btn__text--box--m:focus,
.btn__toggle__multi.primary .btn__ic--box--m:focus {
  background-color: var(--color-gray-015);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m:focus [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--m:hover,
.btn__toggle__single.primary .btn__text--box--m:hover,
.btn__toggle__single.primary .btn__ic--box--m:hover,
.btn__toggle__multi.primary .btn__ic--m:hover,
.btn__toggle__multi.primary .btn__text--box--m:hover,
.btn__toggle__multi.primary .btn__ic--box--m:hover {
  color: var(--color-gray-090);
  background-color: var(--color-gray-015);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m:hover [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.primary .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--box--m:not(:disabled):not(.disabled).active {
  background-color: var(--color-gray-020);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-020);
}
.btn__toggle__single.primary .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--m:disabled, .btn__toggle__single.primary .btn__ic--m.disabled,
.btn__toggle__single.primary .btn__text--box--m:disabled,
.btn__toggle__single.primary .btn__text--box--m.disabled,
.btn__toggle__single.primary .btn__ic--box--m:disabled,
.btn__toggle__single.primary .btn__ic--box--m.disabled,
.btn__toggle__multi.primary .btn__ic--m:disabled,
.btn__toggle__multi.primary .btn__ic--m.disabled,
.btn__toggle__multi.primary .btn__text--box--m:disabled,
.btn__toggle__multi.primary .btn__text--box--m.disabled,
.btn__toggle__multi.primary .btn__ic--box--m:disabled,
.btn__toggle__multi.primary .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.primary .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.primary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary .btn__ic--m.selected:not(:disabled), .btn__toggle__single.primary .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.primary .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.primary .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.primary .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.primary .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.primary .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.primary .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(.disabled) {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.primary .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic,
.btn__toggle__single.primary .btn__text--box,
.btn__toggle__single.primary .btn__ic--box,
.btn__toggle__multi.primary .btn__ic,
.btn__toggle__multi.primary .btn__text--box,
.btn__toggle__multi.primary .btn__ic--box {
  background-color: var(--color-gray-005);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.btn__toggle__single.primary .btn__ic [class*=ic-],
.btn__toggle__single.primary .btn__text--box [class*=ic-],
.btn__toggle__single.primary .btn__ic--box [class*=ic-],
.btn__toggle__multi.primary .btn__ic [class*=ic-],
.btn__toggle__multi.primary .btn__text--box [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box [class*=ic-] {
  display: block;
  background: var(--color-gray-090);
  pointer-events: none;
}
.btn__toggle__single.primary .btn__ic:focus,
.btn__toggle__single.primary .btn__text--box:focus,
.btn__toggle__single.primary .btn__ic--box:focus,
.btn__toggle__multi.primary .btn__ic:focus,
.btn__toggle__multi.primary .btn__text--box:focus,
.btn__toggle__multi.primary .btn__ic--box:focus {
  background-color: var(--color-gray-015);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic:focus [class*=ic-],
.btn__toggle__single.primary .btn__text--box:focus [class*=ic-],
.btn__toggle__single.primary .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic:focus [class*=ic-],
.btn__toggle__multi.primary .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box:focus [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic:hover,
.btn__toggle__single.primary .btn__text--box:hover,
.btn__toggle__single.primary .btn__ic--box:hover,
.btn__toggle__multi.primary .btn__ic:hover,
.btn__toggle__multi.primary .btn__text--box:hover,
.btn__toggle__multi.primary .btn__ic--box:hover {
  color: var(--color-gray-090);
  background-color: var(--color-gray-015);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic:hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box:hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic:hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box:hover [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.primary .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--box:not(:disabled):not(.disabled).active {
  background-color: var(--color-gray-020);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-020);
}
.btn__toggle__single.primary .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic:disabled, .btn__toggle__single.primary .btn__ic.disabled,
.btn__toggle__single.primary .btn__text--box:disabled,
.btn__toggle__single.primary .btn__text--box.disabled,
.btn__toggle__single.primary .btn__ic--box:disabled,
.btn__toggle__single.primary .btn__ic--box.disabled,
.btn__toggle__multi.primary .btn__ic:disabled,
.btn__toggle__multi.primary .btn__ic.disabled,
.btn__toggle__multi.primary .btn__text--box:disabled,
.btn__toggle__multi.primary .btn__text--box.disabled,
.btn__toggle__multi.primary .btn__ic--box:disabled,
.btn__toggle__multi.primary .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.primary .btn__ic:disabled [class*=ic-], .btn__toggle__single.primary .btn__ic.disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary .btn__ic.selected:not(:disabled), .btn__toggle__single.primary .btn__ic.selected:not(.disabled),
.btn__toggle__single.primary .btn__text--box.selected:not(:disabled),
.btn__toggle__single.primary .btn__text--box.selected:not(.disabled),
.btn__toggle__single.primary .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.primary .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic.selected:not(.disabled),
.btn__toggle__multi.primary .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.primary .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--box.selected:not(.disabled) {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.primary .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--box.selected:not(.disabled):hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--s,
.btn__toggle__single.primary .btn__text--box--s,
.btn__toggle__single.primary .btn__ic--box--s,
.btn__toggle__multi.primary .btn__ic--s,
.btn__toggle__multi.primary .btn__text--box--s,
.btn__toggle__multi.primary .btn__ic--box--s {
  background-color: var(--color-gray-005);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.btn__toggle__single.primary .btn__ic--s [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s [class*=ic-] {
  display: block;
  background: var(--color-gray-090);
  pointer-events: none;
}
.btn__toggle__single.primary .btn__ic--s:focus,
.btn__toggle__single.primary .btn__text--box--s:focus,
.btn__toggle__single.primary .btn__ic--box--s:focus,
.btn__toggle__multi.primary .btn__ic--s:focus,
.btn__toggle__multi.primary .btn__text--box--s:focus,
.btn__toggle__multi.primary .btn__ic--box--s:focus {
  background-color: var(--color-gray-015);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s:focus [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--s:hover,
.btn__toggle__single.primary .btn__text--box--s:hover,
.btn__toggle__single.primary .btn__ic--box--s:hover,
.btn__toggle__multi.primary .btn__ic--s:hover,
.btn__toggle__multi.primary .btn__text--box--s:hover,
.btn__toggle__multi.primary .btn__ic--box--s:hover {
  color: var(--color-gray-090);
  background-color: var(--color-gray-015);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s:hover [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.primary .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--box--s:not(:disabled):not(.disabled).active {
  background-color: var(--color-gray-020);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-020);
}
.btn__toggle__single.primary .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--s:disabled, .btn__toggle__single.primary .btn__ic--s.disabled,
.btn__toggle__single.primary .btn__text--box--s:disabled,
.btn__toggle__single.primary .btn__text--box--s.disabled,
.btn__toggle__single.primary .btn__ic--box--s:disabled,
.btn__toggle__single.primary .btn__ic--box--s.disabled,
.btn__toggle__multi.primary .btn__ic--s:disabled,
.btn__toggle__multi.primary .btn__ic--s.disabled,
.btn__toggle__multi.primary .btn__text--box--s:disabled,
.btn__toggle__multi.primary .btn__text--box--s.disabled,
.btn__toggle__multi.primary .btn__ic--box--s:disabled,
.btn__toggle__multi.primary .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.primary .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.primary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary .btn__ic--s.selected:not(:disabled), .btn__toggle__single.primary .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.primary .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.primary .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.primary .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.primary .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.primary .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.primary .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(.disabled) {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.primary .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--xs,
.btn__toggle__single.primary .btn__text--box--xs,
.btn__toggle__single.primary .btn__ic--box--xs,
.btn__toggle__multi.primary .btn__ic--xs,
.btn__toggle__multi.primary .btn__text--box--xs,
.btn__toggle__multi.primary .btn__ic--box--xs {
  background-color: var(--color-gray-005);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.btn__toggle__single.primary .btn__ic--xs [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs [class*=ic-] {
  display: block;
  background: var(--color-gray-090);
  pointer-events: none;
}
.btn__toggle__single.primary .btn__ic--xs:focus,
.btn__toggle__single.primary .btn__text--box--xs:focus,
.btn__toggle__single.primary .btn__ic--box--xs:focus,
.btn__toggle__multi.primary .btn__ic--xs:focus,
.btn__toggle__multi.primary .btn__text--box--xs:focus,
.btn__toggle__multi.primary .btn__ic--box--xs:focus {
  background-color: var(--color-gray-015);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--xs:hover,
.btn__toggle__single.primary .btn__text--box--xs:hover,
.btn__toggle__single.primary .btn__ic--box--xs:hover,
.btn__toggle__multi.primary .btn__ic--xs:hover,
.btn__toggle__multi.primary .btn__text--box--xs:hover,
.btn__toggle__multi.primary .btn__ic--box--xs:hover {
  color: var(--color-gray-090);
  background-color: var(--color-gray-015);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.primary .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  background-color: var(--color-gray-020);
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-020);
}
.btn__toggle__single.primary .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-090);
}
.btn__toggle__single.primary .btn__ic--xs:disabled, .btn__toggle__single.primary .btn__ic--xs.disabled,
.btn__toggle__single.primary .btn__text--box--xs:disabled,
.btn__toggle__single.primary .btn__text--box--xs.disabled,
.btn__toggle__single.primary .btn__ic--box--xs:disabled,
.btn__toggle__single.primary .btn__ic--box--xs.disabled,
.btn__toggle__multi.primary .btn__ic--xs:disabled,
.btn__toggle__multi.primary .btn__ic--xs.disabled,
.btn__toggle__multi.primary .btn__text--box--xs:disabled,
.btn__toggle__multi.primary .btn__text--box--xs.disabled,
.btn__toggle__multi.primary .btn__ic--box--xs:disabled,
.btn__toggle__multi.primary .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.primary .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.primary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.primary .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.primary .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.primary .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.primary .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.primary .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--btn-primary-font);
  background-color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-icon);
}
.btn__toggle__single.secondary .btn__ic--l [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--l [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--l [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--l [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--l [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.secondary .btn__ic--l:disabled, .btn__toggle__single.secondary .btn__ic--l.disabled,
.btn__toggle__single.secondary .btn__text--box--l:disabled,
.btn__toggle__single.secondary .btn__text--box--l.disabled,
.btn__toggle__single.secondary .btn__ic--box--l:disabled,
.btn__toggle__single.secondary .btn__ic--box--l.disabled,
.btn__toggle__multi.secondary .btn__ic--l:disabled,
.btn__toggle__multi.secondary .btn__ic--l.disabled,
.btn__toggle__multi.secondary .btn__text--box--l:disabled,
.btn__toggle__multi.secondary .btn__text--box--l.disabled,
.btn__toggle__multi.secondary .btn__ic--box--l:disabled,
.btn__toggle__multi.secondary .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.secondary .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.secondary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary .btn__ic--m [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--m [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--m [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--m [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--m [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.secondary .btn__ic--m:disabled, .btn__toggle__single.secondary .btn__ic--m.disabled,
.btn__toggle__single.secondary .btn__text--box--m:disabled,
.btn__toggle__single.secondary .btn__text--box--m.disabled,
.btn__toggle__single.secondary .btn__ic--box--m:disabled,
.btn__toggle__single.secondary .btn__ic--box--m.disabled,
.btn__toggle__multi.secondary .btn__ic--m:disabled,
.btn__toggle__multi.secondary .btn__ic--m.disabled,
.btn__toggle__multi.secondary .btn__text--box--m:disabled,
.btn__toggle__multi.secondary .btn__text--box--m.disabled,
.btn__toggle__multi.secondary .btn__ic--box--m:disabled,
.btn__toggle__multi.secondary .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.secondary .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.secondary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary .btn__ic [class*=ic-],
.btn__toggle__single.secondary .btn__text--box [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box [class*=ic-],
.btn__toggle__multi.secondary .btn__ic [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.secondary .btn__ic:disabled, .btn__toggle__single.secondary .btn__ic.disabled,
.btn__toggle__single.secondary .btn__text--box:disabled,
.btn__toggle__single.secondary .btn__text--box.disabled,
.btn__toggle__single.secondary .btn__ic--box:disabled,
.btn__toggle__single.secondary .btn__ic--box.disabled,
.btn__toggle__multi.secondary .btn__ic:disabled,
.btn__toggle__multi.secondary .btn__ic.disabled,
.btn__toggle__multi.secondary .btn__text--box:disabled,
.btn__toggle__multi.secondary .btn__text--box.disabled,
.btn__toggle__multi.secondary .btn__ic--box:disabled,
.btn__toggle__multi.secondary .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.secondary .btn__ic:disabled [class*=ic-], .btn__toggle__single.secondary .btn__ic.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary .btn__ic--s [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--s [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--s [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--s [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--s [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.secondary .btn__ic--s:disabled, .btn__toggle__single.secondary .btn__ic--s.disabled,
.btn__toggle__single.secondary .btn__text--box--s:disabled,
.btn__toggle__single.secondary .btn__text--box--s.disabled,
.btn__toggle__single.secondary .btn__ic--box--s:disabled,
.btn__toggle__single.secondary .btn__ic--box--s.disabled,
.btn__toggle__multi.secondary .btn__ic--s:disabled,
.btn__toggle__multi.secondary .btn__ic--s.disabled,
.btn__toggle__multi.secondary .btn__text--box--s:disabled,
.btn__toggle__multi.secondary .btn__text--box--s.disabled,
.btn__toggle__multi.secondary .btn__ic--box--s:disabled,
.btn__toggle__multi.secondary .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.secondary .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.secondary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary .btn__ic--xs [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--xs [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--xs [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--xs [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.secondary .btn__ic--xs:disabled, .btn__toggle__single.secondary .btn__ic--xs.disabled,
.btn__toggle__single.secondary .btn__text--box--xs:disabled,
.btn__toggle__single.secondary .btn__text--box--xs.disabled,
.btn__toggle__single.secondary .btn__ic--box--xs:disabled,
.btn__toggle__single.secondary .btn__ic--box--xs.disabled,
.btn__toggle__multi.secondary .btn__ic--xs:disabled,
.btn__toggle__multi.secondary .btn__ic--xs.disabled,
.btn__toggle__multi.secondary .btn__text--box--xs:disabled,
.btn__toggle__multi.secondary .btn__text--box--xs.disabled,
.btn__toggle__multi.secondary .btn__ic--box--xs:disabled,
.btn__toggle__multi.secondary .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.secondary .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.secondary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.secondary .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary .btn__ic--l [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--l [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--l [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--l [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--l [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.tertiary .btn__ic--l:disabled, .btn__toggle__single.tertiary .btn__ic--l.disabled,
.btn__toggle__single.tertiary .btn__text--box--l:disabled,
.btn__toggle__single.tertiary .btn__text--box--l.disabled,
.btn__toggle__single.tertiary .btn__ic--box--l:disabled,
.btn__toggle__single.tertiary .btn__ic--box--l.disabled,
.btn__toggle__multi.tertiary .btn__ic--l:disabled,
.btn__toggle__multi.tertiary .btn__ic--l.disabled,
.btn__toggle__multi.tertiary .btn__text--box--l:disabled,
.btn__toggle__multi.tertiary .btn__text--box--l.disabled,
.btn__toggle__multi.tertiary .btn__ic--box--l:disabled,
.btn__toggle__multi.tertiary .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.tertiary .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.tertiary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary .btn__ic--m [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--m [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--m [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--m [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--m [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.tertiary .btn__ic--m:disabled, .btn__toggle__single.tertiary .btn__ic--m.disabled,
.btn__toggle__single.tertiary .btn__text--box--m:disabled,
.btn__toggle__single.tertiary .btn__text--box--m.disabled,
.btn__toggle__single.tertiary .btn__ic--box--m:disabled,
.btn__toggle__single.tertiary .btn__ic--box--m.disabled,
.btn__toggle__multi.tertiary .btn__ic--m:disabled,
.btn__toggle__multi.tertiary .btn__ic--m.disabled,
.btn__toggle__multi.tertiary .btn__text--box--m:disabled,
.btn__toggle__multi.tertiary .btn__text--box--m.disabled,
.btn__toggle__multi.tertiary .btn__ic--box--m:disabled,
.btn__toggle__multi.tertiary .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.tertiary .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.tertiary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary .btn__ic [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.tertiary .btn__ic:disabled, .btn__toggle__single.tertiary .btn__ic.disabled,
.btn__toggle__single.tertiary .btn__text--box:disabled,
.btn__toggle__single.tertiary .btn__text--box.disabled,
.btn__toggle__single.tertiary .btn__ic--box:disabled,
.btn__toggle__single.tertiary .btn__ic--box.disabled,
.btn__toggle__multi.tertiary .btn__ic:disabled,
.btn__toggle__multi.tertiary .btn__ic.disabled,
.btn__toggle__multi.tertiary .btn__text--box:disabled,
.btn__toggle__multi.tertiary .btn__text--box.disabled,
.btn__toggle__multi.tertiary .btn__ic--box:disabled,
.btn__toggle__multi.tertiary .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.tertiary .btn__ic:disabled [class*=ic-], .btn__toggle__single.tertiary .btn__ic.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary .btn__ic--s [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--s [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--s [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--s [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--s [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.tertiary .btn__ic--s:disabled, .btn__toggle__single.tertiary .btn__ic--s.disabled,
.btn__toggle__single.tertiary .btn__text--box--s:disabled,
.btn__toggle__single.tertiary .btn__text--box--s.disabled,
.btn__toggle__single.tertiary .btn__ic--box--s:disabled,
.btn__toggle__single.tertiary .btn__ic--box--s.disabled,
.btn__toggle__multi.tertiary .btn__ic--s:disabled,
.btn__toggle__multi.tertiary .btn__ic--s.disabled,
.btn__toggle__multi.tertiary .btn__text--box--s:disabled,
.btn__toggle__multi.tertiary .btn__text--box--s.disabled,
.btn__toggle__multi.tertiary .btn__ic--box--s:disabled,
.btn__toggle__multi.tertiary .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.tertiary .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.tertiary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary .btn__ic--xs [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--xs [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--xs [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--xs [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.tertiary .btn__ic--xs:disabled, .btn__toggle__single.tertiary .btn__ic--xs.disabled,
.btn__toggle__single.tertiary .btn__text--box--xs:disabled,
.btn__toggle__single.tertiary .btn__text--box--xs.disabled,
.btn__toggle__single.tertiary .btn__ic--box--xs:disabled,
.btn__toggle__single.tertiary .btn__ic--box--xs.disabled,
.btn__toggle__multi.tertiary .btn__ic--xs:disabled,
.btn__toggle__multi.tertiary .btn__ic--xs.disabled,
.btn__toggle__multi.tertiary .btn__text--box--xs:disabled,
.btn__toggle__multi.tertiary .btn__text--box--xs.disabled,
.btn__toggle__multi.tertiary .btn__ic--box--xs:disabled,
.btn__toggle__multi.tertiary .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.tertiary .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.tertiary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.tertiary .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check .btn__ic--l [class*=ic-],
.btn__toggle__single.check .btn__text--box--l [class*=ic-],
.btn__toggle__single.check .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.check .btn__ic--l [class*=ic-],
.btn__toggle__multi.check .btn__text--box--l [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--l [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.check .btn__ic--l:disabled, .btn__toggle__single.check .btn__ic--l.disabled,
.btn__toggle__single.check .btn__text--box--l:disabled,
.btn__toggle__single.check .btn__text--box--l.disabled,
.btn__toggle__single.check .btn__ic--box--l:disabled,
.btn__toggle__single.check .btn__ic--box--l.disabled,
.btn__toggle__multi.check .btn__ic--l:disabled,
.btn__toggle__multi.check .btn__ic--l.disabled,
.btn__toggle__multi.check .btn__text--box--l:disabled,
.btn__toggle__multi.check .btn__text--box--l.disabled,
.btn__toggle__multi.check .btn__ic--box--l:disabled,
.btn__toggle__multi.check .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.check .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.check .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check .btn__ic--m [class*=ic-],
.btn__toggle__single.check .btn__text--box--m [class*=ic-],
.btn__toggle__single.check .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.check .btn__ic--m [class*=ic-],
.btn__toggle__multi.check .btn__text--box--m [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--m [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.check .btn__ic--m:disabled, .btn__toggle__single.check .btn__ic--m.disabled,
.btn__toggle__single.check .btn__text--box--m:disabled,
.btn__toggle__single.check .btn__text--box--m.disabled,
.btn__toggle__single.check .btn__ic--box--m:disabled,
.btn__toggle__single.check .btn__ic--box--m.disabled,
.btn__toggle__multi.check .btn__ic--m:disabled,
.btn__toggle__multi.check .btn__ic--m.disabled,
.btn__toggle__multi.check .btn__text--box--m:disabled,
.btn__toggle__multi.check .btn__text--box--m.disabled,
.btn__toggle__multi.check .btn__ic--box--m:disabled,
.btn__toggle__multi.check .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.check .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.check .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check .btn__ic [class*=ic-],
.btn__toggle__single.check .btn__text--box [class*=ic-],
.btn__toggle__single.check .btn__ic--box [class*=ic-],
.btn__toggle__multi.check .btn__ic [class*=ic-],
.btn__toggle__multi.check .btn__text--box [class*=ic-],
.btn__toggle__multi.check .btn__ic--box [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.check .btn__ic:disabled, .btn__toggle__single.check .btn__ic.disabled,
.btn__toggle__single.check .btn__text--box:disabled,
.btn__toggle__single.check .btn__text--box.disabled,
.btn__toggle__single.check .btn__ic--box:disabled,
.btn__toggle__single.check .btn__ic--box.disabled,
.btn__toggle__multi.check .btn__ic:disabled,
.btn__toggle__multi.check .btn__ic.disabled,
.btn__toggle__multi.check .btn__text--box:disabled,
.btn__toggle__multi.check .btn__text--box.disabled,
.btn__toggle__multi.check .btn__ic--box:disabled,
.btn__toggle__multi.check .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.check .btn__ic:disabled [class*=ic-], .btn__toggle__single.check .btn__ic.disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check .btn__ic--s [class*=ic-],
.btn__toggle__single.check .btn__text--box--s [class*=ic-],
.btn__toggle__single.check .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.check .btn__ic--s [class*=ic-],
.btn__toggle__multi.check .btn__text--box--s [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--s [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.check .btn__ic--s:disabled, .btn__toggle__single.check .btn__ic--s.disabled,
.btn__toggle__single.check .btn__text--box--s:disabled,
.btn__toggle__single.check .btn__text--box--s.disabled,
.btn__toggle__single.check .btn__ic--box--s:disabled,
.btn__toggle__single.check .btn__ic--box--s.disabled,
.btn__toggle__multi.check .btn__ic--s:disabled,
.btn__toggle__multi.check .btn__ic--s.disabled,
.btn__toggle__multi.check .btn__text--box--s:disabled,
.btn__toggle__multi.check .btn__text--box--s.disabled,
.btn__toggle__multi.check .btn__ic--box--s:disabled,
.btn__toggle__multi.check .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.check .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.check .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check .btn__ic--xs [class*=ic-],
.btn__toggle__single.check .btn__text--box--xs [class*=ic-],
.btn__toggle__single.check .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.check .btn__ic--xs [class*=ic-],
.btn__toggle__multi.check .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--xs [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.check .btn__ic--xs:disabled, .btn__toggle__single.check .btn__ic--xs.disabled,
.btn__toggle__single.check .btn__text--box--xs:disabled,
.btn__toggle__single.check .btn__text--box--xs.disabled,
.btn__toggle__single.check .btn__ic--box--xs:disabled,
.btn__toggle__single.check .btn__ic--box--xs.disabled,
.btn__toggle__multi.check .btn__ic--xs:disabled,
.btn__toggle__multi.check .btn__ic--xs.disabled,
.btn__toggle__multi.check .btn__text--box--xs:disabled,
.btn__toggle__multi.check .btn__text--box--xs.disabled,
.btn__toggle__multi.check .btn__ic--box--xs:disabled,
.btn__toggle__multi.check .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.check .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.check .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.check .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.check .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.check .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.check .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger .btn__ic--l [class*=ic-],
.btn__toggle__single.danger .btn__text--box--l [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.danger .btn__ic--l [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--l [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--l [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.danger .btn__ic--l:disabled, .btn__toggle__single.danger .btn__ic--l.disabled,
.btn__toggle__single.danger .btn__text--box--l:disabled,
.btn__toggle__single.danger .btn__text--box--l.disabled,
.btn__toggle__single.danger .btn__ic--box--l:disabled,
.btn__toggle__single.danger .btn__ic--box--l.disabled,
.btn__toggle__multi.danger .btn__ic--l:disabled,
.btn__toggle__multi.danger .btn__ic--l.disabled,
.btn__toggle__multi.danger .btn__text--box--l:disabled,
.btn__toggle__multi.danger .btn__text--box--l.disabled,
.btn__toggle__multi.danger .btn__ic--box--l:disabled,
.btn__toggle__multi.danger .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.danger .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.danger .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger .btn__ic--m [class*=ic-],
.btn__toggle__single.danger .btn__text--box--m [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.danger .btn__ic--m [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--m [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--m [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.danger .btn__ic--m:disabled, .btn__toggle__single.danger .btn__ic--m.disabled,
.btn__toggle__single.danger .btn__text--box--m:disabled,
.btn__toggle__single.danger .btn__text--box--m.disabled,
.btn__toggle__single.danger .btn__ic--box--m:disabled,
.btn__toggle__single.danger .btn__ic--box--m.disabled,
.btn__toggle__multi.danger .btn__ic--m:disabled,
.btn__toggle__multi.danger .btn__ic--m.disabled,
.btn__toggle__multi.danger .btn__text--box--m:disabled,
.btn__toggle__multi.danger .btn__text--box--m.disabled,
.btn__toggle__multi.danger .btn__ic--box--m:disabled,
.btn__toggle__multi.danger .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.danger .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.danger .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger .btn__ic [class*=ic-],
.btn__toggle__single.danger .btn__text--box [class*=ic-],
.btn__toggle__single.danger .btn__ic--box [class*=ic-],
.btn__toggle__multi.danger .btn__ic [class*=ic-],
.btn__toggle__multi.danger .btn__text--box [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.danger .btn__ic:disabled, .btn__toggle__single.danger .btn__ic.disabled,
.btn__toggle__single.danger .btn__text--box:disabled,
.btn__toggle__single.danger .btn__text--box.disabled,
.btn__toggle__single.danger .btn__ic--box:disabled,
.btn__toggle__single.danger .btn__ic--box.disabled,
.btn__toggle__multi.danger .btn__ic:disabled,
.btn__toggle__multi.danger .btn__ic.disabled,
.btn__toggle__multi.danger .btn__text--box:disabled,
.btn__toggle__multi.danger .btn__text--box.disabled,
.btn__toggle__multi.danger .btn__ic--box:disabled,
.btn__toggle__multi.danger .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.danger .btn__ic:disabled [class*=ic-], .btn__toggle__single.danger .btn__ic.disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger .btn__ic--s [class*=ic-],
.btn__toggle__single.danger .btn__text--box--s [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.danger .btn__ic--s [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--s [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--s [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.danger .btn__ic--s:disabled, .btn__toggle__single.danger .btn__ic--s.disabled,
.btn__toggle__single.danger .btn__text--box--s:disabled,
.btn__toggle__single.danger .btn__text--box--s.disabled,
.btn__toggle__single.danger .btn__ic--box--s:disabled,
.btn__toggle__single.danger .btn__ic--box--s.disabled,
.btn__toggle__multi.danger .btn__ic--s:disabled,
.btn__toggle__multi.danger .btn__ic--s.disabled,
.btn__toggle__multi.danger .btn__text--box--s:disabled,
.btn__toggle__multi.danger .btn__text--box--s.disabled,
.btn__toggle__multi.danger .btn__ic--box--s:disabled,
.btn__toggle__multi.danger .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.danger .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.danger .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger .btn__ic--xs [class*=ic-],
.btn__toggle__single.danger .btn__text--box--xs [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.danger .btn__ic--xs [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--xs [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.danger .btn__ic--xs:disabled, .btn__toggle__single.danger .btn__ic--xs.disabled,
.btn__toggle__single.danger .btn__text--box--xs:disabled,
.btn__toggle__single.danger .btn__text--box--xs.disabled,
.btn__toggle__single.danger .btn__ic--box--xs:disabled,
.btn__toggle__single.danger .btn__ic--box--xs.disabled,
.btn__toggle__multi.danger .btn__ic--xs:disabled,
.btn__toggle__multi.danger .btn__ic--xs.disabled,
.btn__toggle__multi.danger .btn__text--box--xs:disabled,
.btn__toggle__multi.danger .btn__text--box--xs.disabled,
.btn__toggle__multi.danger .btn__ic--box--xs:disabled,
.btn__toggle__multi.danger .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.danger .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.danger .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.danger .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.danger .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.danger .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.error .btn__ic--l [class*=ic-],
.btn__toggle__single.error .btn__text--box--l [class*=ic-],
.btn__toggle__single.error .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.error .btn__ic--l [class*=ic-],
.btn__toggle__multi.error .btn__text--box--l [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--l [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.error .btn__ic--l:disabled, .btn__toggle__single.error .btn__ic--l.disabled,
.btn__toggle__single.error .btn__text--box--l:disabled,
.btn__toggle__single.error .btn__text--box--l.disabled,
.btn__toggle__single.error .btn__ic--box--l:disabled,
.btn__toggle__single.error .btn__ic--box--l.disabled,
.btn__toggle__multi.error .btn__ic--l:disabled,
.btn__toggle__multi.error .btn__ic--l.disabled,
.btn__toggle__multi.error .btn__text--box--l:disabled,
.btn__toggle__multi.error .btn__text--box--l.disabled,
.btn__toggle__multi.error .btn__ic--box--l:disabled,
.btn__toggle__multi.error .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.error .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.error .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.error .btn__ic--m [class*=ic-],
.btn__toggle__single.error .btn__text--box--m [class*=ic-],
.btn__toggle__single.error .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.error .btn__ic--m [class*=ic-],
.btn__toggle__multi.error .btn__text--box--m [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--m [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.error .btn__ic--m:disabled, .btn__toggle__single.error .btn__ic--m.disabled,
.btn__toggle__single.error .btn__text--box--m:disabled,
.btn__toggle__single.error .btn__text--box--m.disabled,
.btn__toggle__single.error .btn__ic--box--m:disabled,
.btn__toggle__single.error .btn__ic--box--m.disabled,
.btn__toggle__multi.error .btn__ic--m:disabled,
.btn__toggle__multi.error .btn__ic--m.disabled,
.btn__toggle__multi.error .btn__text--box--m:disabled,
.btn__toggle__multi.error .btn__text--box--m.disabled,
.btn__toggle__multi.error .btn__ic--box--m:disabled,
.btn__toggle__multi.error .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.error .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.error .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.error .btn__ic [class*=ic-],
.btn__toggle__single.error .btn__text--box [class*=ic-],
.btn__toggle__single.error .btn__ic--box [class*=ic-],
.btn__toggle__multi.error .btn__ic [class*=ic-],
.btn__toggle__multi.error .btn__text--box [class*=ic-],
.btn__toggle__multi.error .btn__ic--box [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.error .btn__ic:disabled, .btn__toggle__single.error .btn__ic.disabled,
.btn__toggle__single.error .btn__text--box:disabled,
.btn__toggle__single.error .btn__text--box.disabled,
.btn__toggle__single.error .btn__ic--box:disabled,
.btn__toggle__single.error .btn__ic--box.disabled,
.btn__toggle__multi.error .btn__ic:disabled,
.btn__toggle__multi.error .btn__ic.disabled,
.btn__toggle__multi.error .btn__text--box:disabled,
.btn__toggle__multi.error .btn__text--box.disabled,
.btn__toggle__multi.error .btn__ic--box:disabled,
.btn__toggle__multi.error .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.error .btn__ic:disabled [class*=ic-], .btn__toggle__single.error .btn__ic.disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.error .btn__ic--s [class*=ic-],
.btn__toggle__single.error .btn__text--box--s [class*=ic-],
.btn__toggle__single.error .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.error .btn__ic--s [class*=ic-],
.btn__toggle__multi.error .btn__text--box--s [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--s [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.error .btn__ic--s:disabled, .btn__toggle__single.error .btn__ic--s.disabled,
.btn__toggle__single.error .btn__text--box--s:disabled,
.btn__toggle__single.error .btn__text--box--s.disabled,
.btn__toggle__single.error .btn__ic--box--s:disabled,
.btn__toggle__single.error .btn__ic--box--s.disabled,
.btn__toggle__multi.error .btn__ic--s:disabled,
.btn__toggle__multi.error .btn__ic--s.disabled,
.btn__toggle__multi.error .btn__text--box--s:disabled,
.btn__toggle__multi.error .btn__text--box--s.disabled,
.btn__toggle__multi.error .btn__ic--box--s:disabled,
.btn__toggle__multi.error .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.error .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.error .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.error .btn__ic--xs [class*=ic-],
.btn__toggle__single.error .btn__text--box--xs [class*=ic-],
.btn__toggle__single.error .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.error .btn__ic--xs [class*=ic-],
.btn__toggle__multi.error .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--xs [class*=ic-] {
  display: block;
  pointer-events: none;
}
.btn__toggle__single.error .btn__ic--xs:disabled, .btn__toggle__single.error .btn__ic--xs.disabled,
.btn__toggle__single.error .btn__text--box--xs:disabled,
.btn__toggle__single.error .btn__text--box--xs.disabled,
.btn__toggle__single.error .btn__ic--box--xs:disabled,
.btn__toggle__single.error .btn__ic--box--xs.disabled,
.btn__toggle__multi.error .btn__ic--xs:disabled,
.btn__toggle__multi.error .btn__ic--xs.disabled,
.btn__toggle__multi.error .btn__text--box--xs:disabled,
.btn__toggle__multi.error .btn__text--box--xs.disabled,
.btn__toggle__multi.error .btn__ic--box--xs:disabled,
.btn__toggle__multi.error .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-010);
}
.btn__toggle__single.error .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.error .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.error .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.error .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.error .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.error .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic--l,
.btn__toggle__single.primary-line .btn__text--box--l,
.btn__toggle__single.primary-line .btn__ic--box--l,
.btn__toggle__multi.primary-line .btn__ic--l,
.btn__toggle__multi.primary-line .btn__text--box--l,
.btn__toggle__multi.primary-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--l > *,
.btn__toggle__single.primary-line .btn__text--box--l > *,
.btn__toggle__single.primary-line .btn__ic--box--l > *,
.btn__toggle__multi.primary-line .btn__ic--l > *,
.btn__toggle__multi.primary-line .btn__text--box--l > *,
.btn__toggle__multi.primary-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--l::after,
.btn__toggle__single.primary-line .btn__text--box--l::after,
.btn__toggle__single.primary-line .btn__ic--box--l::after,
.btn__toggle__multi.primary-line .btn__ic--l::after,
.btn__toggle__multi.primary-line .btn__text--box--l::after,
.btn__toggle__multi.primary-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.primary-line .btn__ic--l:focus,
.btn__toggle__single.primary-line .btn__text--box--l:focus,
.btn__toggle__single.primary-line .btn__ic--box--l:focus,
.btn__toggle__multi.primary-line .btn__ic--l:focus,
.btn__toggle__multi.primary-line .btn__text--box--l:focus,
.btn__toggle__multi.primary-line .btn__ic--box--l:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l:focus::after,
.btn__toggle__single.primary-line .btn__text--box--l:focus::after,
.btn__toggle__single.primary-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.primary-line .btn__ic--l:focus::after,
.btn__toggle__multi.primary-line .btn__text--box--l:focus::after,
.btn__toggle__multi.primary-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--l:hover,
.btn__toggle__single.primary-line .btn__text--box--l:hover,
.btn__toggle__single.primary-line .btn__ic--box--l:hover,
.btn__toggle__multi.primary-line .btn__ic--l:hover,
.btn__toggle__multi.primary-line .btn__text--box--l:hover,
.btn__toggle__multi.primary-line .btn__ic--box--l:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l:hover::after,
.btn__toggle__single.primary-line .btn__text--box--l:hover::after,
.btn__toggle__single.primary-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.primary-line .btn__ic--l:hover::after,
.btn__toggle__multi.primary-line .btn__text--box--l:hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.primary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--l:disabled, .btn__toggle__single.primary-line .btn__ic--l.disabled,
.btn__toggle__single.primary-line .btn__text--box--l:disabled,
.btn__toggle__single.primary-line .btn__text--box--l.disabled,
.btn__toggle__single.primary-line .btn__ic--box--l:disabled,
.btn__toggle__single.primary-line .btn__ic--box--l.disabled,
.btn__toggle__multi.primary-line .btn__ic--l:disabled,
.btn__toggle__multi.primary-line .btn__ic--l.disabled,
.btn__toggle__multi.primary-line .btn__text--box--l:disabled,
.btn__toggle__multi.primary-line .btn__text--box--l.disabled,
.btn__toggle__multi.primary-line .btn__ic--box--l:disabled,
.btn__toggle__multi.primary-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.primary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic--l:disabled::after, .btn__toggle__single.primary-line .btn__ic--l.disabled::after,
.btn__toggle__single.primary-line .btn__text--box--l:disabled::after,
.btn__toggle__single.primary-line .btn__text--box--l.disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--l:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--l.disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.primary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--l span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.primary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.primary-line .btn__ic--m,
.btn__toggle__single.primary-line .btn__text--box--m,
.btn__toggle__single.primary-line .btn__ic--box--m,
.btn__toggle__multi.primary-line .btn__ic--m,
.btn__toggle__multi.primary-line .btn__text--box--m,
.btn__toggle__multi.primary-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--m > *,
.btn__toggle__single.primary-line .btn__text--box--m > *,
.btn__toggle__single.primary-line .btn__ic--box--m > *,
.btn__toggle__multi.primary-line .btn__ic--m > *,
.btn__toggle__multi.primary-line .btn__text--box--m > *,
.btn__toggle__multi.primary-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--m::after,
.btn__toggle__single.primary-line .btn__text--box--m::after,
.btn__toggle__single.primary-line .btn__ic--box--m::after,
.btn__toggle__multi.primary-line .btn__ic--m::after,
.btn__toggle__multi.primary-line .btn__text--box--m::after,
.btn__toggle__multi.primary-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.primary-line .btn__ic--m:focus,
.btn__toggle__single.primary-line .btn__text--box--m:focus,
.btn__toggle__single.primary-line .btn__ic--box--m:focus,
.btn__toggle__multi.primary-line .btn__ic--m:focus,
.btn__toggle__multi.primary-line .btn__text--box--m:focus,
.btn__toggle__multi.primary-line .btn__ic--box--m:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m:focus::after,
.btn__toggle__single.primary-line .btn__text--box--m:focus::after,
.btn__toggle__single.primary-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.primary-line .btn__ic--m:focus::after,
.btn__toggle__multi.primary-line .btn__text--box--m:focus::after,
.btn__toggle__multi.primary-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--m:hover,
.btn__toggle__single.primary-line .btn__text--box--m:hover,
.btn__toggle__single.primary-line .btn__ic--box--m:hover,
.btn__toggle__multi.primary-line .btn__ic--m:hover,
.btn__toggle__multi.primary-line .btn__text--box--m:hover,
.btn__toggle__multi.primary-line .btn__ic--box--m:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m:hover::after,
.btn__toggle__single.primary-line .btn__text--box--m:hover::after,
.btn__toggle__single.primary-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.primary-line .btn__ic--m:hover::after,
.btn__toggle__multi.primary-line .btn__text--box--m:hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.primary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--m:disabled, .btn__toggle__single.primary-line .btn__ic--m.disabled,
.btn__toggle__single.primary-line .btn__text--box--m:disabled,
.btn__toggle__single.primary-line .btn__text--box--m.disabled,
.btn__toggle__single.primary-line .btn__ic--box--m:disabled,
.btn__toggle__single.primary-line .btn__ic--box--m.disabled,
.btn__toggle__multi.primary-line .btn__ic--m:disabled,
.btn__toggle__multi.primary-line .btn__ic--m.disabled,
.btn__toggle__multi.primary-line .btn__text--box--m:disabled,
.btn__toggle__multi.primary-line .btn__text--box--m.disabled,
.btn__toggle__multi.primary-line .btn__ic--box--m:disabled,
.btn__toggle__multi.primary-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.primary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic--m:disabled::after, .btn__toggle__single.primary-line .btn__ic--m.disabled::after,
.btn__toggle__single.primary-line .btn__text--box--m:disabled::after,
.btn__toggle__single.primary-line .btn__text--box--m.disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--m:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--m.disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.primary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--m span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.primary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.primary-line .btn__ic,
.btn__toggle__single.primary-line .btn__text--box,
.btn__toggle__single.primary-line .btn__ic--box,
.btn__toggle__multi.primary-line .btn__ic,
.btn__toggle__multi.primary-line .btn__text--box,
.btn__toggle__multi.primary-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic > *,
.btn__toggle__single.primary-line .btn__text--box > *,
.btn__toggle__single.primary-line .btn__ic--box > *,
.btn__toggle__multi.primary-line .btn__ic > *,
.btn__toggle__multi.primary-line .btn__text--box > *,
.btn__toggle__multi.primary-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic::after,
.btn__toggle__single.primary-line .btn__text--box::after,
.btn__toggle__single.primary-line .btn__ic--box::after,
.btn__toggle__multi.primary-line .btn__ic::after,
.btn__toggle__multi.primary-line .btn__text--box::after,
.btn__toggle__multi.primary-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.primary-line .btn__ic:focus,
.btn__toggle__single.primary-line .btn__text--box:focus,
.btn__toggle__single.primary-line .btn__ic--box:focus,
.btn__toggle__multi.primary-line .btn__ic:focus,
.btn__toggle__multi.primary-line .btn__text--box:focus,
.btn__toggle__multi.primary-line .btn__ic--box:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic:focus::after,
.btn__toggle__single.primary-line .btn__text--box:focus::after,
.btn__toggle__single.primary-line .btn__ic--box:focus::after,
.btn__toggle__multi.primary-line .btn__ic:focus::after,
.btn__toggle__multi.primary-line .btn__text--box:focus::after,
.btn__toggle__multi.primary-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic:hover,
.btn__toggle__single.primary-line .btn__text--box:hover,
.btn__toggle__single.primary-line .btn__ic--box:hover,
.btn__toggle__multi.primary-line .btn__ic:hover,
.btn__toggle__multi.primary-line .btn__text--box:hover,
.btn__toggle__multi.primary-line .btn__ic--box:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic:hover::after,
.btn__toggle__single.primary-line .btn__text--box:hover::after,
.btn__toggle__single.primary-line .btn__ic--box:hover::after,
.btn__toggle__multi.primary-line .btn__ic:hover::after,
.btn__toggle__multi.primary-line .btn__text--box:hover::after,
.btn__toggle__multi.primary-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.primary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.primary-line .btn__ic:disabled, .btn__toggle__single.primary-line .btn__ic.disabled,
.btn__toggle__single.primary-line .btn__text--box:disabled,
.btn__toggle__single.primary-line .btn__text--box.disabled,
.btn__toggle__single.primary-line .btn__ic--box:disabled,
.btn__toggle__single.primary-line .btn__ic--box.disabled,
.btn__toggle__multi.primary-line .btn__ic:disabled,
.btn__toggle__multi.primary-line .btn__ic.disabled,
.btn__toggle__multi.primary-line .btn__text--box:disabled,
.btn__toggle__multi.primary-line .btn__text--box.disabled,
.btn__toggle__multi.primary-line .btn__ic--box:disabled,
.btn__toggle__multi.primary-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.primary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic:disabled::after, .btn__toggle__single.primary-line .btn__ic.disabled::after,
.btn__toggle__single.primary-line .btn__text--box:disabled::after,
.btn__toggle__single.primary-line .btn__text--box.disabled::after,
.btn__toggle__single.primary-line .btn__ic--box:disabled::after,
.btn__toggle__single.primary-line .btn__ic--box.disabled::after,
.btn__toggle__multi.primary-line .btn__ic:disabled::after,
.btn__toggle__multi.primary-line .btn__ic.disabled::after,
.btn__toggle__multi.primary-line .btn__text--box:disabled::after,
.btn__toggle__multi.primary-line .btn__text--box.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled), .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.primary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic span.color__box,
.btn__toggle__single.primary-line .btn__text--box span.color__box,
.btn__toggle__single.primary-line .btn__ic--box span.color__box,
.btn__toggle__multi.primary-line .btn__ic span.color__box,
.btn__toggle__multi.primary-line .btn__text--box span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.primary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.primary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.primary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.primary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.primary-line .btn__ic--s,
.btn__toggle__single.primary-line .btn__text--box--s,
.btn__toggle__single.primary-line .btn__ic--box--s,
.btn__toggle__multi.primary-line .btn__ic--s,
.btn__toggle__multi.primary-line .btn__text--box--s,
.btn__toggle__multi.primary-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--s > *,
.btn__toggle__single.primary-line .btn__text--box--s > *,
.btn__toggle__single.primary-line .btn__ic--box--s > *,
.btn__toggle__multi.primary-line .btn__ic--s > *,
.btn__toggle__multi.primary-line .btn__text--box--s > *,
.btn__toggle__multi.primary-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--s::after,
.btn__toggle__single.primary-line .btn__text--box--s::after,
.btn__toggle__single.primary-line .btn__ic--box--s::after,
.btn__toggle__multi.primary-line .btn__ic--s::after,
.btn__toggle__multi.primary-line .btn__text--box--s::after,
.btn__toggle__multi.primary-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.primary-line .btn__ic--s:focus,
.btn__toggle__single.primary-line .btn__text--box--s:focus,
.btn__toggle__single.primary-line .btn__ic--box--s:focus,
.btn__toggle__multi.primary-line .btn__ic--s:focus,
.btn__toggle__multi.primary-line .btn__text--box--s:focus,
.btn__toggle__multi.primary-line .btn__ic--box--s:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s:focus::after,
.btn__toggle__single.primary-line .btn__text--box--s:focus::after,
.btn__toggle__single.primary-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.primary-line .btn__ic--s:focus::after,
.btn__toggle__multi.primary-line .btn__text--box--s:focus::after,
.btn__toggle__multi.primary-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--s:hover,
.btn__toggle__single.primary-line .btn__text--box--s:hover,
.btn__toggle__single.primary-line .btn__ic--box--s:hover,
.btn__toggle__multi.primary-line .btn__ic--s:hover,
.btn__toggle__multi.primary-line .btn__text--box--s:hover,
.btn__toggle__multi.primary-line .btn__ic--box--s:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s:hover::after,
.btn__toggle__single.primary-line .btn__text--box--s:hover::after,
.btn__toggle__single.primary-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.primary-line .btn__ic--s:hover::after,
.btn__toggle__multi.primary-line .btn__text--box--s:hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.primary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--s:disabled, .btn__toggle__single.primary-line .btn__ic--s.disabled,
.btn__toggle__single.primary-line .btn__text--box--s:disabled,
.btn__toggle__single.primary-line .btn__text--box--s.disabled,
.btn__toggle__single.primary-line .btn__ic--box--s:disabled,
.btn__toggle__single.primary-line .btn__ic--box--s.disabled,
.btn__toggle__multi.primary-line .btn__ic--s:disabled,
.btn__toggle__multi.primary-line .btn__ic--s.disabled,
.btn__toggle__multi.primary-line .btn__text--box--s:disabled,
.btn__toggle__multi.primary-line .btn__text--box--s.disabled,
.btn__toggle__multi.primary-line .btn__ic--box--s:disabled,
.btn__toggle__multi.primary-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.primary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic--s:disabled::after, .btn__toggle__single.primary-line .btn__ic--s.disabled::after,
.btn__toggle__single.primary-line .btn__text--box--s:disabled::after,
.btn__toggle__single.primary-line .btn__text--box--s.disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--s:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--s.disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.primary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--s span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.primary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs,
.btn__toggle__single.primary-line .btn__text--box--xs,
.btn__toggle__single.primary-line .btn__ic--box--xs,
.btn__toggle__multi.primary-line .btn__ic--xs,
.btn__toggle__multi.primary-line .btn__text--box--xs,
.btn__toggle__multi.primary-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-primary-bg);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--btn-primary-bg);
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--xs > *,
.btn__toggle__single.primary-line .btn__text--box--xs > *,
.btn__toggle__single.primary-line .btn__ic--box--xs > *,
.btn__toggle__multi.primary-line .btn__ic--xs > *,
.btn__toggle__multi.primary-line .btn__text--box--xs > *,
.btn__toggle__multi.primary-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--xs::after,
.btn__toggle__single.primary-line .btn__text--box--xs::after,
.btn__toggle__single.primary-line .btn__ic--box--xs::after,
.btn__toggle__multi.primary-line .btn__ic--xs::after,
.btn__toggle__multi.primary-line .btn__text--box--xs::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.primary-line .btn__ic--xs:focus,
.btn__toggle__single.primary-line .btn__text--box--xs:focus,
.btn__toggle__single.primary-line .btn__ic--box--xs:focus,
.btn__toggle__multi.primary-line .btn__ic--xs:focus,
.btn__toggle__multi.primary-line .btn__text--box--xs:focus,
.btn__toggle__multi.primary-line .btn__ic--box--xs:focus {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs:focus::after,
.btn__toggle__single.primary-line .btn__text--box--xs:focus::after,
.btn__toggle__single.primary-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.primary-line .btn__ic--xs:focus::after,
.btn__toggle__multi.primary-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--xs:hover,
.btn__toggle__single.primary-line .btn__text--box--xs:hover,
.btn__toggle__single.primary-line .btn__ic--box--xs:hover,
.btn__toggle__multi.primary-line .btn__ic--xs:hover,
.btn__toggle__multi.primary-line .btn__text--box--xs:hover,
.btn__toggle__multi.primary-line .btn__ic--box--xs:hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs:hover::after,
.btn__toggle__single.primary-line .btn__text--box--xs:hover::after,
.btn__toggle__single.primary-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.primary-line .btn__ic--xs:hover::after,
.btn__toggle__multi.primary-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.primary-line .btn__ic--xs:disabled, .btn__toggle__single.primary-line .btn__ic--xs.disabled,
.btn__toggle__single.primary-line .btn__text--box--xs:disabled,
.btn__toggle__single.primary-line .btn__text--box--xs.disabled,
.btn__toggle__single.primary-line .btn__ic--box--xs:disabled,
.btn__toggle__single.primary-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.primary-line .btn__ic--xs:disabled,
.btn__toggle__multi.primary-line .btn__ic--xs.disabled,
.btn__toggle__multi.primary-line .btn__text--box--xs:disabled,
.btn__toggle__multi.primary-line .btn__text--box--xs.disabled,
.btn__toggle__multi.primary-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.primary-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.primary-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.primary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.primary-line .btn__ic--xs:disabled::after, .btn__toggle__single.primary-line .btn__ic--xs.disabled::after,
.btn__toggle__single.primary-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.primary-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.primary-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.primary-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.primary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.primary-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.primary-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.primary-line .btn__ic--xs span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.primary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.primary-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.primary-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.gray-line .btn__ic--l,
.btn__toggle__single.gray-line .btn__text--box--l,
.btn__toggle__single.gray-line .btn__ic--box--l,
.btn__toggle__multi.gray-line .btn__ic--l,
.btn__toggle__multi.gray-line .btn__text--box--l,
.btn__toggle__multi.gray-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--l > *,
.btn__toggle__single.gray-line .btn__text--box--l > *,
.btn__toggle__single.gray-line .btn__ic--box--l > *,
.btn__toggle__multi.gray-line .btn__ic--l > *,
.btn__toggle__multi.gray-line .btn__text--box--l > *,
.btn__toggle__multi.gray-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--l::after,
.btn__toggle__single.gray-line .btn__text--box--l::after,
.btn__toggle__single.gray-line .btn__ic--box--l::after,
.btn__toggle__multi.gray-line .btn__ic--l::after,
.btn__toggle__multi.gray-line .btn__text--box--l::after,
.btn__toggle__multi.gray-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.gray-line .btn__ic--l:focus,
.btn__toggle__single.gray-line .btn__text--box--l:focus,
.btn__toggle__single.gray-line .btn__ic--box--l:focus,
.btn__toggle__multi.gray-line .btn__ic--l:focus,
.btn__toggle__multi.gray-line .btn__text--box--l:focus,
.btn__toggle__multi.gray-line .btn__ic--box--l:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l:focus::after,
.btn__toggle__single.gray-line .btn__text--box--l:focus::after,
.btn__toggle__single.gray-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.gray-line .btn__ic--l:focus::after,
.btn__toggle__multi.gray-line .btn__text--box--l:focus::after,
.btn__toggle__multi.gray-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--l:hover,
.btn__toggle__single.gray-line .btn__text--box--l:hover,
.btn__toggle__single.gray-line .btn__ic--box--l:hover,
.btn__toggle__multi.gray-line .btn__ic--l:hover,
.btn__toggle__multi.gray-line .btn__text--box--l:hover,
.btn__toggle__multi.gray-line .btn__ic--box--l:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l:hover::after,
.btn__toggle__single.gray-line .btn__text--box--l:hover::after,
.btn__toggle__single.gray-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.gray-line .btn__ic--l:hover::after,
.btn__toggle__multi.gray-line .btn__text--box--l:hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.gray-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--l:disabled, .btn__toggle__single.gray-line .btn__ic--l.disabled,
.btn__toggle__single.gray-line .btn__text--box--l:disabled,
.btn__toggle__single.gray-line .btn__text--box--l.disabled,
.btn__toggle__single.gray-line .btn__ic--box--l:disabled,
.btn__toggle__single.gray-line .btn__ic--box--l.disabled,
.btn__toggle__multi.gray-line .btn__ic--l:disabled,
.btn__toggle__multi.gray-line .btn__ic--l.disabled,
.btn__toggle__multi.gray-line .btn__text--box--l:disabled,
.btn__toggle__multi.gray-line .btn__text--box--l.disabled,
.btn__toggle__multi.gray-line .btn__ic--box--l:disabled,
.btn__toggle__multi.gray-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.gray-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.gray-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.gray-line .btn__ic--l:disabled::after, .btn__toggle__single.gray-line .btn__ic--l.disabled::after,
.btn__toggle__single.gray-line .btn__text--box--l:disabled::after,
.btn__toggle__single.gray-line .btn__text--box--l.disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--l:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--l.disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.gray-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--l span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.gray-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.gray-line .btn__ic--m,
.btn__toggle__single.gray-line .btn__text--box--m,
.btn__toggle__single.gray-line .btn__ic--box--m,
.btn__toggle__multi.gray-line .btn__ic--m,
.btn__toggle__multi.gray-line .btn__text--box--m,
.btn__toggle__multi.gray-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--m > *,
.btn__toggle__single.gray-line .btn__text--box--m > *,
.btn__toggle__single.gray-line .btn__ic--box--m > *,
.btn__toggle__multi.gray-line .btn__ic--m > *,
.btn__toggle__multi.gray-line .btn__text--box--m > *,
.btn__toggle__multi.gray-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--m::after,
.btn__toggle__single.gray-line .btn__text--box--m::after,
.btn__toggle__single.gray-line .btn__ic--box--m::after,
.btn__toggle__multi.gray-line .btn__ic--m::after,
.btn__toggle__multi.gray-line .btn__text--box--m::after,
.btn__toggle__multi.gray-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.gray-line .btn__ic--m:focus,
.btn__toggle__single.gray-line .btn__text--box--m:focus,
.btn__toggle__single.gray-line .btn__ic--box--m:focus,
.btn__toggle__multi.gray-line .btn__ic--m:focus,
.btn__toggle__multi.gray-line .btn__text--box--m:focus,
.btn__toggle__multi.gray-line .btn__ic--box--m:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m:focus::after,
.btn__toggle__single.gray-line .btn__text--box--m:focus::after,
.btn__toggle__single.gray-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.gray-line .btn__ic--m:focus::after,
.btn__toggle__multi.gray-line .btn__text--box--m:focus::after,
.btn__toggle__multi.gray-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--m:hover,
.btn__toggle__single.gray-line .btn__text--box--m:hover,
.btn__toggle__single.gray-line .btn__ic--box--m:hover,
.btn__toggle__multi.gray-line .btn__ic--m:hover,
.btn__toggle__multi.gray-line .btn__text--box--m:hover,
.btn__toggle__multi.gray-line .btn__ic--box--m:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m:hover::after,
.btn__toggle__single.gray-line .btn__text--box--m:hover::after,
.btn__toggle__single.gray-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.gray-line .btn__ic--m:hover::after,
.btn__toggle__multi.gray-line .btn__text--box--m:hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.gray-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--m:disabled, .btn__toggle__single.gray-line .btn__ic--m.disabled,
.btn__toggle__single.gray-line .btn__text--box--m:disabled,
.btn__toggle__single.gray-line .btn__text--box--m.disabled,
.btn__toggle__single.gray-line .btn__ic--box--m:disabled,
.btn__toggle__single.gray-line .btn__ic--box--m.disabled,
.btn__toggle__multi.gray-line .btn__ic--m:disabled,
.btn__toggle__multi.gray-line .btn__ic--m.disabled,
.btn__toggle__multi.gray-line .btn__text--box--m:disabled,
.btn__toggle__multi.gray-line .btn__text--box--m.disabled,
.btn__toggle__multi.gray-line .btn__ic--box--m:disabled,
.btn__toggle__multi.gray-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.gray-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.gray-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.gray-line .btn__ic--m:disabled::after, .btn__toggle__single.gray-line .btn__ic--m.disabled::after,
.btn__toggle__single.gray-line .btn__text--box--m:disabled::after,
.btn__toggle__single.gray-line .btn__text--box--m.disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--m:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--m.disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.gray-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--m span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.gray-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.gray-line .btn__ic,
.btn__toggle__single.gray-line .btn__text--box,
.btn__toggle__single.gray-line .btn__ic--box,
.btn__toggle__multi.gray-line .btn__ic,
.btn__toggle__multi.gray-line .btn__text--box,
.btn__toggle__multi.gray-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic > *,
.btn__toggle__single.gray-line .btn__text--box > *,
.btn__toggle__single.gray-line .btn__ic--box > *,
.btn__toggle__multi.gray-line .btn__ic > *,
.btn__toggle__multi.gray-line .btn__text--box > *,
.btn__toggle__multi.gray-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic::after,
.btn__toggle__single.gray-line .btn__text--box::after,
.btn__toggle__single.gray-line .btn__ic--box::after,
.btn__toggle__multi.gray-line .btn__ic::after,
.btn__toggle__multi.gray-line .btn__text--box::after,
.btn__toggle__multi.gray-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.gray-line .btn__ic:focus,
.btn__toggle__single.gray-line .btn__text--box:focus,
.btn__toggle__single.gray-line .btn__ic--box:focus,
.btn__toggle__multi.gray-line .btn__ic:focus,
.btn__toggle__multi.gray-line .btn__text--box:focus,
.btn__toggle__multi.gray-line .btn__ic--box:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic:focus::after,
.btn__toggle__single.gray-line .btn__text--box:focus::after,
.btn__toggle__single.gray-line .btn__ic--box:focus::after,
.btn__toggle__multi.gray-line .btn__ic:focus::after,
.btn__toggle__multi.gray-line .btn__text--box:focus::after,
.btn__toggle__multi.gray-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic:hover,
.btn__toggle__single.gray-line .btn__text--box:hover,
.btn__toggle__single.gray-line .btn__ic--box:hover,
.btn__toggle__multi.gray-line .btn__ic:hover,
.btn__toggle__multi.gray-line .btn__text--box:hover,
.btn__toggle__multi.gray-line .btn__ic--box:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic:hover::after,
.btn__toggle__single.gray-line .btn__text--box:hover::after,
.btn__toggle__single.gray-line .btn__ic--box:hover::after,
.btn__toggle__multi.gray-line .btn__ic:hover::after,
.btn__toggle__multi.gray-line .btn__text--box:hover::after,
.btn__toggle__multi.gray-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.gray-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.gray-line .btn__ic:disabled, .btn__toggle__single.gray-line .btn__ic.disabled,
.btn__toggle__single.gray-line .btn__text--box:disabled,
.btn__toggle__single.gray-line .btn__text--box.disabled,
.btn__toggle__single.gray-line .btn__ic--box:disabled,
.btn__toggle__single.gray-line .btn__ic--box.disabled,
.btn__toggle__multi.gray-line .btn__ic:disabled,
.btn__toggle__multi.gray-line .btn__ic.disabled,
.btn__toggle__multi.gray-line .btn__text--box:disabled,
.btn__toggle__multi.gray-line .btn__text--box.disabled,
.btn__toggle__multi.gray-line .btn__ic--box:disabled,
.btn__toggle__multi.gray-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.gray-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.gray-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.gray-line .btn__ic:disabled::after, .btn__toggle__single.gray-line .btn__ic.disabled::after,
.btn__toggle__single.gray-line .btn__text--box:disabled::after,
.btn__toggle__single.gray-line .btn__text--box.disabled::after,
.btn__toggle__single.gray-line .btn__ic--box:disabled::after,
.btn__toggle__single.gray-line .btn__ic--box.disabled::after,
.btn__toggle__multi.gray-line .btn__ic:disabled::after,
.btn__toggle__multi.gray-line .btn__ic.disabled::after,
.btn__toggle__multi.gray-line .btn__text--box:disabled::after,
.btn__toggle__multi.gray-line .btn__text--box.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled), .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.gray-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic span.color__box,
.btn__toggle__single.gray-line .btn__text--box span.color__box,
.btn__toggle__single.gray-line .btn__ic--box span.color__box,
.btn__toggle__multi.gray-line .btn__ic span.color__box,
.btn__toggle__multi.gray-line .btn__text--box span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.gray-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.gray-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.gray-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.gray-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.gray-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.gray-line .btn__ic--s,
.btn__toggle__single.gray-line .btn__text--box--s,
.btn__toggle__single.gray-line .btn__ic--box--s,
.btn__toggle__multi.gray-line .btn__ic--s,
.btn__toggle__multi.gray-line .btn__text--box--s,
.btn__toggle__multi.gray-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--s > *,
.btn__toggle__single.gray-line .btn__text--box--s > *,
.btn__toggle__single.gray-line .btn__ic--box--s > *,
.btn__toggle__multi.gray-line .btn__ic--s > *,
.btn__toggle__multi.gray-line .btn__text--box--s > *,
.btn__toggle__multi.gray-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--s::after,
.btn__toggle__single.gray-line .btn__text--box--s::after,
.btn__toggle__single.gray-line .btn__ic--box--s::after,
.btn__toggle__multi.gray-line .btn__ic--s::after,
.btn__toggle__multi.gray-line .btn__text--box--s::after,
.btn__toggle__multi.gray-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.gray-line .btn__ic--s:focus,
.btn__toggle__single.gray-line .btn__text--box--s:focus,
.btn__toggle__single.gray-line .btn__ic--box--s:focus,
.btn__toggle__multi.gray-line .btn__ic--s:focus,
.btn__toggle__multi.gray-line .btn__text--box--s:focus,
.btn__toggle__multi.gray-line .btn__ic--box--s:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s:focus::after,
.btn__toggle__single.gray-line .btn__text--box--s:focus::after,
.btn__toggle__single.gray-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.gray-line .btn__ic--s:focus::after,
.btn__toggle__multi.gray-line .btn__text--box--s:focus::after,
.btn__toggle__multi.gray-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--s:hover,
.btn__toggle__single.gray-line .btn__text--box--s:hover,
.btn__toggle__single.gray-line .btn__ic--box--s:hover,
.btn__toggle__multi.gray-line .btn__ic--s:hover,
.btn__toggle__multi.gray-line .btn__text--box--s:hover,
.btn__toggle__multi.gray-line .btn__ic--box--s:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s:hover::after,
.btn__toggle__single.gray-line .btn__text--box--s:hover::after,
.btn__toggle__single.gray-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.gray-line .btn__ic--s:hover::after,
.btn__toggle__multi.gray-line .btn__text--box--s:hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.gray-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--s:disabled, .btn__toggle__single.gray-line .btn__ic--s.disabled,
.btn__toggle__single.gray-line .btn__text--box--s:disabled,
.btn__toggle__single.gray-line .btn__text--box--s.disabled,
.btn__toggle__single.gray-line .btn__ic--box--s:disabled,
.btn__toggle__single.gray-line .btn__ic--box--s.disabled,
.btn__toggle__multi.gray-line .btn__ic--s:disabled,
.btn__toggle__multi.gray-line .btn__ic--s.disabled,
.btn__toggle__multi.gray-line .btn__text--box--s:disabled,
.btn__toggle__multi.gray-line .btn__text--box--s.disabled,
.btn__toggle__multi.gray-line .btn__ic--box--s:disabled,
.btn__toggle__multi.gray-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.gray-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.gray-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.gray-line .btn__ic--s:disabled::after, .btn__toggle__single.gray-line .btn__ic--s.disabled::after,
.btn__toggle__single.gray-line .btn__text--box--s:disabled::after,
.btn__toggle__single.gray-line .btn__text--box--s.disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--s:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--s.disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.gray-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--s span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.gray-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs,
.btn__toggle__single.gray-line .btn__text--box--xs,
.btn__toggle__single.gray-line .btn__ic--box--xs,
.btn__toggle__multi.gray-line .btn__ic--xs,
.btn__toggle__multi.gray-line .btn__text--box--xs,
.btn__toggle__multi.gray-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--xs > *,
.btn__toggle__single.gray-line .btn__text--box--xs > *,
.btn__toggle__single.gray-line .btn__ic--box--xs > *,
.btn__toggle__multi.gray-line .btn__ic--xs > *,
.btn__toggle__multi.gray-line .btn__text--box--xs > *,
.btn__toggle__multi.gray-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--xs::after,
.btn__toggle__single.gray-line .btn__text--box--xs::after,
.btn__toggle__single.gray-line .btn__ic--box--xs::after,
.btn__toggle__multi.gray-line .btn__ic--xs::after,
.btn__toggle__multi.gray-line .btn__text--box--xs::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.gray-line .btn__ic--xs:focus,
.btn__toggle__single.gray-line .btn__text--box--xs:focus,
.btn__toggle__single.gray-line .btn__ic--box--xs:focus,
.btn__toggle__multi.gray-line .btn__ic--xs:focus,
.btn__toggle__multi.gray-line .btn__text--box--xs:focus,
.btn__toggle__multi.gray-line .btn__ic--box--xs:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs:focus::after,
.btn__toggle__single.gray-line .btn__text--box--xs:focus::after,
.btn__toggle__single.gray-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.gray-line .btn__ic--xs:focus::after,
.btn__toggle__multi.gray-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--xs:hover,
.btn__toggle__single.gray-line .btn__text--box--xs:hover,
.btn__toggle__single.gray-line .btn__ic--box--xs:hover,
.btn__toggle__multi.gray-line .btn__ic--xs:hover,
.btn__toggle__multi.gray-line .btn__text--box--xs:hover,
.btn__toggle__multi.gray-line .btn__ic--box--xs:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs:hover::after,
.btn__toggle__single.gray-line .btn__text--box--xs:hover::after,
.btn__toggle__single.gray-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.gray-line .btn__ic--xs:hover::after,
.btn__toggle__multi.gray-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.gray-line .btn__ic--xs:disabled, .btn__toggle__single.gray-line .btn__ic--xs.disabled,
.btn__toggle__single.gray-line .btn__text--box--xs:disabled,
.btn__toggle__single.gray-line .btn__text--box--xs.disabled,
.btn__toggle__single.gray-line .btn__ic--box--xs:disabled,
.btn__toggle__single.gray-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.gray-line .btn__ic--xs:disabled,
.btn__toggle__multi.gray-line .btn__ic--xs.disabled,
.btn__toggle__multi.gray-line .btn__text--box--xs:disabled,
.btn__toggle__multi.gray-line .btn__text--box--xs.disabled,
.btn__toggle__multi.gray-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.gray-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.gray-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.gray-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.gray-line .btn__ic--xs:disabled::after, .btn__toggle__single.gray-line .btn__ic--xs.disabled::after,
.btn__toggle__single.gray-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.gray-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.gray-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.gray-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
  z-index: 1;
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.gray-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.gray-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.gray-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.gray-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.gray-line .btn__ic--xs span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.gray-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.gray-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.gray-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l,
.btn__toggle__single.secondary-line .btn__text--box--l,
.btn__toggle__single.secondary-line .btn__ic--box--l,
.btn__toggle__multi.secondary-line .btn__ic--l,
.btn__toggle__multi.secondary-line .btn__text--box--l,
.btn__toggle__multi.secondary-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--l [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--l > *,
.btn__toggle__single.secondary-line .btn__text--box--l > *,
.btn__toggle__single.secondary-line .btn__ic--box--l > *,
.btn__toggle__multi.secondary-line .btn__ic--l > *,
.btn__toggle__multi.secondary-line .btn__text--box--l > *,
.btn__toggle__multi.secondary-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--l::after,
.btn__toggle__single.secondary-line .btn__text--box--l::after,
.btn__toggle__single.secondary-line .btn__ic--box--l::after,
.btn__toggle__multi.secondary-line .btn__ic--l::after,
.btn__toggle__multi.secondary-line .btn__text--box--l::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.secondary-line .btn__ic--l:focus,
.btn__toggle__single.secondary-line .btn__text--box--l:focus,
.btn__toggle__single.secondary-line .btn__ic--box--l:focus,
.btn__toggle__multi.secondary-line .btn__ic--l:focus,
.btn__toggle__multi.secondary-line .btn__text--box--l:focus,
.btn__toggle__multi.secondary-line .btn__ic--box--l:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--l:focus::after,
.btn__toggle__single.secondary-line .btn__text--box--l:focus::after,
.btn__toggle__single.secondary-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--l:focus::after,
.btn__toggle__multi.secondary-line .btn__text--box--l:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--l:hover,
.btn__toggle__single.secondary-line .btn__text--box--l:hover,
.btn__toggle__single.secondary-line .btn__ic--box--l:hover,
.btn__toggle__multi.secondary-line .btn__ic--l:hover,
.btn__toggle__multi.secondary-line .btn__text--box--l:hover,
.btn__toggle__multi.secondary-line .btn__ic--box--l:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--l:hover::after,
.btn__toggle__single.secondary-line .btn__text--box--l:hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--l:hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--l:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--l:disabled, .btn__toggle__single.secondary-line .btn__ic--l.disabled,
.btn__toggle__single.secondary-line .btn__text--box--l:disabled,
.btn__toggle__single.secondary-line .btn__text--box--l.disabled,
.btn__toggle__single.secondary-line .btn__ic--box--l:disabled,
.btn__toggle__single.secondary-line .btn__ic--box--l.disabled,
.btn__toggle__multi.secondary-line .btn__ic--l:disabled,
.btn__toggle__multi.secondary-line .btn__ic--l.disabled,
.btn__toggle__multi.secondary-line .btn__text--box--l:disabled,
.btn__toggle__multi.secondary-line .btn__text--box--l.disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--l:disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary-line .btn__ic--l:disabled::after, .btn__toggle__single.secondary-line .btn__ic--l.disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--l:disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--l.disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--l:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--l.disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.secondary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--l span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.secondary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m,
.btn__toggle__single.secondary-line .btn__text--box--m,
.btn__toggle__single.secondary-line .btn__ic--box--m,
.btn__toggle__multi.secondary-line .btn__ic--m,
.btn__toggle__multi.secondary-line .btn__text--box--m,
.btn__toggle__multi.secondary-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--m [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--m > *,
.btn__toggle__single.secondary-line .btn__text--box--m > *,
.btn__toggle__single.secondary-line .btn__ic--box--m > *,
.btn__toggle__multi.secondary-line .btn__ic--m > *,
.btn__toggle__multi.secondary-line .btn__text--box--m > *,
.btn__toggle__multi.secondary-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--m::after,
.btn__toggle__single.secondary-line .btn__text--box--m::after,
.btn__toggle__single.secondary-line .btn__ic--box--m::after,
.btn__toggle__multi.secondary-line .btn__ic--m::after,
.btn__toggle__multi.secondary-line .btn__text--box--m::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.secondary-line .btn__ic--m:focus,
.btn__toggle__single.secondary-line .btn__text--box--m:focus,
.btn__toggle__single.secondary-line .btn__ic--box--m:focus,
.btn__toggle__multi.secondary-line .btn__ic--m:focus,
.btn__toggle__multi.secondary-line .btn__text--box--m:focus,
.btn__toggle__multi.secondary-line .btn__ic--box--m:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--m:focus::after,
.btn__toggle__single.secondary-line .btn__text--box--m:focus::after,
.btn__toggle__single.secondary-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--m:focus::after,
.btn__toggle__multi.secondary-line .btn__text--box--m:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--m:hover,
.btn__toggle__single.secondary-line .btn__text--box--m:hover,
.btn__toggle__single.secondary-line .btn__ic--box--m:hover,
.btn__toggle__multi.secondary-line .btn__ic--m:hover,
.btn__toggle__multi.secondary-line .btn__text--box--m:hover,
.btn__toggle__multi.secondary-line .btn__ic--box--m:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--m:hover::after,
.btn__toggle__single.secondary-line .btn__text--box--m:hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--m:hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--m:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--m:disabled, .btn__toggle__single.secondary-line .btn__ic--m.disabled,
.btn__toggle__single.secondary-line .btn__text--box--m:disabled,
.btn__toggle__single.secondary-line .btn__text--box--m.disabled,
.btn__toggle__single.secondary-line .btn__ic--box--m:disabled,
.btn__toggle__single.secondary-line .btn__ic--box--m.disabled,
.btn__toggle__multi.secondary-line .btn__ic--m:disabled,
.btn__toggle__multi.secondary-line .btn__ic--m.disabled,
.btn__toggle__multi.secondary-line .btn__text--box--m:disabled,
.btn__toggle__multi.secondary-line .btn__text--box--m.disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--m:disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary-line .btn__ic--m:disabled::after, .btn__toggle__single.secondary-line .btn__ic--m.disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--m:disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--m.disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--m:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--m.disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.secondary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--m span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.secondary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.secondary-line .btn__ic,
.btn__toggle__single.secondary-line .btn__text--box,
.btn__toggle__single.secondary-line .btn__ic--box,
.btn__toggle__multi.secondary-line .btn__ic,
.btn__toggle__multi.secondary-line .btn__text--box,
.btn__toggle__multi.secondary-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic > *,
.btn__toggle__single.secondary-line .btn__text--box > *,
.btn__toggle__single.secondary-line .btn__ic--box > *,
.btn__toggle__multi.secondary-line .btn__ic > *,
.btn__toggle__multi.secondary-line .btn__text--box > *,
.btn__toggle__multi.secondary-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic::after,
.btn__toggle__single.secondary-line .btn__text--box::after,
.btn__toggle__single.secondary-line .btn__ic--box::after,
.btn__toggle__multi.secondary-line .btn__ic::after,
.btn__toggle__multi.secondary-line .btn__text--box::after,
.btn__toggle__multi.secondary-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.secondary-line .btn__ic:focus,
.btn__toggle__single.secondary-line .btn__text--box:focus,
.btn__toggle__single.secondary-line .btn__ic--box:focus,
.btn__toggle__multi.secondary-line .btn__ic:focus,
.btn__toggle__multi.secondary-line .btn__text--box:focus,
.btn__toggle__multi.secondary-line .btn__ic--box:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic:focus::after,
.btn__toggle__single.secondary-line .btn__text--box:focus::after,
.btn__toggle__single.secondary-line .btn__ic--box:focus::after,
.btn__toggle__multi.secondary-line .btn__ic:focus::after,
.btn__toggle__multi.secondary-line .btn__text--box:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic:hover,
.btn__toggle__single.secondary-line .btn__text--box:hover,
.btn__toggle__single.secondary-line .btn__ic--box:hover,
.btn__toggle__multi.secondary-line .btn__ic:hover,
.btn__toggle__multi.secondary-line .btn__text--box:hover,
.btn__toggle__multi.secondary-line .btn__ic--box:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic:hover::after,
.btn__toggle__single.secondary-line .btn__text--box:hover::after,
.btn__toggle__single.secondary-line .btn__ic--box:hover::after,
.btn__toggle__multi.secondary-line .btn__ic:hover::after,
.btn__toggle__multi.secondary-line .btn__text--box:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.secondary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic:disabled, .btn__toggle__single.secondary-line .btn__ic.disabled,
.btn__toggle__single.secondary-line .btn__text--box:disabled,
.btn__toggle__single.secondary-line .btn__text--box.disabled,
.btn__toggle__single.secondary-line .btn__ic--box:disabled,
.btn__toggle__single.secondary-line .btn__ic--box.disabled,
.btn__toggle__multi.secondary-line .btn__ic:disabled,
.btn__toggle__multi.secondary-line .btn__ic.disabled,
.btn__toggle__multi.secondary-line .btn__text--box:disabled,
.btn__toggle__multi.secondary-line .btn__text--box.disabled,
.btn__toggle__multi.secondary-line .btn__ic--box:disabled,
.btn__toggle__multi.secondary-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.secondary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary-line .btn__ic:disabled::after, .btn__toggle__single.secondary-line .btn__ic.disabled::after,
.btn__toggle__single.secondary-line .btn__text--box:disabled::after,
.btn__toggle__single.secondary-line .btn__text--box.disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box:disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic.disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box:disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled), .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.secondary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic span.color__box,
.btn__toggle__single.secondary-line .btn__text--box span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box span.color__box,
.btn__toggle__multi.secondary-line .btn__ic span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.secondary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.secondary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.secondary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.secondary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s,
.btn__toggle__single.secondary-line .btn__text--box--s,
.btn__toggle__single.secondary-line .btn__ic--box--s,
.btn__toggle__multi.secondary-line .btn__ic--s,
.btn__toggle__multi.secondary-line .btn__text--box--s,
.btn__toggle__multi.secondary-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--s [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--s > *,
.btn__toggle__single.secondary-line .btn__text--box--s > *,
.btn__toggle__single.secondary-line .btn__ic--box--s > *,
.btn__toggle__multi.secondary-line .btn__ic--s > *,
.btn__toggle__multi.secondary-line .btn__text--box--s > *,
.btn__toggle__multi.secondary-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--s::after,
.btn__toggle__single.secondary-line .btn__text--box--s::after,
.btn__toggle__single.secondary-line .btn__ic--box--s::after,
.btn__toggle__multi.secondary-line .btn__ic--s::after,
.btn__toggle__multi.secondary-line .btn__text--box--s::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.secondary-line .btn__ic--s:focus,
.btn__toggle__single.secondary-line .btn__text--box--s:focus,
.btn__toggle__single.secondary-line .btn__ic--box--s:focus,
.btn__toggle__multi.secondary-line .btn__ic--s:focus,
.btn__toggle__multi.secondary-line .btn__text--box--s:focus,
.btn__toggle__multi.secondary-line .btn__ic--box--s:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--s:focus::after,
.btn__toggle__single.secondary-line .btn__text--box--s:focus::after,
.btn__toggle__single.secondary-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--s:focus::after,
.btn__toggle__multi.secondary-line .btn__text--box--s:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--s:hover,
.btn__toggle__single.secondary-line .btn__text--box--s:hover,
.btn__toggle__single.secondary-line .btn__ic--box--s:hover,
.btn__toggle__multi.secondary-line .btn__ic--s:hover,
.btn__toggle__multi.secondary-line .btn__text--box--s:hover,
.btn__toggle__multi.secondary-line .btn__ic--box--s:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--s:hover::after,
.btn__toggle__single.secondary-line .btn__text--box--s:hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--s:hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--s:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--s:disabled, .btn__toggle__single.secondary-line .btn__ic--s.disabled,
.btn__toggle__single.secondary-line .btn__text--box--s:disabled,
.btn__toggle__single.secondary-line .btn__text--box--s.disabled,
.btn__toggle__single.secondary-line .btn__ic--box--s:disabled,
.btn__toggle__single.secondary-line .btn__ic--box--s.disabled,
.btn__toggle__multi.secondary-line .btn__ic--s:disabled,
.btn__toggle__multi.secondary-line .btn__ic--s.disabled,
.btn__toggle__multi.secondary-line .btn__text--box--s:disabled,
.btn__toggle__multi.secondary-line .btn__text--box--s.disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--s:disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary-line .btn__ic--s:disabled::after, .btn__toggle__single.secondary-line .btn__ic--s.disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--s:disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--s.disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--s:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--s.disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.secondary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--s span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.secondary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs,
.btn__toggle__single.secondary-line .btn__text--box--xs,
.btn__toggle__single.secondary-line .btn__ic--box--xs,
.btn__toggle__multi.secondary-line .btn__ic--xs,
.btn__toggle__multi.secondary-line .btn__text--box--xs,
.btn__toggle__multi.secondary-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--xs > *,
.btn__toggle__single.secondary-line .btn__text--box--xs > *,
.btn__toggle__single.secondary-line .btn__ic--box--xs > *,
.btn__toggle__multi.secondary-line .btn__ic--xs > *,
.btn__toggle__multi.secondary-line .btn__text--box--xs > *,
.btn__toggle__multi.secondary-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--xs::after,
.btn__toggle__single.secondary-line .btn__text--box--xs::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs::after,
.btn__toggle__multi.secondary-line .btn__ic--xs::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.secondary-line .btn__ic--xs:focus,
.btn__toggle__single.secondary-line .btn__text--box--xs:focus,
.btn__toggle__single.secondary-line .btn__ic--box--xs:focus,
.btn__toggle__multi.secondary-line .btn__ic--xs:focus,
.btn__toggle__multi.secondary-line .btn__text--box--xs:focus,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:focus {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-030);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--xs:focus::after,
.btn__toggle__single.secondary-line .btn__text--box--xs:focus::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--xs:focus::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--xs:hover,
.btn__toggle__single.secondary-line .btn__text--box--xs:hover,
.btn__toggle__single.secondary-line .btn__ic--box--xs:hover,
.btn__toggle__multi.secondary-line .btn__ic--xs:hover,
.btn__toggle__multi.secondary-line .btn__text--box--xs:hover,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:hover {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--xs:hover::after,
.btn__toggle__single.secondary-line .btn__text--box--xs:hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--xs:hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--color-gray-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 25%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--xs:disabled, .btn__toggle__single.secondary-line .btn__ic--xs.disabled,
.btn__toggle__single.secondary-line .btn__text--box--xs:disabled,
.btn__toggle__single.secondary-line .btn__text--box--xs.disabled,
.btn__toggle__single.secondary-line .btn__ic--box--xs:disabled,
.btn__toggle__single.secondary-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.secondary-line .btn__ic--xs:disabled,
.btn__toggle__multi.secondary-line .btn__ic--xs.disabled,
.btn__toggle__multi.secondary-line .btn__text--box--xs:disabled,
.btn__toggle__multi.secondary-line .btn__text--box--xs.disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.secondary-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.secondary-line .btn__ic--xs:disabled::after, .btn__toggle__single.secondary-line .btn__ic--xs.disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.secondary-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
  z-index: 1;
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--btn-primary-bg);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.secondary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.secondary-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: color-mix(in srgb, var(--btn-primary-bg) 12%, transparent);
}
.btn__toggle__single.secondary-line .btn__ic--xs span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.secondary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.secondary-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.secondary-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l,
.btn__toggle__single.tertiary-line .btn__text--box--l,
.btn__toggle__single.tertiary-line .btn__ic--box--l,
.btn__toggle__multi.tertiary-line .btn__ic--l,
.btn__toggle__multi.tertiary-line .btn__text--box--l,
.btn__toggle__multi.tertiary-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--l [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--l > *,
.btn__toggle__single.tertiary-line .btn__text--box--l > *,
.btn__toggle__single.tertiary-line .btn__ic--box--l > *,
.btn__toggle__multi.tertiary-line .btn__ic--l > *,
.btn__toggle__multi.tertiary-line .btn__text--box--l > *,
.btn__toggle__multi.tertiary-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--l::after,
.btn__toggle__single.tertiary-line .btn__text--box--l::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l::after,
.btn__toggle__multi.tertiary-line .btn__ic--l::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.tertiary-line .btn__ic--l:focus,
.btn__toggle__single.tertiary-line .btn__text--box--l:focus,
.btn__toggle__single.tertiary-line .btn__ic--box--l:focus,
.btn__toggle__multi.tertiary-line .btn__ic--l:focus,
.btn__toggle__multi.tertiary-line .btn__text--box--l:focus,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--l:focus::after,
.btn__toggle__single.tertiary-line .btn__text--box--l:focus::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--l:focus::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--l:hover,
.btn__toggle__single.tertiary-line .btn__text--box--l:hover,
.btn__toggle__single.tertiary-line .btn__ic--box--l:hover,
.btn__toggle__multi.tertiary-line .btn__ic--l:hover,
.btn__toggle__multi.tertiary-line .btn__text--box--l:hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--l:hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--l:hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--l:hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--l:disabled, .btn__toggle__single.tertiary-line .btn__ic--l.disabled,
.btn__toggle__single.tertiary-line .btn__text--box--l:disabled,
.btn__toggle__single.tertiary-line .btn__text--box--l.disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--l:disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--l.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--l:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--l.disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--l:disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--l.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary-line .btn__ic--l:disabled::after, .btn__toggle__single.tertiary-line .btn__ic--l.disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--l:disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--l.disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--l:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--l.disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.tertiary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--l span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m,
.btn__toggle__single.tertiary-line .btn__text--box--m,
.btn__toggle__single.tertiary-line .btn__ic--box--m,
.btn__toggle__multi.tertiary-line .btn__ic--m,
.btn__toggle__multi.tertiary-line .btn__text--box--m,
.btn__toggle__multi.tertiary-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--m [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--m > *,
.btn__toggle__single.tertiary-line .btn__text--box--m > *,
.btn__toggle__single.tertiary-line .btn__ic--box--m > *,
.btn__toggle__multi.tertiary-line .btn__ic--m > *,
.btn__toggle__multi.tertiary-line .btn__text--box--m > *,
.btn__toggle__multi.tertiary-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--m::after,
.btn__toggle__single.tertiary-line .btn__text--box--m::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m::after,
.btn__toggle__multi.tertiary-line .btn__ic--m::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.tertiary-line .btn__ic--m:focus,
.btn__toggle__single.tertiary-line .btn__text--box--m:focus,
.btn__toggle__single.tertiary-line .btn__ic--box--m:focus,
.btn__toggle__multi.tertiary-line .btn__ic--m:focus,
.btn__toggle__multi.tertiary-line .btn__text--box--m:focus,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--m:focus::after,
.btn__toggle__single.tertiary-line .btn__text--box--m:focus::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--m:focus::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--m:hover,
.btn__toggle__single.tertiary-line .btn__text--box--m:hover,
.btn__toggle__single.tertiary-line .btn__ic--box--m:hover,
.btn__toggle__multi.tertiary-line .btn__ic--m:hover,
.btn__toggle__multi.tertiary-line .btn__text--box--m:hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--m:hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--m:hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--m:hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--m:disabled, .btn__toggle__single.tertiary-line .btn__ic--m.disabled,
.btn__toggle__single.tertiary-line .btn__text--box--m:disabled,
.btn__toggle__single.tertiary-line .btn__text--box--m.disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--m:disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--m.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--m:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--m.disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--m:disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--m.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary-line .btn__ic--m:disabled::after, .btn__toggle__single.tertiary-line .btn__ic--m.disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--m:disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--m.disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--m:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--m.disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.tertiary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--m span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.tertiary-line .btn__ic,
.btn__toggle__single.tertiary-line .btn__text--box,
.btn__toggle__single.tertiary-line .btn__ic--box,
.btn__toggle__multi.tertiary-line .btn__ic,
.btn__toggle__multi.tertiary-line .btn__text--box,
.btn__toggle__multi.tertiary-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic > *,
.btn__toggle__single.tertiary-line .btn__text--box > *,
.btn__toggle__single.tertiary-line .btn__ic--box > *,
.btn__toggle__multi.tertiary-line .btn__ic > *,
.btn__toggle__multi.tertiary-line .btn__text--box > *,
.btn__toggle__multi.tertiary-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic::after,
.btn__toggle__single.tertiary-line .btn__text--box::after,
.btn__toggle__single.tertiary-line .btn__ic--box::after,
.btn__toggle__multi.tertiary-line .btn__ic::after,
.btn__toggle__multi.tertiary-line .btn__text--box::after,
.btn__toggle__multi.tertiary-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.tertiary-line .btn__ic:focus,
.btn__toggle__single.tertiary-line .btn__text--box:focus,
.btn__toggle__single.tertiary-line .btn__ic--box:focus,
.btn__toggle__multi.tertiary-line .btn__ic:focus,
.btn__toggle__multi.tertiary-line .btn__text--box:focus,
.btn__toggle__multi.tertiary-line .btn__ic--box:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic:focus::after,
.btn__toggle__single.tertiary-line .btn__text--box:focus::after,
.btn__toggle__single.tertiary-line .btn__ic--box:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic:focus::after,
.btn__toggle__multi.tertiary-line .btn__text--box:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic:hover,
.btn__toggle__single.tertiary-line .btn__text--box:hover,
.btn__toggle__single.tertiary-line .btn__ic--box:hover,
.btn__toggle__multi.tertiary-line .btn__ic:hover,
.btn__toggle__multi.tertiary-line .btn__text--box:hover,
.btn__toggle__multi.tertiary-line .btn__ic--box:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic:hover::after,
.btn__toggle__single.tertiary-line .btn__text--box:hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic:hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.tertiary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic:disabled, .btn__toggle__single.tertiary-line .btn__ic.disabled,
.btn__toggle__single.tertiary-line .btn__text--box:disabled,
.btn__toggle__single.tertiary-line .btn__text--box.disabled,
.btn__toggle__single.tertiary-line .btn__ic--box:disabled,
.btn__toggle__single.tertiary-line .btn__ic--box.disabled,
.btn__toggle__multi.tertiary-line .btn__ic:disabled,
.btn__toggle__multi.tertiary-line .btn__ic.disabled,
.btn__toggle__multi.tertiary-line .btn__text--box:disabled,
.btn__toggle__multi.tertiary-line .btn__text--box.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary-line .btn__ic:disabled::after, .btn__toggle__single.tertiary-line .btn__ic.disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box:disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box.disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box:disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic.disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box:disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled), .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.tertiary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.tertiary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s,
.btn__toggle__single.tertiary-line .btn__text--box--s,
.btn__toggle__single.tertiary-line .btn__ic--box--s,
.btn__toggle__multi.tertiary-line .btn__ic--s,
.btn__toggle__multi.tertiary-line .btn__text--box--s,
.btn__toggle__multi.tertiary-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--s [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--s > *,
.btn__toggle__single.tertiary-line .btn__text--box--s > *,
.btn__toggle__single.tertiary-line .btn__ic--box--s > *,
.btn__toggle__multi.tertiary-line .btn__ic--s > *,
.btn__toggle__multi.tertiary-line .btn__text--box--s > *,
.btn__toggle__multi.tertiary-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--s::after,
.btn__toggle__single.tertiary-line .btn__text--box--s::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s::after,
.btn__toggle__multi.tertiary-line .btn__ic--s::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.tertiary-line .btn__ic--s:focus,
.btn__toggle__single.tertiary-line .btn__text--box--s:focus,
.btn__toggle__single.tertiary-line .btn__ic--box--s:focus,
.btn__toggle__multi.tertiary-line .btn__ic--s:focus,
.btn__toggle__multi.tertiary-line .btn__text--box--s:focus,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--s:focus::after,
.btn__toggle__single.tertiary-line .btn__text--box--s:focus::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--s:focus::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--s:hover,
.btn__toggle__single.tertiary-line .btn__text--box--s:hover,
.btn__toggle__single.tertiary-line .btn__ic--box--s:hover,
.btn__toggle__multi.tertiary-line .btn__ic--s:hover,
.btn__toggle__multi.tertiary-line .btn__text--box--s:hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--s:hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--s:hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--s:hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--s:disabled, .btn__toggle__single.tertiary-line .btn__ic--s.disabled,
.btn__toggle__single.tertiary-line .btn__text--box--s:disabled,
.btn__toggle__single.tertiary-line .btn__text--box--s.disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--s:disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--s.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--s:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--s.disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--s:disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--s.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary-line .btn__ic--s:disabled::after, .btn__toggle__single.tertiary-line .btn__ic--s.disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--s:disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--s.disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--s:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--s.disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.tertiary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--s span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs,
.btn__toggle__single.tertiary-line .btn__text--box--xs,
.btn__toggle__single.tertiary-line .btn__ic--box--xs,
.btn__toggle__multi.tertiary-line .btn__ic--xs,
.btn__toggle__multi.tertiary-line .btn__text--box--xs,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-gray-090);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--color-gray-070);
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--xs > *,
.btn__toggle__single.tertiary-line .btn__text--box--xs > *,
.btn__toggle__single.tertiary-line .btn__ic--box--xs > *,
.btn__toggle__multi.tertiary-line .btn__ic--xs > *,
.btn__toggle__multi.tertiary-line .btn__text--box--xs > *,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--xs::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.tertiary-line .btn__ic--xs:focus,
.btn__toggle__single.tertiary-line .btn__text--box--xs:focus,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:focus,
.btn__toggle__multi.tertiary-line .btn__ic--xs:focus,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:focus,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:focus {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:focus::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs:focus::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs:focus::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:hover,
.btn__toggle__single.tertiary-line .btn__text--box--xs:hover,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:hover,
.btn__toggle__multi.tertiary-line .btn__ic--xs:hover,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:hover {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs:hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs:hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 12%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--color-gray-090);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-gray-090) 25%, transparent);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:disabled, .btn__toggle__single.tertiary-line .btn__ic--xs.disabled,
.btn__toggle__single.tertiary-line .btn__text--box--xs:disabled,
.btn__toggle__single.tertiary-line .btn__text--box--xs.disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:disabled,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--xs:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--xs.disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:disabled,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.tertiary-line .btn__ic--xs:disabled::after, .btn__toggle__single.tertiary-line .btn__ic--xs.disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-primary-tint-015);
  z-index: 1;
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--color-gray-100);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-gray-070);
}
.btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.tertiary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.tertiary-line .btn__ic--xs span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.tertiary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.tertiary-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.tertiary-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.check-line .btn__ic--l,
.btn__toggle__single.check-line .btn__text--box--l,
.btn__toggle__single.check-line .btn__ic--box--l,
.btn__toggle__multi.check-line .btn__ic--l,
.btn__toggle__multi.check-line .btn__text--box--l,
.btn__toggle__multi.check-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--l > *,
.btn__toggle__single.check-line .btn__text--box--l > *,
.btn__toggle__single.check-line .btn__ic--box--l > *,
.btn__toggle__multi.check-line .btn__ic--l > *,
.btn__toggle__multi.check-line .btn__text--box--l > *,
.btn__toggle__multi.check-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--l::after,
.btn__toggle__single.check-line .btn__text--box--l::after,
.btn__toggle__single.check-line .btn__ic--box--l::after,
.btn__toggle__multi.check-line .btn__ic--l::after,
.btn__toggle__multi.check-line .btn__text--box--l::after,
.btn__toggle__multi.check-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.check-line .btn__ic--l:focus,
.btn__toggle__single.check-line .btn__text--box--l:focus,
.btn__toggle__single.check-line .btn__ic--box--l:focus,
.btn__toggle__multi.check-line .btn__ic--l:focus,
.btn__toggle__multi.check-line .btn__text--box--l:focus,
.btn__toggle__multi.check-line .btn__ic--box--l:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l:focus::after,
.btn__toggle__single.check-line .btn__text--box--l:focus::after,
.btn__toggle__single.check-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.check-line .btn__ic--l:focus::after,
.btn__toggle__multi.check-line .btn__text--box--l:focus::after,
.btn__toggle__multi.check-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--l:hover,
.btn__toggle__single.check-line .btn__text--box--l:hover,
.btn__toggle__single.check-line .btn__ic--box--l:hover,
.btn__toggle__multi.check-line .btn__ic--l:hover,
.btn__toggle__multi.check-line .btn__text--box--l:hover,
.btn__toggle__multi.check-line .btn__ic--box--l:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l:hover::after,
.btn__toggle__single.check-line .btn__text--box--l:hover::after,
.btn__toggle__single.check-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.check-line .btn__ic--l:hover::after,
.btn__toggle__multi.check-line .btn__text--box--l:hover::after,
.btn__toggle__multi.check-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.check-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__toggle__single.check-line .btn__ic--l:disabled, .btn__toggle__single.check-line .btn__ic--l.disabled,
.btn__toggle__single.check-line .btn__text--box--l:disabled,
.btn__toggle__single.check-line .btn__text--box--l.disabled,
.btn__toggle__single.check-line .btn__ic--box--l:disabled,
.btn__toggle__single.check-line .btn__ic--box--l.disabled,
.btn__toggle__multi.check-line .btn__ic--l:disabled,
.btn__toggle__multi.check-line .btn__ic--l.disabled,
.btn__toggle__multi.check-line .btn__text--box--l:disabled,
.btn__toggle__multi.check-line .btn__text--box--l.disabled,
.btn__toggle__multi.check-line .btn__ic--box--l:disabled,
.btn__toggle__multi.check-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.check-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.check-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check-line .btn__ic--l:disabled::after, .btn__toggle__single.check-line .btn__ic--l.disabled::after,
.btn__toggle__single.check-line .btn__text--box--l:disabled::after,
.btn__toggle__single.check-line .btn__text--box--l.disabled::after,
.btn__toggle__single.check-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.check-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.check-line .btn__ic--l:disabled::after,
.btn__toggle__multi.check-line .btn__ic--l.disabled::after,
.btn__toggle__multi.check-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.check-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.check-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--l span.color__box,
.btn__toggle__single.check-line .btn__text--box--l span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.check-line .btn__ic--l span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.check-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.check-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.check-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.check-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.check-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.check-line .btn__ic--m,
.btn__toggle__single.check-line .btn__text--box--m,
.btn__toggle__single.check-line .btn__ic--box--m,
.btn__toggle__multi.check-line .btn__ic--m,
.btn__toggle__multi.check-line .btn__text--box--m,
.btn__toggle__multi.check-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--m > *,
.btn__toggle__single.check-line .btn__text--box--m > *,
.btn__toggle__single.check-line .btn__ic--box--m > *,
.btn__toggle__multi.check-line .btn__ic--m > *,
.btn__toggle__multi.check-line .btn__text--box--m > *,
.btn__toggle__multi.check-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--m::after,
.btn__toggle__single.check-line .btn__text--box--m::after,
.btn__toggle__single.check-line .btn__ic--box--m::after,
.btn__toggle__multi.check-line .btn__ic--m::after,
.btn__toggle__multi.check-line .btn__text--box--m::after,
.btn__toggle__multi.check-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.check-line .btn__ic--m:focus,
.btn__toggle__single.check-line .btn__text--box--m:focus,
.btn__toggle__single.check-line .btn__ic--box--m:focus,
.btn__toggle__multi.check-line .btn__ic--m:focus,
.btn__toggle__multi.check-line .btn__text--box--m:focus,
.btn__toggle__multi.check-line .btn__ic--box--m:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m:focus::after,
.btn__toggle__single.check-line .btn__text--box--m:focus::after,
.btn__toggle__single.check-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.check-line .btn__ic--m:focus::after,
.btn__toggle__multi.check-line .btn__text--box--m:focus::after,
.btn__toggle__multi.check-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--m:hover,
.btn__toggle__single.check-line .btn__text--box--m:hover,
.btn__toggle__single.check-line .btn__ic--box--m:hover,
.btn__toggle__multi.check-line .btn__ic--m:hover,
.btn__toggle__multi.check-line .btn__text--box--m:hover,
.btn__toggle__multi.check-line .btn__ic--box--m:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m:hover::after,
.btn__toggle__single.check-line .btn__text--box--m:hover::after,
.btn__toggle__single.check-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.check-line .btn__ic--m:hover::after,
.btn__toggle__multi.check-line .btn__text--box--m:hover::after,
.btn__toggle__multi.check-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.check-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__toggle__single.check-line .btn__ic--m:disabled, .btn__toggle__single.check-line .btn__ic--m.disabled,
.btn__toggle__single.check-line .btn__text--box--m:disabled,
.btn__toggle__single.check-line .btn__text--box--m.disabled,
.btn__toggle__single.check-line .btn__ic--box--m:disabled,
.btn__toggle__single.check-line .btn__ic--box--m.disabled,
.btn__toggle__multi.check-line .btn__ic--m:disabled,
.btn__toggle__multi.check-line .btn__ic--m.disabled,
.btn__toggle__multi.check-line .btn__text--box--m:disabled,
.btn__toggle__multi.check-line .btn__text--box--m.disabled,
.btn__toggle__multi.check-line .btn__ic--box--m:disabled,
.btn__toggle__multi.check-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.check-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.check-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check-line .btn__ic--m:disabled::after, .btn__toggle__single.check-line .btn__ic--m.disabled::after,
.btn__toggle__single.check-line .btn__text--box--m:disabled::after,
.btn__toggle__single.check-line .btn__text--box--m.disabled::after,
.btn__toggle__single.check-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.check-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.check-line .btn__ic--m:disabled::after,
.btn__toggle__multi.check-line .btn__ic--m.disabled::after,
.btn__toggle__multi.check-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.check-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.check-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--m span.color__box,
.btn__toggle__single.check-line .btn__text--box--m span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.check-line .btn__ic--m span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.check-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.check-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.check-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.check-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.check-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.check-line .btn__ic,
.btn__toggle__single.check-line .btn__text--box,
.btn__toggle__single.check-line .btn__ic--box,
.btn__toggle__multi.check-line .btn__ic,
.btn__toggle__multi.check-line .btn__text--box,
.btn__toggle__multi.check-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic [class*=ic-],
.btn__toggle__single.check-line .btn__text--box [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.check-line .btn__ic [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic > *,
.btn__toggle__single.check-line .btn__text--box > *,
.btn__toggle__single.check-line .btn__ic--box > *,
.btn__toggle__multi.check-line .btn__ic > *,
.btn__toggle__multi.check-line .btn__text--box > *,
.btn__toggle__multi.check-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic::after,
.btn__toggle__single.check-line .btn__text--box::after,
.btn__toggle__single.check-line .btn__ic--box::after,
.btn__toggle__multi.check-line .btn__ic::after,
.btn__toggle__multi.check-line .btn__text--box::after,
.btn__toggle__multi.check-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.check-line .btn__ic:focus,
.btn__toggle__single.check-line .btn__text--box:focus,
.btn__toggle__single.check-line .btn__ic--box:focus,
.btn__toggle__multi.check-line .btn__ic:focus,
.btn__toggle__multi.check-line .btn__text--box:focus,
.btn__toggle__multi.check-line .btn__ic--box:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.check-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic:focus::after,
.btn__toggle__single.check-line .btn__text--box:focus::after,
.btn__toggle__single.check-line .btn__ic--box:focus::after,
.btn__toggle__multi.check-line .btn__ic:focus::after,
.btn__toggle__multi.check-line .btn__text--box:focus::after,
.btn__toggle__multi.check-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic:hover,
.btn__toggle__single.check-line .btn__text--box:hover,
.btn__toggle__single.check-line .btn__ic--box:hover,
.btn__toggle__multi.check-line .btn__ic:hover,
.btn__toggle__multi.check-line .btn__text--box:hover,
.btn__toggle__multi.check-line .btn__ic--box:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic:hover::after,
.btn__toggle__single.check-line .btn__text--box:hover::after,
.btn__toggle__single.check-line .btn__ic--box:hover::after,
.btn__toggle__multi.check-line .btn__ic:hover::after,
.btn__toggle__multi.check-line .btn__text--box:hover::after,
.btn__toggle__multi.check-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.check-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__toggle__single.check-line .btn__ic:disabled, .btn__toggle__single.check-line .btn__ic.disabled,
.btn__toggle__single.check-line .btn__text--box:disabled,
.btn__toggle__single.check-line .btn__text--box.disabled,
.btn__toggle__single.check-line .btn__ic--box:disabled,
.btn__toggle__single.check-line .btn__ic--box.disabled,
.btn__toggle__multi.check-line .btn__ic:disabled,
.btn__toggle__multi.check-line .btn__ic.disabled,
.btn__toggle__multi.check-line .btn__text--box:disabled,
.btn__toggle__multi.check-line .btn__text--box.disabled,
.btn__toggle__multi.check-line .btn__ic--box:disabled,
.btn__toggle__multi.check-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.check-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.check-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check-line .btn__ic:disabled::after, .btn__toggle__single.check-line .btn__ic.disabled::after,
.btn__toggle__single.check-line .btn__text--box:disabled::after,
.btn__toggle__single.check-line .btn__text--box.disabled::after,
.btn__toggle__single.check-line .btn__ic--box:disabled::after,
.btn__toggle__single.check-line .btn__ic--box.disabled::after,
.btn__toggle__multi.check-line .btn__ic:disabled::after,
.btn__toggle__multi.check-line .btn__ic.disabled::after,
.btn__toggle__multi.check-line .btn__text--box:disabled::after,
.btn__toggle__multi.check-line .btn__text--box.disabled::after,
.btn__toggle__multi.check-line .btn__ic--box:disabled::after,
.btn__toggle__multi.check-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled), .btn__toggle__single.check-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled) {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.check-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.check-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.check-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.check-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.check-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic span.color__box,
.btn__toggle__single.check-line .btn__text--box span.color__box,
.btn__toggle__single.check-line .btn__ic--box span.color__box,
.btn__toggle__multi.check-line .btn__ic span.color__box,
.btn__toggle__multi.check-line .btn__text--box span.color__box,
.btn__toggle__multi.check-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.check-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.check-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.check-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.check-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.check-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.check-line .btn__ic--s,
.btn__toggle__single.check-line .btn__text--box--s,
.btn__toggle__single.check-line .btn__ic--box--s,
.btn__toggle__multi.check-line .btn__ic--s,
.btn__toggle__multi.check-line .btn__text--box--s,
.btn__toggle__multi.check-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--s > *,
.btn__toggle__single.check-line .btn__text--box--s > *,
.btn__toggle__single.check-line .btn__ic--box--s > *,
.btn__toggle__multi.check-line .btn__ic--s > *,
.btn__toggle__multi.check-line .btn__text--box--s > *,
.btn__toggle__multi.check-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--s::after,
.btn__toggle__single.check-line .btn__text--box--s::after,
.btn__toggle__single.check-line .btn__ic--box--s::after,
.btn__toggle__multi.check-line .btn__ic--s::after,
.btn__toggle__multi.check-line .btn__text--box--s::after,
.btn__toggle__multi.check-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.check-line .btn__ic--s:focus,
.btn__toggle__single.check-line .btn__text--box--s:focus,
.btn__toggle__single.check-line .btn__ic--box--s:focus,
.btn__toggle__multi.check-line .btn__ic--s:focus,
.btn__toggle__multi.check-line .btn__text--box--s:focus,
.btn__toggle__multi.check-line .btn__ic--box--s:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s:focus::after,
.btn__toggle__single.check-line .btn__text--box--s:focus::after,
.btn__toggle__single.check-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.check-line .btn__ic--s:focus::after,
.btn__toggle__multi.check-line .btn__text--box--s:focus::after,
.btn__toggle__multi.check-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--s:hover,
.btn__toggle__single.check-line .btn__text--box--s:hover,
.btn__toggle__single.check-line .btn__ic--box--s:hover,
.btn__toggle__multi.check-line .btn__ic--s:hover,
.btn__toggle__multi.check-line .btn__text--box--s:hover,
.btn__toggle__multi.check-line .btn__ic--box--s:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s:hover::after,
.btn__toggle__single.check-line .btn__text--box--s:hover::after,
.btn__toggle__single.check-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.check-line .btn__ic--s:hover::after,
.btn__toggle__multi.check-line .btn__text--box--s:hover::after,
.btn__toggle__multi.check-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.check-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__toggle__single.check-line .btn__ic--s:disabled, .btn__toggle__single.check-line .btn__ic--s.disabled,
.btn__toggle__single.check-line .btn__text--box--s:disabled,
.btn__toggle__single.check-line .btn__text--box--s.disabled,
.btn__toggle__single.check-line .btn__ic--box--s:disabled,
.btn__toggle__single.check-line .btn__ic--box--s.disabled,
.btn__toggle__multi.check-line .btn__ic--s:disabled,
.btn__toggle__multi.check-line .btn__ic--s.disabled,
.btn__toggle__multi.check-line .btn__text--box--s:disabled,
.btn__toggle__multi.check-line .btn__text--box--s.disabled,
.btn__toggle__multi.check-line .btn__ic--box--s:disabled,
.btn__toggle__multi.check-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.check-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.check-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check-line .btn__ic--s:disabled::after, .btn__toggle__single.check-line .btn__ic--s.disabled::after,
.btn__toggle__single.check-line .btn__text--box--s:disabled::after,
.btn__toggle__single.check-line .btn__text--box--s.disabled::after,
.btn__toggle__single.check-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.check-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.check-line .btn__ic--s:disabled::after,
.btn__toggle__multi.check-line .btn__ic--s.disabled::after,
.btn__toggle__multi.check-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.check-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.check-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--s span.color__box,
.btn__toggle__single.check-line .btn__text--box--s span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.check-line .btn__ic--s span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.check-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.check-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.check-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.check-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.check-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.check-line .btn__ic--xs,
.btn__toggle__single.check-line .btn__text--box--xs,
.btn__toggle__single.check-line .btn__ic--box--xs,
.btn__toggle__multi.check-line .btn__ic--xs,
.btn__toggle__multi.check-line .btn__text--box--xs,
.btn__toggle__multi.check-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--color-vivid-green-070);
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--color-vivid-green-070);
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--xs > *,
.btn__toggle__single.check-line .btn__text--box--xs > *,
.btn__toggle__single.check-line .btn__ic--box--xs > *,
.btn__toggle__multi.check-line .btn__ic--xs > *,
.btn__toggle__multi.check-line .btn__text--box--xs > *,
.btn__toggle__multi.check-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--xs::after,
.btn__toggle__single.check-line .btn__text--box--xs::after,
.btn__toggle__single.check-line .btn__ic--box--xs::after,
.btn__toggle__multi.check-line .btn__ic--xs::after,
.btn__toggle__multi.check-line .btn__text--box--xs::after,
.btn__toggle__multi.check-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.check-line .btn__ic--xs:focus,
.btn__toggle__single.check-line .btn__text--box--xs:focus,
.btn__toggle__single.check-line .btn__ic--box--xs:focus,
.btn__toggle__multi.check-line .btn__ic--xs:focus,
.btn__toggle__multi.check-line .btn__text--box--xs:focus,
.btn__toggle__multi.check-line .btn__ic--box--xs:focus {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs:focus::after,
.btn__toggle__single.check-line .btn__text--box--xs:focus::after,
.btn__toggle__single.check-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.check-line .btn__ic--xs:focus::after,
.btn__toggle__multi.check-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.check-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--xs:hover,
.btn__toggle__single.check-line .btn__text--box--xs:hover,
.btn__toggle__single.check-line .btn__ic--box--xs:hover,
.btn__toggle__multi.check-line .btn__ic--xs:hover,
.btn__toggle__multi.check-line .btn__text--box--xs:hover,
.btn__toggle__multi.check-line .btn__ic--box--xs:hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs:hover::after,
.btn__toggle__single.check-line .btn__text--box--xs:hover::after,
.btn__toggle__single.check-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.check-line .btn__ic--xs:hover::after,
.btn__toggle__multi.check-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.check-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 12%, transparent);
}
.btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.check-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.check-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--color-vivid-green-070) 25%, transparent);
}
.btn__toggle__single.check-line .btn__ic--xs:disabled, .btn__toggle__single.check-line .btn__ic--xs.disabled,
.btn__toggle__single.check-line .btn__text--box--xs:disabled,
.btn__toggle__single.check-line .btn__text--box--xs.disabled,
.btn__toggle__single.check-line .btn__ic--box--xs:disabled,
.btn__toggle__single.check-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.check-line .btn__ic--xs:disabled,
.btn__toggle__multi.check-line .btn__ic--xs.disabled,
.btn__toggle__multi.check-line .btn__text--box--xs:disabled,
.btn__toggle__multi.check-line .btn__text--box--xs.disabled,
.btn__toggle__multi.check-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.check-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.check-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.check-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.check-line .btn__ic--xs:disabled::after, .btn__toggle__single.check-line .btn__ic--xs.disabled::after,
.btn__toggle__single.check-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.check-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.check-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.check-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.check-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.check-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.check-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.check-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.check-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
  z-index: 1;
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--color-vivid-green-070);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--color-vivid-green-070);
}
.btn__toggle__single.check-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.check-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.check-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.check-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.check-line .btn__ic--xs span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.check-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.check-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.check-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.danger-line .btn__ic--l,
.btn__toggle__single.danger-line .btn__text--box--l,
.btn__toggle__single.danger-line .btn__ic--box--l,
.btn__toggle__multi.danger-line .btn__ic--l,
.btn__toggle__multi.danger-line .btn__text--box--l,
.btn__toggle__multi.danger-line .btn__ic--box--l {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--l [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--l > *,
.btn__toggle__single.danger-line .btn__text--box--l > *,
.btn__toggle__single.danger-line .btn__ic--box--l > *,
.btn__toggle__multi.danger-line .btn__ic--l > *,
.btn__toggle__multi.danger-line .btn__text--box--l > *,
.btn__toggle__multi.danger-line .btn__ic--box--l > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--l::after,
.btn__toggle__single.danger-line .btn__text--box--l::after,
.btn__toggle__single.danger-line .btn__ic--box--l::after,
.btn__toggle__multi.danger-line .btn__ic--l::after,
.btn__toggle__multi.danger-line .btn__text--box--l::after,
.btn__toggle__multi.danger-line .btn__ic--box--l::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.danger-line .btn__ic--l:focus,
.btn__toggle__single.danger-line .btn__text--box--l:focus,
.btn__toggle__single.danger-line .btn__ic--box--l:focus,
.btn__toggle__multi.danger-line .btn__ic--l:focus,
.btn__toggle__multi.danger-line .btn__text--box--l:focus,
.btn__toggle__multi.danger-line .btn__ic--box--l:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--l:focus::after,
.btn__toggle__single.danger-line .btn__text--box--l:focus::after,
.btn__toggle__single.danger-line .btn__ic--box--l:focus::after,
.btn__toggle__multi.danger-line .btn__ic--l:focus::after,
.btn__toggle__multi.danger-line .btn__text--box--l:focus::after,
.btn__toggle__multi.danger-line .btn__ic--box--l:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--l:hover,
.btn__toggle__single.danger-line .btn__text--box--l:hover,
.btn__toggle__single.danger-line .btn__ic--box--l:hover,
.btn__toggle__multi.danger-line .btn__ic--l:hover,
.btn__toggle__multi.danger-line .btn__text--box--l:hover,
.btn__toggle__multi.danger-line .btn__ic--box--l:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--l:hover::after,
.btn__toggle__single.danger-line .btn__text--box--l:hover::after,
.btn__toggle__single.danger-line .btn__ic--box--l:hover::after,
.btn__toggle__multi.danger-line .btn__ic--l:hover::after,
.btn__toggle__multi.danger-line .btn__text--box--l:hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--l:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled):active, .btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled):active::after, .btn__toggle__single.danger-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__text--box--l:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--box--l:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--l:disabled, .btn__toggle__single.danger-line .btn__ic--l.disabled,
.btn__toggle__single.danger-line .btn__text--box--l:disabled,
.btn__toggle__single.danger-line .btn__text--box--l.disabled,
.btn__toggle__single.danger-line .btn__ic--box--l:disabled,
.btn__toggle__single.danger-line .btn__ic--box--l.disabled,
.btn__toggle__multi.danger-line .btn__ic--l:disabled,
.btn__toggle__multi.danger-line .btn__ic--l.disabled,
.btn__toggle__multi.danger-line .btn__text--box--l:disabled,
.btn__toggle__multi.danger-line .btn__text--box--l.disabled,
.btn__toggle__multi.danger-line .btn__ic--box--l:disabled,
.btn__toggle__multi.danger-line .btn__ic--box--l.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.danger-line .btn__ic--l:disabled [class*=ic-], .btn__toggle__single.danger-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger-line .btn__ic--l:disabled::after, .btn__toggle__single.danger-line .btn__ic--l.disabled::after,
.btn__toggle__single.danger-line .btn__text--box--l:disabled::after,
.btn__toggle__single.danger-line .btn__text--box--l.disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--l:disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--l.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--l:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--l.disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--l:disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--l.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--l:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--l.disabled::after {
  display: none;
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled), .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled) {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled) [class*=ic-], .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled)::after, .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled):hover, .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled):hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--l.selected:not(:disabled):hover::after, .btn__toggle__single.danger-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--l.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--l.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--l span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.danger-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--l[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--l[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--l[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.danger-line .btn__ic--m,
.btn__toggle__single.danger-line .btn__text--box--m,
.btn__toggle__single.danger-line .btn__ic--box--m,
.btn__toggle__multi.danger-line .btn__ic--m,
.btn__toggle__multi.danger-line .btn__text--box--m,
.btn__toggle__multi.danger-line .btn__ic--box--m {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--m [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--m > *,
.btn__toggle__single.danger-line .btn__text--box--m > *,
.btn__toggle__single.danger-line .btn__ic--box--m > *,
.btn__toggle__multi.danger-line .btn__ic--m > *,
.btn__toggle__multi.danger-line .btn__text--box--m > *,
.btn__toggle__multi.danger-line .btn__ic--box--m > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--m::after,
.btn__toggle__single.danger-line .btn__text--box--m::after,
.btn__toggle__single.danger-line .btn__ic--box--m::after,
.btn__toggle__multi.danger-line .btn__ic--m::after,
.btn__toggle__multi.danger-line .btn__text--box--m::after,
.btn__toggle__multi.danger-line .btn__ic--box--m::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.danger-line .btn__ic--m:focus,
.btn__toggle__single.danger-line .btn__text--box--m:focus,
.btn__toggle__single.danger-line .btn__ic--box--m:focus,
.btn__toggle__multi.danger-line .btn__ic--m:focus,
.btn__toggle__multi.danger-line .btn__text--box--m:focus,
.btn__toggle__multi.danger-line .btn__ic--box--m:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--m:focus::after,
.btn__toggle__single.danger-line .btn__text--box--m:focus::after,
.btn__toggle__single.danger-line .btn__ic--box--m:focus::after,
.btn__toggle__multi.danger-line .btn__ic--m:focus::after,
.btn__toggle__multi.danger-line .btn__text--box--m:focus::after,
.btn__toggle__multi.danger-line .btn__ic--box--m:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--m:hover,
.btn__toggle__single.danger-line .btn__text--box--m:hover,
.btn__toggle__single.danger-line .btn__ic--box--m:hover,
.btn__toggle__multi.danger-line .btn__ic--m:hover,
.btn__toggle__multi.danger-line .btn__text--box--m:hover,
.btn__toggle__multi.danger-line .btn__ic--box--m:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--m:hover::after,
.btn__toggle__single.danger-line .btn__text--box--m:hover::after,
.btn__toggle__single.danger-line .btn__ic--box--m:hover::after,
.btn__toggle__multi.danger-line .btn__ic--m:hover::after,
.btn__toggle__multi.danger-line .btn__text--box--m:hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--m:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled):active, .btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled):active::after, .btn__toggle__single.danger-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__text--box--m:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--box--m:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--m:disabled, .btn__toggle__single.danger-line .btn__ic--m.disabled,
.btn__toggle__single.danger-line .btn__text--box--m:disabled,
.btn__toggle__single.danger-line .btn__text--box--m.disabled,
.btn__toggle__single.danger-line .btn__ic--box--m:disabled,
.btn__toggle__single.danger-line .btn__ic--box--m.disabled,
.btn__toggle__multi.danger-line .btn__ic--m:disabled,
.btn__toggle__multi.danger-line .btn__ic--m.disabled,
.btn__toggle__multi.danger-line .btn__text--box--m:disabled,
.btn__toggle__multi.danger-line .btn__text--box--m.disabled,
.btn__toggle__multi.danger-line .btn__ic--box--m:disabled,
.btn__toggle__multi.danger-line .btn__ic--box--m.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.danger-line .btn__ic--m:disabled [class*=ic-], .btn__toggle__single.danger-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger-line .btn__ic--m:disabled::after, .btn__toggle__single.danger-line .btn__ic--m.disabled::after,
.btn__toggle__single.danger-line .btn__text--box--m:disabled::after,
.btn__toggle__single.danger-line .btn__text--box--m.disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--m:disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--m.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--m:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--m.disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--m:disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--m.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--m:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--m.disabled::after {
  display: none;
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled), .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled) {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled) [class*=ic-], .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled)::after, .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled):hover, .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled):hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--m.selected:not(:disabled):hover::after, .btn__toggle__single.danger-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--m.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--m.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--m span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.danger-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--m[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--m[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--m[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.danger-line .btn__ic,
.btn__toggle__single.danger-line .btn__text--box,
.btn__toggle__single.danger-line .btn__ic--box,
.btn__toggle__multi.danger-line .btn__ic,
.btn__toggle__multi.danger-line .btn__text--box,
.btn__toggle__multi.danger-line .btn__ic--box {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic > *,
.btn__toggle__single.danger-line .btn__text--box > *,
.btn__toggle__single.danger-line .btn__ic--box > *,
.btn__toggle__multi.danger-line .btn__ic > *,
.btn__toggle__multi.danger-line .btn__text--box > *,
.btn__toggle__multi.danger-line .btn__ic--box > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic::after,
.btn__toggle__single.danger-line .btn__text--box::after,
.btn__toggle__single.danger-line .btn__ic--box::after,
.btn__toggle__multi.danger-line .btn__ic::after,
.btn__toggle__multi.danger-line .btn__text--box::after,
.btn__toggle__multi.danger-line .btn__ic--box::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.danger-line .btn__ic:focus,
.btn__toggle__single.danger-line .btn__text--box:focus,
.btn__toggle__single.danger-line .btn__ic--box:focus,
.btn__toggle__multi.danger-line .btn__ic:focus,
.btn__toggle__multi.danger-line .btn__text--box:focus,
.btn__toggle__multi.danger-line .btn__ic--box:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic:focus::after,
.btn__toggle__single.danger-line .btn__text--box:focus::after,
.btn__toggle__single.danger-line .btn__ic--box:focus::after,
.btn__toggle__multi.danger-line .btn__ic:focus::after,
.btn__toggle__multi.danger-line .btn__text--box:focus::after,
.btn__toggle__multi.danger-line .btn__ic--box:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic:hover,
.btn__toggle__single.danger-line .btn__text--box:hover,
.btn__toggle__single.danger-line .btn__ic--box:hover,
.btn__toggle__multi.danger-line .btn__ic:hover,
.btn__toggle__multi.danger-line .btn__text--box:hover,
.btn__toggle__multi.danger-line .btn__ic--box:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic:hover::after,
.btn__toggle__single.danger-line .btn__text--box:hover::after,
.btn__toggle__single.danger-line .btn__ic--box:hover::after,
.btn__toggle__multi.danger-line .btn__ic:hover::after,
.btn__toggle__multi.danger-line .btn__text--box:hover::after,
.btn__toggle__multi.danger-line .btn__ic--box:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled):active, .btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled):active::after, .btn__toggle__single.danger-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__ic--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__text--box:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--box:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__toggle__single.danger-line .btn__ic:disabled, .btn__toggle__single.danger-line .btn__ic.disabled,
.btn__toggle__single.danger-line .btn__text--box:disabled,
.btn__toggle__single.danger-line .btn__text--box.disabled,
.btn__toggle__single.danger-line .btn__ic--box:disabled,
.btn__toggle__single.danger-line .btn__ic--box.disabled,
.btn__toggle__multi.danger-line .btn__ic:disabled,
.btn__toggle__multi.danger-line .btn__ic.disabled,
.btn__toggle__multi.danger-line .btn__text--box:disabled,
.btn__toggle__multi.danger-line .btn__text--box.disabled,
.btn__toggle__multi.danger-line .btn__ic--box:disabled,
.btn__toggle__multi.danger-line .btn__ic--box.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.danger-line .btn__ic:disabled [class*=ic-], .btn__toggle__single.danger-line .btn__ic.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger-line .btn__ic:disabled::after, .btn__toggle__single.danger-line .btn__ic.disabled::after,
.btn__toggle__single.danger-line .btn__text--box:disabled::after,
.btn__toggle__single.danger-line .btn__text--box.disabled::after,
.btn__toggle__single.danger-line .btn__ic--box:disabled::after,
.btn__toggle__single.danger-line .btn__ic--box.disabled::after,
.btn__toggle__multi.danger-line .btn__ic:disabled::after,
.btn__toggle__multi.danger-line .btn__ic.disabled::after,
.btn__toggle__multi.danger-line .btn__text--box:disabled::after,
.btn__toggle__multi.danger-line .btn__text--box.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box.disabled::after {
  display: none;
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled), .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled) {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled) [class*=ic-], .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled)::after, .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled):hover, .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled):hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic.selected:not(:disabled):hover::after, .btn__toggle__single.danger-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic span.color__box,
.btn__toggle__single.danger-line .btn__text--box span.color__box,
.btn__toggle__single.danger-line .btn__ic--box span.color__box,
.btn__toggle__multi.danger-line .btn__ic span.color__box,
.btn__toggle__multi.danger-line .btn__text--box span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.danger-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.danger-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.danger-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.danger-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.danger-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.danger-line .btn__ic--s,
.btn__toggle__single.danger-line .btn__text--box--s,
.btn__toggle__single.danger-line .btn__ic--box--s,
.btn__toggle__multi.danger-line .btn__ic--s,
.btn__toggle__multi.danger-line .btn__text--box--s,
.btn__toggle__multi.danger-line .btn__ic--box--s {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--s [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--s > *,
.btn__toggle__single.danger-line .btn__text--box--s > *,
.btn__toggle__single.danger-line .btn__ic--box--s > *,
.btn__toggle__multi.danger-line .btn__ic--s > *,
.btn__toggle__multi.danger-line .btn__text--box--s > *,
.btn__toggle__multi.danger-line .btn__ic--box--s > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--s::after,
.btn__toggle__single.danger-line .btn__text--box--s::after,
.btn__toggle__single.danger-line .btn__ic--box--s::after,
.btn__toggle__multi.danger-line .btn__ic--s::after,
.btn__toggle__multi.danger-line .btn__text--box--s::after,
.btn__toggle__multi.danger-line .btn__ic--box--s::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.danger-line .btn__ic--s:focus,
.btn__toggle__single.danger-line .btn__text--box--s:focus,
.btn__toggle__single.danger-line .btn__ic--box--s:focus,
.btn__toggle__multi.danger-line .btn__ic--s:focus,
.btn__toggle__multi.danger-line .btn__text--box--s:focus,
.btn__toggle__multi.danger-line .btn__ic--box--s:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--s:focus::after,
.btn__toggle__single.danger-line .btn__text--box--s:focus::after,
.btn__toggle__single.danger-line .btn__ic--box--s:focus::after,
.btn__toggle__multi.danger-line .btn__ic--s:focus::after,
.btn__toggle__multi.danger-line .btn__text--box--s:focus::after,
.btn__toggle__multi.danger-line .btn__ic--box--s:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--s:hover,
.btn__toggle__single.danger-line .btn__text--box--s:hover,
.btn__toggle__single.danger-line .btn__ic--box--s:hover,
.btn__toggle__multi.danger-line .btn__ic--s:hover,
.btn__toggle__multi.danger-line .btn__text--box--s:hover,
.btn__toggle__multi.danger-line .btn__ic--box--s:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--s:hover::after,
.btn__toggle__single.danger-line .btn__text--box--s:hover::after,
.btn__toggle__single.danger-line .btn__ic--box--s:hover::after,
.btn__toggle__multi.danger-line .btn__ic--s:hover::after,
.btn__toggle__multi.danger-line .btn__text--box--s:hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--s:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled):active, .btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled):active::after, .btn__toggle__single.danger-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__text--box--s:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--box--s:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--s:disabled, .btn__toggle__single.danger-line .btn__ic--s.disabled,
.btn__toggle__single.danger-line .btn__text--box--s:disabled,
.btn__toggle__single.danger-line .btn__text--box--s.disabled,
.btn__toggle__single.danger-line .btn__ic--box--s:disabled,
.btn__toggle__single.danger-line .btn__ic--box--s.disabled,
.btn__toggle__multi.danger-line .btn__ic--s:disabled,
.btn__toggle__multi.danger-line .btn__ic--s.disabled,
.btn__toggle__multi.danger-line .btn__text--box--s:disabled,
.btn__toggle__multi.danger-line .btn__text--box--s.disabled,
.btn__toggle__multi.danger-line .btn__ic--box--s:disabled,
.btn__toggle__multi.danger-line .btn__ic--box--s.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.danger-line .btn__ic--s:disabled [class*=ic-], .btn__toggle__single.danger-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger-line .btn__ic--s:disabled::after, .btn__toggle__single.danger-line .btn__ic--s.disabled::after,
.btn__toggle__single.danger-line .btn__text--box--s:disabled::after,
.btn__toggle__single.danger-line .btn__text--box--s.disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--s:disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--s.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--s:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--s.disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--s:disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--s.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--s:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--s.disabled::after {
  display: none;
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled), .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled) {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled) [class*=ic-], .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled)::after, .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled):hover, .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled):hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--s.selected:not(:disabled):hover::after, .btn__toggle__single.danger-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--s.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--s.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--s span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.danger-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--s[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--s[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--s[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs,
.btn__toggle__single.danger-line .btn__text--box--xs,
.btn__toggle__single.danger-line .btn__ic--box--xs,
.btn__toggle__multi.danger-line .btn__ic--xs,
.btn__toggle__multi.danger-line .btn__text--box--xs,
.btn__toggle__multi.danger-line .btn__ic--box--xs {
  position: relative;
  isolation: isolate;
  z-index: 0;
  background-color: transparent;
  color: var(--btn-danger-font);
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--xs [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs [class*=ic-] {
  display: inline-block;
  background: var(--btn-danger-icon);
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--xs > *,
.btn__toggle__single.danger-line .btn__text--box--xs > *,
.btn__toggle__single.danger-line .btn__ic--box--xs > *,
.btn__toggle__multi.danger-line .btn__ic--xs > *,
.btn__toggle__multi.danger-line .btn__text--box--xs > *,
.btn__toggle__multi.danger-line .btn__ic--box--xs > * {
  position: relative;
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--xs::after,
.btn__toggle__single.danger-line .btn__text--box--xs::after,
.btn__toggle__single.danger-line .btn__ic--box--xs::after,
.btn__toggle__multi.danger-line .btn__ic--xs::after,
.btn__toggle__multi.danger-line .btn__text--box--xs::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs::after {
  content: "";
  position: absolute;
  inset: 0.0625rem;
  border-radius: inherit;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}
.btn__toggle__single.danger-line .btn__ic--xs:focus,
.btn__toggle__single.danger-line .btn__text--box--xs:focus,
.btn__toggle__single.danger-line .btn__ic--box--xs:focus,
.btn__toggle__multi.danger-line .btn__ic--xs:focus,
.btn__toggle__multi.danger-line .btn__text--box--xs:focus,
.btn__toggle__multi.danger-line .btn__ic--box--xs:focus {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-110);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs:focus [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs:focus [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--xs:focus::after,
.btn__toggle__single.danger-line .btn__text--box--xs:focus::after,
.btn__toggle__single.danger-line .btn__ic--box--xs:focus::after,
.btn__toggle__multi.danger-line .btn__ic--xs:focus::after,
.btn__toggle__multi.danger-line .btn__text--box--xs:focus::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs:focus::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--xs:hover,
.btn__toggle__single.danger-line .btn__text--box--xs:hover,
.btn__toggle__single.danger-line .btn__ic--box--xs:hover,
.btn__toggle__multi.danger-line .btn__ic--xs:hover,
.btn__toggle__multi.danger-line .btn__text--box--xs:hover,
.btn__toggle__multi.danger-line .btn__ic--box--xs:hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs:hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs:hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--xs:hover::after,
.btn__toggle__single.danger-line .btn__text--box--xs:hover::after,
.btn__toggle__single.danger-line .btn__ic--box--xs:hover::after,
.btn__toggle__multi.danger-line .btn__ic--xs:hover::after,
.btn__toggle__multi.danger-line .btn__text--box--xs:hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs:hover::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 12%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active, .btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active,
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active,
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-], .btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active::after, .btn__toggle__single.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__single.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__text--box--xs:not(:disabled):not(.disabled).active::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled):active::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs:not(:disabled):not(.disabled).active::after {
  background-color: color-mix(in srgb, var(--btn-danger-font) 25%, transparent);
}
.btn__toggle__single.danger-line .btn__ic--xs:disabled, .btn__toggle__single.danger-line .btn__ic--xs.disabled,
.btn__toggle__single.danger-line .btn__text--box--xs:disabled,
.btn__toggle__single.danger-line .btn__text--box--xs.disabled,
.btn__toggle__single.danger-line .btn__ic--box--xs:disabled,
.btn__toggle__single.danger-line .btn__ic--box--xs.disabled,
.btn__toggle__multi.danger-line .btn__ic--xs:disabled,
.btn__toggle__multi.danger-line .btn__ic--xs.disabled,
.btn__toggle__multi.danger-line .btn__text--box--xs:disabled,
.btn__toggle__multi.danger-line .btn__text--box--xs.disabled,
.btn__toggle__multi.danger-line .btn__ic--box--xs:disabled,
.btn__toggle__multi.danger-line .btn__ic--box--xs.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-010);
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-015);
}
.btn__toggle__single.danger-line .btn__ic--xs:disabled [class*=ic-], .btn__toggle__single.danger-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs.disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs:disabled [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.btn__toggle__single.danger-line .btn__ic--xs:disabled::after, .btn__toggle__single.danger-line .btn__ic--xs.disabled::after,
.btn__toggle__single.danger-line .btn__text--box--xs:disabled::after,
.btn__toggle__single.danger-line .btn__text--box--xs.disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--xs:disabled::after,
.btn__toggle__single.danger-line .btn__ic--box--xs.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--xs:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--xs.disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--xs:disabled::after,
.btn__toggle__multi.danger-line .btn__text--box--xs.disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs:disabled::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs.disabled::after {
  display: none;
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled), .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled),
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled),
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled) {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
  z-index: 1;
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled) [class*=ic-], .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled) [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled) [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled)::after, .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled)::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled)::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled):hover, .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled):hover,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled):hover {
  color: var(--btn-danger-font);
  background-color: transparent;
  box-shadow: inset 0 0 0 0.0625rem var(--btn-danger-font);
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-], .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled):hover [class*=ic-],
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled):hover [class*=ic-] {
  background: var(--btn-danger-icon);
}
.btn__toggle__single.danger-line .btn__ic--xs.selected:not(:disabled):hover::after, .btn__toggle__single.danger-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__single.danger-line .btn__ic--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__text--box--xs.selected:not(.disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(:disabled):hover::after,
.btn__toggle__multi.danger-line .btn__ic--box--xs.selected:not(.disabled):hover::after {
  background-color: transparent;
}
.btn__toggle__single.danger-line .btn__ic--xs span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs span.color__box {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  pointer-events: none;
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=tertiary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=tertiary] > span.color__box {
  background-color: var(--btn-tertiary-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=secondary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=secondary] > span.color__box {
  background-color: var(--btn-secondary-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=primary] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=primary] > span.color__box {
  background-color: var(--btn-primary-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=check] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=check] > span.color__box {
  background-color: var(--btn-check-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=danger] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=danger] > span.color__box {
  background-color: var(--btn-danger-bg);
}
.btn__toggle__single.danger-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__single.danger-line .btn__ic--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--xs[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__text--box--xs[data-class=error] > span.color__box,
.btn__toggle__multi.danger-line .btn__ic--box--xs[data-class=error] > span.color__box {
  background-color: var(--btn-error-bg);
}
.btn__toggle__single.vertical,
.btn__toggle__multi.vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn__toggle__single.vertical [class*=btn__ic],
.btn__toggle__single.vertical [class*=btn__text--box],
.btn__toggle__single.vertical [class*=btn__ic--box--box],
.btn__toggle__multi.vertical [class*=btn__ic],
.btn__toggle__multi.vertical [class*=btn__text--box],
.btn__toggle__multi.vertical [class*=btn__ic--box--box] {
  border-radius: 0.188rem;
  flex: 0 1 auto;
  width: 100%;
}
.btn__toggle__single.vertical [class*=btn__ic]:not(:first-child),
.btn__toggle__single.vertical [class*=btn__text--box]:not(:first-child),
.btn__toggle__single.vertical [class*=btn__ic--box--box]:not(:first-child),
.btn__toggle__multi.vertical [class*=btn__ic]:not(:first-child),
.btn__toggle__multi.vertical [class*=btn__text--box]:not(:first-child),
.btn__toggle__multi.vertical [class*=btn__ic--box--box]:not(:first-child) {
  margin-left: 0;
  margin-top: -0.0625rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.btn__toggle__single.vertical [class*=btn__ic]:not(:last-of-type),
.btn__toggle__single.vertical [class*=btn__text--box]:not(:last-of-type),
.btn__toggle__single.vertical [class*=btn__ic--box--box]:not(:last-of-type),
.btn__toggle__multi.vertical [class*=btn__ic]:not(:last-of-type),
.btn__toggle__multi.vertical [class*=btn__text--box]:not(:last-of-type),
.btn__toggle__multi.vertical [class*=btn__ic--box--box]:not(:last-of-type) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/*
 * @file components/_switch.scss
 * @version 1.0
 * @Description 토글 스위치 디자인
 *              ex) 권한, 역할, 사용자 정보 수정 > 체크박스 목록
 */
.btn__toggle__switch {
  --switch-width: 2.5rem;
  --switch-height: 1.375rem;
  --switch-circle-size: 1rem;
  --switch-circle-offset: 0.188rem;
  --switch-circle-line-size: 0.0625rem;
  --switch-bg-color-off: #CFD4E2;
  --switch-circle-line-color-off: #C1C7D9;
  --switch-circle-color-off: #FFFFFF;
  --switch-bg-color-on: var(--semantic-primary-base);
  --switch-circle-line-color-on: color-mix(in srgb, var(--semantic-primary-base) 70%, white);
  --switch-circle-color-on: var(--semantic-primary-font);
  --switch-bg-color-disabled: #DFE2EC;
  --switch-circle-line-color-disabled: #A4ACC4;
  --switch-circle-color-disabled: #EFF1F5;
  --switch-text-color: var(--label-color);
  display: inline-flex;
  flex-direction: row;
  gap: 0.5rem;
  width: fit-content;
  min-width: max-content;
  min-height: 1.875rem;
  margin: 0 !important;
  color: var(--text-color);
  line-height: 1.3;
  outline: none;
  cursor: pointer;
}
.btn__toggle__switch input[type=checkbox] {
  display: none;
}
.btn__toggle__switch input[type=checkbox] + span {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: 2.5rem;
  transition: 0.4s;
  background-color: var(--switch-bg-color-off);
  cursor: pointer;
}
.btn__toggle__switch input[type=checkbox] + span::before {
  position: absolute;
  top: var(--switch-circle-offset);
  left: 0.125rem;
  border: var(--switch-circle-line-size) solid var(--switch-circle-line-color-off);
  border-radius: 50%;
  content: "";
  width: var(--switch-circle-size);
  height: var(--switch-circle-size);
  background-color: var(--switch-circle-color-off);
}
.btn__toggle__switch input[type=checkbox] + span::after {
  position: absolute;
  top: var(--switch-circle-offset);
  right: var(--switch-circle-offset);
  content: "";
  background-color: var(--switch-circle-color-off);
}
.btn__toggle__switch input[type=checkbox]:checked + span {
  background-color: var(--switch-bg-color-on);
}
.btn__toggle__switch input[type=checkbox]:checked + span::before {
  border-color: var(--switch-circle-line-color-on);
  background-color: var(--switch-circle-color-on);
  transform: translate(1.188rem, 0);
}
.btn__toggle__switch input[type=checkbox]:checked + span::after {
  left: 0.125rem;
  background-color: var(--switch-circle-color-on);
}
.btn__toggle__switch input[type=checkbox]:disabled + span {
  pointer-events: none;
  background-color: var(--switch-bg-color-disabled);
  cursor: not-allowed;
}
.btn__toggle__switch input[type=checkbox]:disabled + span::before {
  background-color: var(--switch-circle-color-disabled);
}
.btn__toggle__switch input[type=checkbox]:disabled + span::after {
  background-color: var(--switch-circle-color-disabled);
}
.btn__toggle__switch input[type=checkbox]:disabled:checked + span::before {
  border-color: var(--switch-circle-line-color-disabled);
}
.btn__toggle__switch .btn__toggle__switch__label {
  color: var(--switch-text-color);
}
.btn__toggle__switch.small {
  --switch-width: 1.75rem;
  --switch-height: 1rem;
  --switch-circle-size: 0.875rem;
  --switch-circle-offset: 0.063rem;
  --switch-circle-line-size: 0.0625rem;
}
.btn__toggle__switch.small input[type=checkbox] + span {
  width: var(--switch-width);
  height: var(--switch-height);
}
.btn__toggle__switch.small input[type=checkbox] + span::before {
  width: var(--switch-circle-size);
  height: var(--switch-circle-size);
  position: absolute;
  top: var(--switch-circle-offset);
  left: 0.125rem;
}
.btn__toggle__switch.small input[type=checkbox] + span::after {
  position: absolute;
  top: var(--switch-circle-offset);
  right: var(--switch-circle-offset);
}
.btn__toggle__switch.small input[type=checkbox]:checked + span::before {
  transform: translate(0.688rem, 0);
}
.btn__toggle__switch__list {
  padding: 0.5rem 0.625rem;
}
.btn__toggle__switch__list li {
  display: list-item;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height: 2.25rem;
  line-height: 2.25rem;
}
.btn__toggle__switch__list .btn__toggle__switch input[type=checkbox] + span {
  left: inherit;
}

/*
 * @file components/_badge.scss
 * @description 뱃지 디자인
 * @version 1.0
 */
/*
 * 기본
 *
 * [색상별 의미]
 * gray - 새로 생성된 항목 (접수)
 * blue - 작업 진행중
 * orange - 보류 상태
 * green - 문제 해결 (완료)
 * red - 심각/종결/취소
 * cyan - 부가기능 (위임)
 */
/*
 * 심각도
 * 심각도 뱃지는 테마에 따라 색상이 변경되지 않는다. 전사 소프트웨어 공통 색상이다.
 * 폰트 색상만 테마에 따라 변경된다.
 */
/*
 * 숫자
 * 숫자 뱃지는 테마에 따라 색상/폰트가 변경되지 않는다.
 */
/*
 * 긴급도
 */
/*
 * 상태
 */
.badge--l {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 0.188rem;
  background-color: transparent;
  font-weight: 400;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.1875rem 0.625rem;
}
.badge--l.gray {
  background-color: var(--badge-fill-bg-gray);
  color: var(--color-gray-050);
}
.badge--l.gray [class*=ic-] {
  display: block;
  background: var(--color-gray-050);
  pointer-events: none;
}
.badge--l.blue {
  background-color: var(--badge-fill-bg-blue);
  color: var(--color-blue-050);
}
.badge--l.blue [class*=ic-] {
  display: block;
  background: var(--color-blue-050);
  pointer-events: none;
}
.badge--l.orange {
  background-color: var(--badge-fill-bg-orange);
  color: var(--color-orange-050);
}
.badge--l.orange [class*=ic-] {
  display: block;
  background: var(--color-orange-050);
  pointer-events: none;
}
.badge--l.green {
  background-color: var(--badge-fill-bg-green);
  color: var(--color-vivid-green-060);
}
.badge--l.green [class*=ic-] {
  display: block;
  background: var(--color-vivid-green-060);
  pointer-events: none;
}
.badge--l.red {
  background-color: var(--badge-fill-bg-red);
  color: var(--color-red-050);
}
.badge--l.red [class*=ic-] {
  display: block;
  background: var(--color-red-050);
  pointer-events: none;
}
.badge--l.cyan {
  background-color: var(--badge-fill-bg-cyan);
  color: var(--color-cyan-060);
}
.badge--l.cyan [class*=ic-] {
  display: block;
  background: var(--color-cyan-060);
  pointer-events: none;
}
.badge {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 0.188rem;
  background-color: transparent;
  font-weight: 400;
  height: 1.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.5rem;
}
.badge.gray {
  background-color: var(--badge-fill-bg-gray);
  color: var(--color-gray-050);
}
.badge.gray [class*=ic-] {
  display: block;
  background: var(--color-gray-050);
  pointer-events: none;
}
.badge.blue {
  background-color: var(--badge-fill-bg-blue);
  color: var(--color-blue-050);
}
.badge.blue [class*=ic-] {
  display: block;
  background: var(--color-blue-050);
  pointer-events: none;
}
.badge.orange {
  background-color: var(--badge-fill-bg-orange);
  color: var(--color-orange-050);
}
.badge.orange [class*=ic-] {
  display: block;
  background: var(--color-orange-050);
  pointer-events: none;
}
.badge.green {
  background-color: var(--badge-fill-bg-green);
  color: var(--color-vivid-green-060);
}
.badge.green [class*=ic-] {
  display: block;
  background: var(--color-vivid-green-060);
  pointer-events: none;
}
.badge.red {
  background-color: var(--badge-fill-bg-red);
  color: var(--color-red-050);
}
.badge.red [class*=ic-] {
  display: block;
  background: var(--color-red-050);
  pointer-events: none;
}
.badge.cyan {
  background-color: var(--badge-fill-bg-cyan);
  color: var(--color-cyan-060);
}
.badge.cyan [class*=ic-] {
  display: block;
  background: var(--color-cyan-060);
  pointer-events: none;
}
.badge--s {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 0.188rem;
  background-color: transparent;
  font-weight: 400;
  height: 1.125rem;
  font-size: 0.625rem;
  padding: 0.125rem 0.375rem;
}
.badge--s.gray {
  background-color: var(--badge-fill-bg-gray);
  color: var(--color-gray-050);
}
.badge--s.gray [class*=ic-] {
  display: block;
  background: var(--color-gray-050);
  pointer-events: none;
}
.badge--s.blue {
  background-color: var(--badge-fill-bg-blue);
  color: var(--color-blue-050);
}
.badge--s.blue [class*=ic-] {
  display: block;
  background: var(--color-blue-050);
  pointer-events: none;
}
.badge--s.orange {
  background-color: var(--badge-fill-bg-orange);
  color: var(--color-orange-050);
}
.badge--s.orange [class*=ic-] {
  display: block;
  background: var(--color-orange-050);
  pointer-events: none;
}
.badge--s.green {
  background-color: var(--badge-fill-bg-green);
  color: var(--color-vivid-green-060);
}
.badge--s.green [class*=ic-] {
  display: block;
  background: var(--color-vivid-green-060);
  pointer-events: none;
}
.badge--s.red {
  background-color: var(--badge-fill-bg-red);
  color: var(--color-red-050);
}
.badge--s.red [class*=ic-] {
  display: block;
  background: var(--color-red-050);
  pointer-events: none;
}
.badge--s.cyan {
  background-color: var(--badge-fill-bg-cyan);
  color: var(--color-cyan-060);
}
.badge--s.cyan [class*=ic-] {
  display: block;
  background: var(--color-cyan-060);
  pointer-events: none;
}
.badge--xs {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 0.188rem;
  background-color: transparent;
  font-weight: 400;
  height: 1rem;
  font-size: 0.625rem;
  padding: 0.0625rem 0.25rem;
}
.badge--xs.gray {
  background-color: var(--badge-fill-bg-gray);
  color: var(--color-gray-050);
}
.badge--xs.gray [class*=ic-] {
  display: block;
  background: var(--color-gray-050);
  pointer-events: none;
}
.badge--xs.blue {
  background-color: var(--badge-fill-bg-blue);
  color: var(--color-blue-050);
}
.badge--xs.blue [class*=ic-] {
  display: block;
  background: var(--color-blue-050);
  pointer-events: none;
}
.badge--xs.orange {
  background-color: var(--badge-fill-bg-orange);
  color: var(--color-orange-050);
}
.badge--xs.orange [class*=ic-] {
  display: block;
  background: var(--color-orange-050);
  pointer-events: none;
}
.badge--xs.green {
  background-color: var(--badge-fill-bg-green);
  color: var(--color-vivid-green-060);
}
.badge--xs.green [class*=ic-] {
  display: block;
  background: var(--color-vivid-green-060);
  pointer-events: none;
}
.badge--xs.red {
  background-color: var(--badge-fill-bg-red);
  color: var(--color-red-050);
}
.badge--xs.red [class*=ic-] {
  display: block;
  background: var(--color-red-050);
  pointer-events: none;
}
.badge--xs.cyan {
  background-color: var(--badge-fill-bg-cyan);
  color: var(--color-cyan-060);
}
.badge--xs.cyan [class*=ic-] {
  display: block;
  background: var(--color-cyan-060);
  pointer-events: none;
}

.badge--number--l {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 6.1875rem;
  background: #DFE2EC;
  color: #1C1E2B;
  font-weight: 400;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.1875rem 0.5rem;
}
.badge--number--l.red {
  background: #DE3412;
  color: #FFFFFF;
  font-weight: 700;
}
.badge--number {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 6.1875rem;
  background: #DFE2EC;
  color: #1C1E2B;
  font-weight: 400;
  height: 1.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}
.badge--number.red {
  background: #DE3412;
  color: #FFFFFF;
  font-weight: 700;
}
.badge--number--s {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 6.1875rem;
  background: #DFE2EC;
  color: #1C1E2B;
  font-weight: 400;
  height: 1rem;
  font-size: 0.75rem;
  padding: 0.0625rem 0.3125rem;
}
.badge--number--s.red {
  background: #DE3412;
  color: #FFFFFF;
  font-weight: 700;
}

.badge--severity--00 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #54CD3E;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(84, 205, 62, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--00 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #54CD3E;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--00 > .badge--severity--content {
  color: var(--color-gray-110);
}
.badge--severity--10 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #39D2E9;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(57, 210, 233, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--10 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #39D2E9;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--10 > .badge--severity--content {
  color: var(--color-gray-110);
}
.badge--severity--20 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #FFBD22;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(255, 189, 34, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--20 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #FFBD22;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--20 > .badge--severity--content {
  color: var(--color-gray-110);
}
.badge--severity--30 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #FF9130;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(255, 145, 48, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--30 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #FF9130;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--30 > .badge--severity--content {
  color: var(--color-gray-110);
}
.badge--severity--40 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #C54CE8;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(197, 76, 232, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--40 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #C54CE8;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--40 > .badge--severity--content {
  color: var(--color-gray-110);
}
.badge--severity--50 {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border: 0.0625rem solid #F43B51;
  border-radius: 62.4375rem;
  font-weight: 400;
  font-size: 0.75rem;
  background-color: rgba(244, 59, 81, 0.2);
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--severity--50 > [class*=ic-] {
  width: 0.5rem;
  height: 0.5rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.5rem;
  mask-size: 0.5rem;
  background: #F43B51;
  margin-right: 0.25rem;
  border-radius: 0.5rem;
}
.badge--severity--50 > .badge--severity--content {
  color: var(--color-gray-110);
}

.badge--priority--low {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-priority-bg-low);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--priority--low > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-blue-050);
  margin-right: 0.25rem;
}
.badge--priority--low > .badge--priority--content {
  color: var(--color-gray-110);
}
.badge--priority--medium {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-priority-bg-medium);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--priority--medium > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-vivid-green-050);
  margin-right: 0.25rem;
}
.badge--priority--medium > .badge--priority--content {
  color: var(--color-gray-110);
}
.badge--priority--high {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-priority-bg-high);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--priority--high > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-red-050);
  margin-right: 0.25rem;
}
.badge--priority--high > .badge--priority--content {
  color: var(--color-gray-110);
}

.badge--save--saved {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-status-bg-saved);
  color: var(--color-gray-110);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--save--saved > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-vivid-green-050);
  margin-right: 0.25rem;
}
.badge--save--unsaved {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-status-bg-unsaved);
  color: var(--color-gray-110);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--save--unsaved > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-red-050);
  margin-right: 0.25rem;
}
.badge--save--pending {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-status-bg-pending);
  color: var(--color-gray-110);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--save--pending > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-orange-050);
  margin-right: 0.25rem;
}
.badge--save--applied {
  display: inline-flex;
  align-items: center;
  overflow: visible;
  user-select: none;
  white-space: nowrap;
  border-radius: 62.4375rem;
  background-color: var(--badge-status-bg-applied);
  color: var(--color-gray-110);
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
}
.badge--save--applied > [class*=ic-] {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 0.875rem;
  mask-size: 0.875rem;
  background: var(--color-vivid-green-050);
  margin-right: 0.25rem;
}

/*
 *
 *
 * @description tui-calendar 라이브러리 재디자인
 * @version 1.0
 */
:root {
  --data-modal-width: 506px;
  --data-modal-height: 375px;
  --calendar-bg-hover: var(--color-blue-000);
  --calendar-text-empty: var(--color-gray-070);
  --calendar-bg-color-hover: var(--color-blue-000);
  --calendar-empty-text-color: var(--color-gray-070);
  --calendar-text-color: var(--color-gray-090);
  --calendar-text-color-secondary: var(--color-gray-080);
  --calendar-text-color-accent: var(--color-blue-050);
  --calendar-prev-text-color: var(--color-gray-050);
  --calendar-row-bg-today: var(--color-gray-003);
  --icon-bg-color: var(--color-gray-050);
  --cell-bg-color: transparent;
  --cell-bg-color-hover: var(--color-blue-000);
  --cell-bg-color-focus: var(--color-blue-000);
  --cell-bg-color-active: var(--color-blue-000);
  --cell-bg-color-selected: var(--color-blue-000);
  --cell-bg-color-today: var(--color-gray-005);
  --cell-line-color: transparent;
  --cell-line-color-hover: var(--color-blue-000);
  --cell-line-color-focus: var(--color-blue-030);
  --cell-line-color-active: var(--color-blue-050);
  --cell-line-color-selected: var(--color-blue-050);
  --cell-line-color-today: var(--color-gray-005);
  --calendar-item-icon-bg-color: var(--color-gray-070);
}

.calendar {
  /* 캘린더 목록(내 캘린더/공유 캘린더) */
  /* 한 줄 아이템(체크 + 색상 + 이름) */
  /* 체크박스 */
  /* 이름 */
}
.calendar__list {
  flex: 0 0 auto !important;
}
.calendar__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
  padding: 0.25rem 0.25rem 0.25rem 1.5rem;
  height: 1.5rem;
  cursor: pointer;
  user-select: none;
  border-radius: 0.188rem;
}
.calendar__item-action span {
  background: var(--calendar-item-icon-bg-color) importnat;
}
.calendar__item:hover {
  background-color: var(--calendar-bg-color-hover);
}
.calendar__check {
  appearance: none;
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  margin: 0;
  flex: 0 0 auto;
  background: var(--color-gray-000);
  border: 0.125rem solid var(--cal-color);
  border-radius: 0.25rem;
  display: inline-block;
  position: relative;
  cursor: pointer;
}
.calendar__check::after {
  content: "";
  position: absolute;
  left: 0.3125rem;
  top: 0.125rem;
  width: 0.25rem;
  height: 0.5rem;
  border-right: 0.125rem solid #fff;
  border-bottom: 0.125rem solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform 120ms ease-in-out;
}
.calendar__check:checked {
  background: var(--cal-color);
  border-color: var(--cal-color);
}
.calendar__check:checked::after {
  transform: rotate(45deg) scale(1);
}
.calendar__check:focus-visible {
  outline: 0.1875rem solid rgba(59, 130, 246, 0.35);
  outline-offset: 0.125rem;
}
.calendar__check:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.calendar__name {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--calendar-text-color-secondary);
}
.calendar .btn__toggle__single .text {
  display: inline-block;
  padding: 0.563rem 1rem;
  pointer-events: none;
  line-height: 0.875rem;
}
.calendar__menu {
  display: grid;
  grid-template-columns: 28rem auto;
  column-gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.calendar__menu .calendar__move {
  border-radius: 50%;
}
.calendar__menu .calendar__move .ic-arrow-right {
  background: var(--calendar-row-bg-today);
}
.calendar__menu .calendar__move .ic-arrow-right:hover {
  background: var(--calendar-bg-color-hover);
}
.calendar__menu .calendar__move .move--prev {
  transform: rotate(180deg);
}
.calendar__menu .calendar__render-range-text {
  width: max-content;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 130%;
}
.calendar__view {
  height: calc(100vh - 74px - 87px);
  /* =========================
   * See more popup
   * ========================= */
  /* =========================
   * Task View
   * ========================= */
}
.calendar__view.on {
  visibility: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
.calendar__view.off {
  visibility: hidden;
  position: absolute;
}
.calendar__view .toastui-calendar-layout {
  /* =========================
   * Month View
   * ========================= */
  /* =========================
   * Week / Day Header
   * ========================= */
  /* =========================
   * Week / Day Panels
   * ========================= */
  /* =========================
   * Scrollbar / Layout Area
   * ========================= */
  /* =========================
   * Time grid (left column)
   * ========================= */
}
.calendar__view .toastui-calendar-layout .toastui-calendar-day-names {
  padding: 0 !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month .toastui-calendar-day-name-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid {
  border-right: 0.063rem solid var(--skeleton-line-color);
  border-left: 0.063rem solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid:last-of-type {
  border-bottom: 0.063rem solid var(--skeleton-line-color);
  border-bottom-left-radius: 0.188rem;
  border-bottom-right-radius: 0.188rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid:last-of-type .toastui-calendar-weekday-grid {
  border-bottom-left-radius: 0.188rem;
  border-bottom-right-radius: 0.188rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header {
  position: relative;
  height: 1.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date {
  position: absolute;
  left: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem !important;
  font-weight: 400;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader {
  display: inline-flex;
  align-items: center;
  justify-content: left;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  line-height: 1;
  font-size: 0.75rem;
  font-weight: 400;
  border: 1px solid transparent;
  background: transparent;
  user-select: none;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-date:hover {
  background: var(--cell-bg-color-hover);
  border-color: var(--cell-line-color-hover);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-date:focus {
  background: var(--cell-bg-color-focus);
  border-color: var(--cell-line-color-focus);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-date:active {
  background: var(--cell-bg-color-active);
  border-color: var(--cell-line-color-active);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-dateselected {
  background: var(--cell-bg-color-seleted);
  border-color: var(--cell-line-color-seleted);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-date .toastui-calendar-template-monthGridHeader .calendar__month-date.calendar__month-date--today {
  background: var(--cell-bg-color-today);
  border-color: var(--cell-line-color-today);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .toastui-calendar-grid-cell-more-events {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  background: transparent;
  border: 0;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-grid-cell-header .calendar__more-text {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--calendar-text-color-accent);
  white-space: nowrap;
  padding-right: 0.25rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-weekday-schedule-title {
  font-size: 0.75rem;
  font-weight: 400;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-weekday-schedule-time {
  color: var(--calendar-text-color-secondary);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-weekday-schedule-time.prev {
  color: var(--calendar-prev-text-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-today .toastui-calendar-weekday-grid-date-decorator {
  font-weight: 600;
  background: transparent;
  color: inherit;
  border-radius: 0;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-template-allday {
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  display: flex;
  height: 20px !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-month-daygrid .toastui-calendar-weekday-event:not(:has(.toastui-calendar-weekday-event-dot)) {
  margin-left: 0rem !important;
  margin-right: 0.25rem !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week {
  border-top: 0 !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names {
  border: 0 !important;
  border-top-left-radius: 0.188rem;
  border-top-right-radius: 0.188rem;
  overflow-y: hidden !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names .toastui-calendar-day-name-container {
  height: 100%;
  margin-right: 1rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container .toastui-calendar-template-weekDayName,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names .toastui-calendar-day-name-container .toastui-calendar-template-weekDayName {
  height: 31px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container .calendar__week-dayname,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names .toastui-calendar-day-name-container .calendar__week-dayname {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 400;
  scrollbar-gutter: stable;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container .calendar__week-daynum,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names .toastui-calendar-day-name-container .calendar__week-daynum {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-week-view-day-names .toastui-calendar-day-name-container .calendar__week-daynum--today,
.calendar__view .toastui-calendar-layout .toastui-calendar-day-view-day-names .toastui-calendar-day-name-container .calendar__week-daynum--today {
  background: var(--cell-bg-color-today);
  border-radius: 50%;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-allday {
  border-right: 1px solid var(--skeleton-line-color);
  border-left: 1px solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-allday .toastui-calendar-panel-title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-allday .toastui-calendar-template-alldayTitle {
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--calendar-prev-text-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-allday .toastui-calendar-template-timegridNowIndicatorLabel {
  display: none;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-panel-resizer {
  height: 5px !important;
  border-right: 1px solid var(--skeleton-line-color);
  border-left: 1px solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-time {
  min-height: 0;
  overflow: auto;
  border-right: 1px solid var(--skeleton-line-color);
  border-left: 1px solid var(--skeleton-line-color);
  border-bottom: 1px solid var(--skeleton-line-color);
  border-bottom-left-radius: 0.188rem;
  border-bottom-right-radius: 0.188rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-vlayout-area {
  border-right: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-vlayout-area .toastui-calendar-daygrid-layout {
  border-left: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-vlayout-area .toastui-calendar-time-schedule,
.calendar__view .toastui-calendar-layout .toastui-calendar-vlayout-area .toastui-calendar-weekday-schedule {
  font-size: 0.75rem;
  font-weight: 400;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-vlayout-area .toastui-calendar-weekday-schedule {
  margin: 0 0.625rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-timegrid-container {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-timegrid-container .toastui-calendar-timegrid-timezone {
  border-left: 0.0625rem solid var(--skeleton-line-color);
  border-bottom: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-timegrid-container .toastui-calendar-timegrid-timezone .toastui-calendar-timegrid-hour span {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--calendar-prev-text-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-timegrid-container .toastui-calendar-timegrid-timezone .toastui-calendar-timegrid-hourmarker-time {
  text-align: center;
  padding-right: 0.625rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-timegrid-container .toastui-calendar-timegrid-right {
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border-bottom: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view .toastui-calendar-layout .toastui-calendar-time-date-schedule-block-wrap {
  margin-left: 0.625rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-time-guide-resize {
  padding: 0 0.625rem;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-floating-layer {
  z-index: 1000 !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-grid-selection {
  background: inherit !important;
  --selection-border: var(--cell-line-color-selected);
  border: 0.0625rem solid var(--selection-border) !important;
}
.calendar__view .toastui-calendar-layout .toastui-calendar-grid-selection.is-prev-day {
  --selection-border: color-mix(in srgb, var(--color-blue-050) 50%, transparent);
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more {
  width: 14.875rem;
  min-width: 14.875rem;
  border-radius: 0.563rem;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more .toastui-calendar-month-more-list {
  padding: 0.75rem 1rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  box-sizing: border-box;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container.calendar__more-popup--ready {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .calendar__more-title-date,
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .calendar__more-title-day {
  width: 1.75rem;
  text-align: center;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-popup-close {
  top: 4px !important;
  right: 8px !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event {
  position: relative;
  overflow: hidden !important;
  margin-top: 0 !important;
  margin-inline: 0 !important;
  border-radius: 0.25rem !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-past, .calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-both {
  padding-left: 0.75rem !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-future, .calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-both {
  padding-right: 0.75rem !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-future {
  clip-path: polygon(0 0, calc(100% - 0.5rem) 0, 99.2% 34%, 100% 50%, 99.2% 66%, calc(100% - 0.5rem) 100%, 0 100%);
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-past {
  clip-path: polygon(0 50%, 0.8% 34%, 0.5rem 0, 100% 0, 100% 100%, 0.5rem 100%, 0.8% 66%);
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event.event-continued-both {
  clip-path: polygon(0 50%, 0.8% 34%, 0.5rem 0, calc(100% - 0.5rem) 0, 99.2% 34%, 100% 50%, 99.2% 66%, calc(100% - 0.5rem) 100%, 0.5rem 100%, 0.8% 66%);
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event-title {
  margin-inline: 0 !important;
}
.calendar__view .toastui-calendar-floating-layer .toastui-calendar-see-more-container .toastui-calendar-weekday-event-block {
  padding: 0 !important;
}
.calendar__view--task {
  background: white;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.calendar__view--task-scroll {
  border-top: 0.0625rem solid var(--skeleton-line-color);
  border-right: 0.0625rem solid var(--skeleton-line-color);
  border-left: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view--task-scroll .calendar__rowGroup {
  display: grid;
  grid-template-columns: 6.25rem auto;
  grid-template-rows: minmax(2.5rem, auto);
  border-bottom: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view--task-scroll .calendar__rowGroup.prev .calendar__cell {
  color: var(--calendar-prev-text-color);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__rowHead {
  display: flex;
  width: 6.25rem;
  min-height: 2.25rem;
  padding-left: 0.75rem;
  border-right: 0.0625rem solid var(--skeleton-line-color);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__rowHead .calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--calendar-text-color);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__rowHead .calendar__day.today {
  background: var(--cell-bg-color-today);
  border-radius: 50%;
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__rowHead .calendar__weekDay {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--calendar-text-color);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__rowHead .calendar__weekDay.today {
  color: var(--calendar-text-color-accent);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__row {
  display: grid;
  align-items: center;
  row-gap: 0.25rem;
  padding: 0.3125rem 0.75rem;
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__row.today {
  background-color: var(--calendar-row-bg-today);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__cell {
  display: grid;
  grid-template-columns: 0.5rem 9.0625rem auto;
  grid-template-rows: 1fr;
  column-gap: 0.375rem;
  height: 1.625rem;
  padding: 0 0.5rem;
  color: var(--calendar-text-color);
  font-weight: 400;
  cursor: pointer;
  border-radius: 0.375rem;
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__cell:hover {
  background-color: var(--calendar-bg-color-hover);
}
.calendar__view--task-scroll .calendar__rowGroup .calendar__cell--selected {
  background-color: var(--calendar-row-bg-today);
}
.calendar__view--task .empty-calendar {
  height: calc(100vh - 74px - 87px) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
  overflow: hidden;
}
.calendar__view--task .empty-calendar .ic-no-data {
  width: 16.25rem;
  height: 16.25rem;
}
.calendar__view--task .empty-calendar .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--calendar-empty-text-color);
}
.calendar__block .tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid-line {
  cursor: pointer;
}
.calendar__block .tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-date {
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  margin: 0;
}
.calendar__block .tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-exceed-in-month {
  pointer-events: none;
}
.calendar__block .tui-full-calendar-month-week-item .tui-full-calendar-weekday-grid-line .tui-full-calendar-weekday-grid-header .tui-full-calendar-weekday-grid-more-schedules {
  display: block;
  height: 1rem;
  line-height: 1rem;
  padding: 0;
  float: none;
  margin: 0.1875rem auto;
  font-size: 0.625rem;
  font-weight: 500;
  color: var(--calendar-prev-text-color);
}
.calendar__color--round {
  flex-shrink: 0;
  border-radius: 50%;
  width: 0.5rem;
  height: 0.5rem;
}

.calendar-component {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.calendar-component__nav {
  flex: 0 0 auto;
}
.calendar-component__view.calendar__view {
  flex: 1 1 auto;
  min-height: 0;
  height: auto !important;
}
.calendar-component__view.calendar__view.on {
  height: 100% !important;
}
.calendar-component__view.calendar__view .toastui-calendar-layout {
  height: 100% !important;
}
.calendar-component + .calendar__view--task,
.calendar-component .calendar__view--task {
  display: none !important;
}
.calendar-component .calendar__render-range-text {
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 130%;
}
.calendar-component--month .toastui-calendar-day-names {
  height: 20px !important;
  min-height: 20px;
}
.calendar-component--month .toastui-calendar-day-names .toastui-calendar-day-name-item,
.calendar-component--month .toastui-calendar-day-names .toastui-calendar-template-monthDayName {
  height: 20px !important;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calendar-component--month .toastui-calendar-month .toastui-calendar-month-daygrid {
  height: calc(100% - 20px) !important;
}
.calendar-component--week .toastui-calendar-day-name-container {
  margin-right: 16px;
}
.calendar-component--week .toastui-calendar-week-view-day-names {
  height: 31px !important;
  margin-right: 10px;
}
.calendar-component--week .toastui-calendar-week-view-day-names,
.calendar-component--week .toastui-calendar-template-weekDayName {
  height: 31px !important;
}
.calendar-component--week .calendar__week-dayname,
.calendar-component--week .calendar__week-daynum {
  width: 31px;
  height: 31px;
}
.calendar-component--week .toastui-calendar-time {
  height: calc(100% - 107px) !important;
}
.calendar-component--day .toastui-calendar-day-name-container {
  margin-right: 16px;
}
.calendar-component--day .toastui-calendar-day-names,
.calendar-component--day .toastui-calendar-day-view-day-names {
  height: 31px !important;
}
.calendar-component--day .toastui-calendar-time {
  height: calc(100% - 107px) !important;
}

.modal .modal__dialog.calendar__modal--register {
  width: var(--data-modal-width);
  margin: 0;
}
.modal .modal__dialog.calendar__modal--register.document {
  margin: auto;
  border-top-color: transparent;
}
.modal .modal__dialog.calendar__modal--register.document .modal__dialog__body {
  height: calc(var(--data-modal-height) - 3.75rem - 4.375rem);
  padding: 1.25rem;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body {
  height: calc(var(--data-modal-height) - 3.75rem);
  padding: 2rem 1rem 0 1rem;
  scrollbar-width: none;
  border-top: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.563rem 0.563rem 0 0;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body::-webkit-scrollbar {
  display: none;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .select__box__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar-color-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.5rem;
  border-radius: 9999px;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main {
  gap: 0.625rem;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.3125rem;
  background: var(--icon-bg-color);
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main > .flex__row {
  min-width: 0;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .field__control {
  margin-left: 0.5rem;
  width: 100%;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__repeat .select__box, .modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__repeat,
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__date .select__box,
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__date {
  width: 10rem;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__calendar {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  overflow: hidden;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__calendar .select__box {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__calendar .select__box__label {
  display: block;
  width: 100%;
  min-width: 0;
  padding-right: 2rem;
  box-sizing: border-box;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .calendar__modal--register__main .schedule__list {
  width: 100%;
  min-width: 0;
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__body .table__box {
  margin-left: 2rem;
  width: calc(100% - 2rem);
}
.modal .modal__dialog.calendar__modal--register .modal__dialog__footer {
  padding: 0.625rem 1.25rem;
}
.modal .modal__dialog.calendar__modal--register textarea {
  resize: none;
}
.modal .modal__dialog.calendar__modal--repeat {
  width: 26.875rem;
}
.modal .modal__dialog.calendar__modal--repeat .modal__dialog__body {
  padding: 1rem 1rem 1rem 1rem;
  scrollbar-width: none;
}
.modal .modal__dialog.calendar__modal--repeat .modal__dialog__body::-webkit-scrollbar {
  display: none;
}
.modal .modal__dialog.calendar__modal--repeat .modal__dialog__body .calendar__modal--repeat__main {
  gap: 0.5rem;
}
.modal .modal__dialog.calendar__modal--repeat .modal__dialog__footer {
  padding: 0.625rem 1.25rem;
}
.modal .modal__dialog.calendar__modal--detail {
  width: var(--data-modal-width);
  margin: 0;
  border-radius: 0.563rem;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body {
  height: var(--data-modal-height);
  padding: 0.5rem 1.25rem 1.25rem 1.25rem;
  scrollbar-width: none;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body::-webkit-scrollbar {
  display: none;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main {
  position: relative;
  gap: 0.5rem;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .field__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.3125rem;
  background: var(--icon-bg-color);
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .field__control {
  margin-left: 0.5rem;
  width: 100%;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .flex__column {
  gap: 1rem;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .btn__list {
  margin-left: auto;
  margin-right: 2rem;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .btn__remove {
  position: absolute;
  right: -0.625rem;
  z-index: 10;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .calendar-color-square {
  margin: 0.4375rem;
  width: 1rem;
  height: 1rem;
  border-radius: 0.188rem;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--calendar-text-color);
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__date, .modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__calendar, .modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__repeat {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--calendar-text-color);
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__owner, .modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__documentNo, .modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__ciNo {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--calendar-text-color-secondary);
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .schedule__owner--none {
  display: none !important;
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__body .calendar__modal--detail__main .table__box {
  margin-left: 2rem;
  width: calc(100% - 2rem);
}
.modal .modal__dialog.calendar__modal--detail .modal__dialog__footer {
  padding: 0.625rem 1.25rem;
}
.modal .modal__dialog.calendar__modal--detail textarea {
  resize: none;
}

/*
 * @file components/_card.scss
 * @description 카드 / 스켈레톤 디자인
 * @version 1.0
 */
.skeleton {
  background-color: var(--skeleton-bg-color);
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.563rem;
}

.card {
  width: var(--data-width, auto);
  background-color: var(--card-bg-color);
  border: 0.0625rem solid var(--card-line-color);
  border-radius: 0.375rem;
}

.item-box {
  background-color: var(--item-box-bg-color);
  border: 0.0625rem solid var(--item-box-line-color);
  border-radius: 0.188rem;
}

/*
 * @file components/_card-checkbox.scss
 * @description 카드형태의 checkbox에 사용되는 scss
 * @version 1.0
 */
.card-checkbox {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-checkbox-gap);
  max-height: var(--data-height);
  overflow-y: auto;
  /* 유효성 검증용 checkbox 숨김 */
  /* 유효성 검증 실패 */
  /* =========================
     Tag 버전
  ========================= */
}
.card-checkbox > .valid-checker {
  display: none;
}
.card-checkbox:has(.valid-checker.error) {
  border-color: var(--line-color-error);
}
.card-checkbox .card-checkbox__item {
  border: 0.063rem solid var(--card-checkbox-line-color);
  border-radius: 0.375rem;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  column-gap: 1rem;
  align-items: center;
  height: 4.75rem;
  padding: 0.75rem;
  background: var(--card-checkbox-bg-color);
  cursor: pointer;
  position: relative;
  /* =========================
     좌측 체크박스 (세로 중앙)
  ========================= */
  /* =========================
     우측 텍스트 영역
  ========================= */
}
.card-checkbox .card-checkbox__item:hover {
  background-color: var(--card-checkbox-bg-color-hover);
  border-color: var(--card-checkbox-line-color-hover);
}
.card-checkbox .card-checkbox__item:focus {
  background-color: var(--card-checkbox-bg-color-focus);
  border-color: var(--card-checkbox-line-color-focus);
}
.card-checkbox .card-checkbox__item:active {
  background-color: var(--card-checkbox-bg-color-active);
  border-color: var(--card-checkbox-line-color-active);
}
.card-checkbox .card-checkbox__item.selected {
  background-color: var(--card-checkbox-bg-color-selected);
  border-color: var(--card-checkbox-line-color-selected);
}
.card-checkbox .card-checkbox__item .card-checkbox__check {
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-checkbox .card-checkbox__item .card-checkbox__check input[type=checkbox] {
  position: absolute;
  opacity: 0;
}
.card-checkbox .card-checkbox__item .card-checkbox__check input[type=checkbox] + .check-ui {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}
.card-checkbox .card-checkbox__item .card-checkbox__check input[type=checkbox] + .check-ui::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  border: 1.5px solid var(--card-checkbox-check-line-color);
  background: var(--card-checkbox-check-bg-color);
}
.card-checkbox .card-checkbox__item .card-checkbox__check input[type=checkbox]:checked + .check-ui::before {
  background: var(--card-checkbox-check-bg-color-selected);
  border-color: var(--card-checkbox-check-line-color-selected);
}
.card-checkbox .card-checkbox__item .card-checkbox__check input[type=checkbox]:checked + .check-ui::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 2px solid var(--card-checkbox-check-icon-color);
  border-bottom: 2px solid var(--card-checkbox-check-icon-color);
  transform: translate(-50%, -60%) rotate(-45deg);
}
.card-checkbox .card-checkbox__item .card-checkbox__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  row-gap: 0.25rem;
  min-width: 0;
}
.card-checkbox .card-checkbox__item .card-checkbox__title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--card-checkbox-title-color);
}
.card-checkbox .card-checkbox__item .card-checkbox__description {
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--card-checkbox-description-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-checkbox--s .card-checkbox__item {
  height: 2rem;
  padding: 0 0.75rem;
}
.card-checkbox--tag {
  display: flex;
  gap: var(--card-checkbox-gap-s);
  flex-wrap: wrap;
}
.card-checkbox--tag .card-checkbox__item {
  border-radius: 3.125rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  height: 2rem;
  padding: 0 0.75rem;
  background: var(--card-checkbox-tag-bg-color);
  border-color: var(--card-checkbox-tag-bg-color);
  font-size: 0.875rem;
  color: var(--card-checkbox-tag-text-color);
  cursor: pointer;
  user-select: none;
}
.card-checkbox--tag .card-checkbox__item input[type=checkbox] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.card-checkbox--tag .card-checkbox__item:hover {
  background: var(--card-checkbox-tag-bg-color-hover);
  border-color: var(--card-checkbox-tag-bg-color-hover);
}
.card-checkbox--tag .card-checkbox__item:focus {
  border: 0.063rem solid var(--card-checkbox-tag-line-color-focus);
  background: var(--card-checkbox-tag-bg-color-focus);
  color: var(--card-checkbox-tag-text-color);
}
.card-checkbox--tag .card-checkbox__item:active {
  border: 0.063rem solid var(--card-checkbox-tag-line-color-active);
  background: var(--card-checkbox-tag-bg-color-active);
  color: var(--card-checkbox-tag-text-color);
}
.card-checkbox--tag .card-checkbox__item.selected {
  border: 0.063rem solid var(--card-checkbox-tag-line-color-selected);
  background: var(--card-checkbox-tag-bg-color-selected);
  color: var(--card-checkbox-tag-text-color-selected);
}

.card-radio {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--card-checkbox-gap);
}
.card-radio .card-radio__item {
  width: auto;
  padding: 0.75rem;
}
.card-radio .card-radio__item__title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--title-color);
}
.card-radio .card-radio__item__preview {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--message-color);
  min-height: 1rem;
}
.card-radio .card-radio__item__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/*
 * @file components/_chart.scss
 * @description Highcharts custom design 을 위해 추가됨
 * @version 1.0
 */
.chart {
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
}
.chart__inner {
  padding: 0.75rem;
}
.chart__content {
  width: 100%;
  height: 14.125rem;
}
.chart__content__container {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 100% !important;
}
.chart__content__container--title {
  padding: 0.5rem 0;
  color: var(--title-color);
}
.chart__content__container--content {
  height: 11.875rem;
}

.counting__box {
  --counting-item-bg-color: var(--color-gray-005);
  --counting-divider-color: var(--color-gray-010);
  --counting-total-bg-color: var(--color-blue-000);
  --counting-title-color: var(--color-gray-070);
  --counting-counter-color: var(--color-gray-090);
  --counting-counter-active-color: var(--color-gray-090);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.counting__box__row {
  display: flex;
  align-items: stretch;
}
.counting__box__row:not(:last-child) {
  margin-bottom: 0.5rem;
}
.counting__box__row:not(.total) {
  flex: 1;
  height: 100%;
}
.counting__box__row.total {
  display: flex;
  flex: 0 0 3.125rem;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  height: 3.125rem;
  padding-top: 0.5rem;
}
.counting__box__row.total .total__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  border: none;
}
.counting__box__row.total .total__row::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 0.0625rem;
  background-color: var(--counting-divider-color);
  z-index: 10;
}
.counting__box__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 3.766rem;
  height: 100%;
  border-top: 0.25rem solid var(--counting-item-bg-color);
  border-radius: 0.188rem;
  background-color: var(--counting-item-bg-color);
}
.counting__box__item:not(:last-child) {
  margin-right: 0.5rem;
}
.counting__box__item.total {
  position: relative;
  background-color: var(--counting-total-bg-color);
  border-color: var(--counting-total-bg-color);
  font-weight: 700;
  margin-left: 0.5rem;
  z-index: 1;
}
.counting__box__item.total:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  width: 0.0625rem;
  height: 100%;
  background-color: var(--counting-divider-color);
  z-index: 10;
}
.counting__box__item:not(.total__row) .counting__box__item--title {
  width: 100%;
}
.counting__box__item--title {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  text-align: center;
}
.counting__box__item--title span {
  width: 100%;
  max-height: calc(0.875rem * 2 * 1.15);
  color: var(--counting-title-color);
  font-size: 0.875rem;
  text-align: center;
  line-height: 1.15;
  word-break: keep-all !important;
}
.counting__box__item--title span.title__column {
  height: auto;
}
.counting__box__item--counter {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
  color: var(--counting-counter-color);
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0;
}
.counting__box__item--counter.counting {
  color: var(--counting-counter-active-color);
}

.highcharts-pie-series.highcharts-legend-item > span {
  width: 13.75rem;
  height: 2.625rem;
  padding: 0 0.625rem;
  border-bottom: 0.0625rem solid var(--color-gray-020);
  color: var(--color-gray-090);
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.highcharts-pie-series.highcharts-legend-item > span:hover {
  background: var(--color-gray-020) no-repeat 0 0;
  color: inherit !important;
}
.highcharts-pie-series.highcharts-legend-item > span .highcharts-legend-row {
  display: flex;
  margin: 0.875rem 0.625rem;
}
.highcharts-pie-series.highcharts-legend-item > span .highcharts-legend-row .legend-column-1 {
  float: left;
  padding-right: 0.625rem;
}
.highcharts-pie-series.highcharts-legend-item > span .highcharts-legend-row .legend-column-2 {
  flex: 1;
}
.highcharts-pie-series.highcharts-legend-item > span .highcharts-legend-row .legend-column-3 {
  flex: 0 0 3rem;
  padding-right: 0.75rem;
  text-align: right;
}
.highcharts-pie-series.highcharts-legend-item > span .highcharts-legend-row .legend-column-4 {
  flex: 0 0 4rem;
  text-align: right;
}
.highcharts-pie-series.highcharts-legend-item:first-child > span {
  border-bottom: 0.125rem solid var(--color-gray-030);
  pointer-events: none;
}
.highcharts-pie-series.highcharts-legend-item:last-child > span {
  border-bottom: 0.0625rem solid var(--color-gray-030);
}
.highcharts-pie-series.highcharts-legend-item rect {
  display: none;
}

.highcharts-line-series.highcharts-legend-item > .highcharts-point {
  display: none;
}

.highcharts-tooltip {
  filter: drop-shadow(0 0.1875rem 0.375rem rgba(0, 0, 0, 0.12));
}
.highcharts-tooltip .title {
  font-size: 0.625rem;
}

.highcharts-total {
  width: 10rem;
  color: var(--color-gray-050);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.1;
}
.highcharts-total-count {
  color: var(--color-gray-080);
  font-size: 1.5rem;
  font-weight: 700;
}

/*
 * 콜랩스: 여러 콘텐츠를 동시에 펼칠 수 있습니다.

 * @file utilities/_collapse.scss
 * @description 콜랩스 디자인
 * @version 1.0
 */
.collapse {
  --collapse-count-color: var(--color-blue-050);
  --collapse-text-color: var(--color-gray-070);
  --collapse-icon-color: var(--color-blue-050);
  --collapse-arrow-color: var(--color-gray-070);
  --collapse-empty-bg-color: var(--bg-color-readonly);
  --collapse-empty-text-color: var(--text-color-readonly);
}
.collapse > input[type=checkbox] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.collapse > input[type=checkbox]:checked + .collapse__label .ic-minus-box {
  display: inline;
}
.collapse > input[type=checkbox]:checked + .collapse__label .ic-plus-box {
  display: none;
}
.collapse > input[type=checkbox]:checked + .collapse__label [class*=ic-arrow-right] {
  transform: rotate(90deg);
}
.collapse > input[type=checkbox]:checked ~ .collapse__content {
  scrollbar-width: none;
  height: auto;
  overflow-y: auto;
  position: static;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease;
}
.collapse > input[type=checkbox]:checked ~ .collapse__content::-webkit-scrollbar {
  display: none;
}
.collapse .collapse__label {
  height: 1.5rem;
  line-height: 1.3;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--collapse-text-color);
}
.collapse .collapse__label:has(.ic-minus-box), .collapse .collapse__label:has(.ic-plus-box), .collapse .collapse__label:has([class*=ic-arrow-right]), .collapse .collapse__label:has([class*=ic-arrow-down]) {
  cursor: pointer;
}
.collapse .collapse__label .ic-minus-box {
  display: none;
}
.collapse .collapse__label .ic-plus-box {
  display: inline;
}
.collapse .collapse__label [class*=ic-arrow-right] {
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 0.15s ease;
}
.collapse .collapse__label .ic-minus-box, .collapse .collapse__label .ic-plus-box {
  background: var(--collapse-icon-color);
}
.collapse .collapse__label [class*=ic-arrow-right], .collapse .collapse__label [class*=ic-arrow-down] {
  background: var(--collapse-arrow-color);
}
.collapse .collapse__label .collapse__title-count {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--collapse-count-color);
}
.collapse .collapse__content {
  height: 0;
  overflow: hidden;
  opacity: 0;
  position: relative;
}
.collapse .collapse__content .content__empty {
  width: 100%;
  height: 2.625rem;
  gap: 0.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  display: flex;
  justify-content: center;
  background-color: var(--collapse-empty-bg-color);
  border-radius: 0.375rem;
}
.collapse .collapse__content .content__empty .text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--collapse-empty-text-color);
}

/*
 * @file componenets/_color-picker.scss
 * @description 컬러 피커 디자인
 * @version 1.0
 */
.color-picker {
  --text-color: var(--color-gray-050);
  --box-line-color: var(--color-gray-015);
  --box-line-color-hover: var(--color-blue-030);
  --box-line-color-focus: var(--color-blue-050);
  --box-line-color-active: var(--color-blue-070);
  --box-line-color-disabled: var(--color-gray-030);
  --box-bg-color-disabled: var(--color-gray-005);
  --modal-line-color: var(--skeleton-line-color);
  --modal-bg-color: var(--color-gray-000);
  --color-chip-line-color-selected: var(--color-blue-050);
  color: var(--text-color);
  font-size: 0.75rem;
  font-weight: 500;
}
.color-picker__input {
  display: none;
}
.color-picker .color-picker__box {
  border: 0.0625rem solid var(--box-line-color);
  border-radius: 0.188rem;
  width: 5.625rem;
  height: 1.875rem;
  padding: 0.25rem;
  box-shadow: none;
  cursor: pointer;
  outline: none;
}
.color-picker .color-picker__box:focus, .color-picker .color-picker__box:hover {
  outline: 0;
}
.color-picker .color-picker__box:hover:not(.readonly) {
  border-color: var(--box-line-color-hover);
}
.color-picker .color-picker__box:focus:not(.readonly) {
  border-color: var(--box-line-color-focus);
}
.color-picker .color-picker__box:focus:not(.readonly) .color-picker__box__color {
  border-color: var(--box-line-color-focus);
}
.color-picker .color-picker__box:active:not(.readonly) {
  border-color: var(--box-line-color-active);
}
.color-picker .color-picker__box__color {
  border-radius: 0;
  border: 0.0625rem solid transparent;
  box-shadow: inset 0 0 0 0.25rem transparent;
  display: inline-block;
  width: 3.625rem;
}
.color-picker .color-picker__box__color.is-white {
  border-color: var(--box-line-color);
}
.color-picker .color-picker__box__color.is-transparent {
  border-color: var(--box-line-color);
  background: linear-gradient(to top right, transparent 46%, #E0474C 47%, #E0474C 53%, transparent 54%);
}
.color-picker .color-picker__box .ic-color-palette {
  background: var(--icon-color);
}
.color-picker .color-picker__box.readonly {
  background-color: var(--box-bg-color-disabled);
  border-color: var(--box-line-color-disabled);
  cursor: auto;
  pointer-events: none;
}
.color-picker .color-picker__box.readonly .color-picker__box__color {
  border-color: var(--box-line-color-disabled);
}
.color-picker .color-picker__box.readonly .ic-color-palette {
  background: var(--icon-color-disabled);
}
.color-picker .color-picker__box.open {
  border: 0.0625rem solid var(--box-line-color-active);
}
.color-picker .color-picker__modal {
  position: fixed;
  border: 0.0625rem solid var(--modal-line-color);
  border-radius: 0.188rem;
  display: none;
  width: 21.75rem;
  background-color: var(--modal-bg-color);
  z-index: 1000;
}
.color-picker .color-picker__modal__palette {
  min-height: 7.5rem;
  padding: 1rem;
  border-bottom: 0.0625rem solid var(--h-bar-color-2);
}
.color-picker .color-picker__modal__palette__row:first-child {
  margin-bottom: 0.5rem;
}
.color-picker .color-picker__modal__palette__row__item {
  border-radius: 0.188rem;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.color-picker .color-picker__modal__palette__row__item.border-inset {
  box-shadow: inset 0 0 0 0.0625rem var(--box-line-color);
}
.color-picker .color-picker__modal__palette__row__item.transparent-color {
  box-shadow: inset 0 0 0 0.0625rem var(--box-line-color);
  width: auto;
  padding: 0 0.5rem;
  gap: 0.25rem;
}
.color-picker .color-picker__modal__palette__row__item.transparent-color .color-picker__modal__palette__row__item__inner {
  flex: 0 0 auto;
  background: linear-gradient(to top right, transparent 42%, #E0474C 45%, #E0474C 55%, transparent 58%);
}
.color-picker .color-picker__modal__palette__row__item.transparent-color .transparent-color__label {
  color: var(--text-color);
  font-size: 0.75rem;
  pointer-events: none;
}
.color-picker .color-picker__modal__palette__row__item.selected {
  box-shadow: inset 0 0 0 0.0625rem var(--color-chip-line-color-selected);
}
.color-picker .color-picker__modal__palette__row__item.material-color:not(.first) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.color-picker .color-picker__modal__palette__row__item.material-color:not(.last) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.color-picker .color-picker__modal__palette__row__item__inner {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}
.color-picker .color-picker__modal__custom {
  position: relative;
  min-height: 4.875rem;
  padding: 0.5rem 1.125rem 0 1rem;
}
.color-picker .color-picker__modal__custom__list {
  margin: 0.75rem 0 0 0;
}
.color-picker .color-picker__modal__custom__list > *:not(:first-child) {
  margin: 0 0 0 0.5rem;
}
.color-picker .color-picker__modal__custom__list__item {
  position: relative;
  border-radius: 0.188rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  cursor: pointer;
}
.color-picker .color-picker__modal__custom__list__item__inner {
  border-radius: 0.188rem;
  width: 1.125rem;
  height: 1.125rem;
  pointer-events: none;
}
.color-picker .color-picker__modal__custom__list__item .item-remove--gray {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  border-radius: 50%;
  width: 0.875rem;
  height: 0.875rem;
  padding: 0;
  line-height: 0.3125rem;
  visibility: hidden;
}
.color-picker .color-picker__modal__custom__list__item .item-remove--gray .ic-close {
  width: 0.5rem;
  height: 0.5rem;
}
.color-picker .color-picker__modal__custom__list__item.border-inset {
  box-shadow: inset 0 0 0 0.0625rem var(--box-line-color);
}
.color-picker .color-picker__modal__custom__list__item.selected {
  box-shadow: inset 0 0 0 0.0625rem var(--color-chip-line-color-selected);
}
.color-picker .color-picker__modal__custom__list.editable .item-remove--gray {
  visibility: visible;
}
.color-picker .color-picker__modal__custom__control {
  display: none;
}
.color-picker .color-picker__modal__custom__control__draw {
  display: grid;
  grid-template-columns: 1.875rem 5rem 2.5rem 2.5rem 2.5rem 3.875rem;
  grid-template-rows: 1.875rem 1.25rem;
  gap: 0 0.25rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.color-picker .color-picker__modal__custom__control__draw .ic-color-empty,
.color-picker .color-picker__modal__custom__control__draw .ic-color-selected {
  margin-left: 0.25rem;
  margin-top: 0.25rem;
}
.color-picker .color-picker__modal__custom__control__draw input[type=text] {
  padding: 0 0.5rem;
}
.color-picker .color-picker__modal__custom__control__label {
  text-align: center;
}
.color-picker .color-picker__modal__custom .custom-color-btn__ic--edit {
  position: absolute;
  top: 0.125rem;
  right: 0.75rem;
  visibility: hidden;
}
.color-picker .color-picker__modal__custom .custom-color-btn__ic--plus {
  display: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.0625rem;
}
.color-picker .color-picker__modal__custom .custom-color-btn__ic--plus .ic-plus {
  width: 0.75rem;
  height: 0.75rem;
}
.color-picker .color-picker__modal__btn__list {
  display: none;
  border-top: 0.0625rem solid var(--h-bar-color-2);
  padding: 0.5rem;
  width: 100%;
  text-align: right;
}

.color-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.color-picker-wrap--empty .color-picker__box__color {
  background-color: transparent !important;
  background-image: repeating-conic-gradient(var(--color-gray-020) 0% 25%, var(--color-gray-000) 0% 50%) !important;
  background-size: 8px 8px !important;
}

/**
 * 댓글 디자인
 * componenets/_comment.scss
 * 화면 : 게시판
 */
.comment__controls {
  display: none;
  padding: 0.563rem 0;
}
.comment__list__item {
  padding: 0.75rem;
}
.comment__list__item__info {
  align-items: center;
  font-weight: 400;
}
.comment__list__item__info__name {
  max-width: 9.375rem;
}
.comment__list__item__info__date {
  font-size: 0.75rem;
  font-weight: 400;
}
.comment__list__item__info__date--relative {
  color: var(--color-gray-050);
}
.comment__list__item__info__date--absolute {
  color: var(--color-gray-070);
}
.comment__list__item__text {
  color: var(--color-gray-050);
  word-break: break-all;
}
.comment__list__item__text input {
  width: 100%;
  margin: 0 0.3125rem;
}
.comment__list__item__text .text__indent {
  display: none !important;
  margin-right: 0.75rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
.comment__list__item__text .text__indent > [class*=ic-] {
  background-color: var(--color-gray-050);
  pointer-events: none;
}
.comment__list__item__text.is-deleted {
  display: flex;
  margin: 0.5rem 0;
}
.comment__list__item__text.is-deleted > [class*=ic-] {
  margin-right: 0.25rem;
  background-color: var(--color-gray-050);
  pointer-events: none;
}
.comment__list__item__editor.ql-wrapper-container {
  background-color: var(--color-gray-000);
  flex: 1 1;
  /**
    *  *대댓글 인용문*
    *   대댓글 작성 시 editor(quill)에 추가되는 인용문 스타일.
    *   비록 클래스 명칭과 dom 요소가 추가되는 위치는 editor이지만
    *   댓글 기능에서만 한정된 스타일 요소이므로, _comment.scss에서 관리.
   */
}
.comment__list__item__editor.ql-wrapper-container .ql-editor {
  padding: 0.5rem !important;
}
.comment__list__item__editor.ql-wrapper-container .ql-editor__quote {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0.5rem;
  margin-bottom: 0.625rem;
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-003);
  border-radius: 0.563rem;
}
.comment__list__item__editor.ql-wrapper-container .ql-editor__quote--icon {
  display: flex;
  align-items: center;
}
.comment__list__item__editor.ql-wrapper-container .ql-editor__quote--icon > [class*=ic-] {
  margin: 0 0.25rem 0 0;
  background: var(--color-gray-070);
  pointer-events: none;
}
.comment__list__item__editor.ql-wrapper-container .ql-editor__quote--user-info {
  margin-right: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}
.comment__list__item__editor.ql-wrapper-container .ql-editor__quote--context {
  font-size: 0.75rem;
  color: var(--color-gray-050);
}
.comment__list__item.ghost {
  border: 0.0625rem solid transparent;
  background: transparent;
  border-radius: 0;
}
.comment__list__item.on-edit .comment__reply-editor {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-gray-000);
}
.comment__list__item.on-edit .comment__reply-editor__indent {
  margin-right: 0.75rem;
  min-width: 1.25rem;
  height: 1.25rem;
}
.comment__list__item.on-edit .comment__reply-editor__indent > [class*=ic-] {
  background-color: var(--color-gray-050);
  pointer-events: none;
}
.comment__list__item.on-edit .comment__reply-editor__actions {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 0.5rem;
  width: 100%;
}
.comment__list__item.reply {
  padding-left: 2.75rem;
}
.comment__list__item.reply .ql-editor {
  margin-bottom: 0.5rem;
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-003);
  border-radius: 0.563rem;
}
.comment__list__item.reply.on-edit {
  padding-left: 0.75rem;
}
.comment__list__item.reply.on-edit .comment__list__item__info {
  display: none !important;
}
.comment__list__item.reply.on-edit .text__indent {
  display: block !important;
}
.comment__list__item.reply.on-edit .comment__list__item__text {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--color-gray-000);
}
.comment__list__item.reply.on-edit .ql-editor {
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-000);
  border-radius: 0.563rem;
}
.comment__list__item:not(.reply):has(+ .comment__list__item:not(.reply)) {
  border-bottom: 0.0625rem solid var(--color-gray-010);
}
.comment__list__item.reply:has(+ .comment__list__item:not(.reply)) {
  border-bottom: 0.0625rem solid var(--color-gray-010);
}
.comment__sort-select {
  width: 4.875rem;
  height: 1.5rem;
  margin: 0 0 0 -0.5rem;
}
.comment__sort .select__box {
  border: none;
  background: transparent;
}

/*
 * @file componenets/_date-picker.scss
 * @description Date/Time picker 관련 디자인
 * @version 1.0
 */
.date-picker {
  --input-line-color-active: var(--color-blue-050);
  --modal-line-color: var(--color-gray-010);
  --modal-bg-color: var(--color-gray-000);
  --modal-text-color: var(--color-gray-090);
  --cell-text-color: var(--color-gray-090);
  --cell-text-color-hover: var(--color-gray-090);
  --cell-text-color-focus: var(--color-gray-090);
  --cell-text-color-active: var(--color-gray-090);
  --cell-text-color-selected: var(--color-blue-050);
  --cell-text-color-today: var(--color-gray-090);
  --cell-text-color-prev: var(--color-gray-050);
  --cell-text-color-next: var(--color-gray-050);
  --cell-text-color-holiday: #DE3412;
  --cell-bg-color: transparent;
  --cell-bg-color-hover: var(--color-blue-000);
  --cell-bg-color-focus: var(--color-blue-000);
  --cell-bg-color-active: var(--color-blue-000);
  --cell-bg-color-selected: var(--color-blue-000);
  --cell-bg-color-today: var(--color-gray-005);
  --cell-line-color: transparent;
  --cell-line-color-hover: var(--color-blue-000);
  --cell-line-color-focus: var(--color-blue-030);
  --cell-line-color-active: var(--color-blue-050);
  --cell-line-color-selected: var(--color-blue-050);
  --cell-line-color-today: var(--color-gray-005);
  display: inline-block;
}
.date-picker__box {
  display: flex;
  gap: 0.25rem;
}
.date-picker__input {
  width: 100%;
}
.date-picker__input.input--highlighted {
  border-color: var(--input-line-color-active);
}
.date-picker__modal {
  position: fixed;
  border: 0.0625rem solid var(--modal-line-color);
  border-radius: 0.188rem;
  display: none;
  width: 16.25rem;
  background-color: var(--modal-bg-color);
  color: var(--modal-text-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  z-index: 1000;
}
.date-picker__modal--double {
  width: 32.5rem;
}
.date-picker__modal__header {
  border-bottom: 0.0625rem solid var(--modal-line-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0.625rem 0.75rem;
}
.date-picker__modal__body {
  border-bottom: 0.0625rem solid var(--modal-line-color);
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.date-picker__modal__footer {
  display: flex;
  flex-direction: row;
  margin: 0.5rem 0.75rem;
}
.date-picker .date-picker__period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.date-picker .date-picker__period__prev {
  text-align: left;
}
.date-picker .date-picker__period__prev span {
  transform: rotate(180deg);
}
.date-picker .date-picker__period__text {
  text-align: center;
  flex-grow: 1;
}
.date-picker .date-picker__period__next {
  text-align: right;
}

.picker__year {
  display: none;
  width: 14rem;
  padding: 1rem 0 1rem 0;
}
.picker__year.active {
  display: block;
}
.picker__year__calendar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0.9375rem;
}
.picker__year__calendar__cell {
  border-radius: 0.188rem;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  padding: 0;
  margin: 0.25rem 0.3125rem;
  font-weight: 400;
  text-align: center;
  line-height: 1.9;
  color: var(--cell-text-color);
  background-color: var(--cell-bg-color);
  cursor: pointer;
}
.picker__year__calendar__cell:hover {
  color: var(--cell-text-color-hover);
  background-color: var(--cell-bg-color-hover);
}
.picker__year__calendar__cell:focus {
  color: var(--cell-text-color-focus);
  background-color: var(--cell-bg-color-focus);
}
.picker__year__calendar__cell:active {
  color: var(--cell-text-color-active);
  background-color: var(--cell-bg-color-active);
}
.picker__year__calendar__cell.selected {
  position: relative;
  color: var(--cell-text-color-selected);
}
.picker__year__calendar__cell:nth-child(n+4) {
  margin-top: 0.875rem;
}
.picker__yearMonth {
  display: none;
  height: 10rem;
}
.picker__yearMonth.active {
  display: block;
}
.picker__yearMonth__calendar {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1.25rem;
  row-gap: 1.5rem;
}
.picker__yearMonth__calendar__cell {
  border-radius: 0.188rem;
  display: inline-block;
  width: 2.75rem;
  height: 1.5rem;
  margin-left: 0.25rem;
  margin-right: 0.25rem;
  padding: 0;
  font-weight: 400;
  text-align: center;
  line-height: 1.9;
  color: var(--cell-text-color);
  background-color: var(--cell-bg-color);
  cursor: pointer;
}
.picker__yearMonth__calendar__cell:nth-child(4n+1) {
  margin-left: 0;
}
.picker__yearMonth__calendar__cell:nth-child(4n) {
  margin-right: 0;
}
.picker__yearMonth__calendar__cell:hover {
  color: var(--cell-text-color-hover);
  background-color: var(--cell-bg-color-hover);
}
.picker__yearMonth__calendar__cell:focus {
  color: var(--cell-text-color-focus);
  background-color: var(--cell-bg-color-focus);
}
.picker__yearMonth__calendar__cell:active {
  color: var(--cell-text-color-active);
  background-color: var(--cell-bg-color-active);
}
.picker__yearMonth__calendar__cell.selected {
  color: var(--cell-text-color-selected);
}
.picker__date {
  display: none;
}
.picker__date.inline-block + div.flex {
  border-left: 0.0625rem solid var(--modal-line-color);
}
.picker__date__calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1.75rem;
  gap: 0.25rem;
  padding: 0.625rem 1.25rem;
  /*&__title,*/
}
.picker__date__calendar__cell {
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.picker__date__calendar__cell {
  color: var(--cell-text-color);
  background-color: var(--cell-bg-color);
  border: 0.0625rem solid var(--cell-line-color);
  border-radius: 50%;
  cursor: pointer;
}
.picker__date__calendar__cell:hover {
  color: var(--cell-text-color-hover);
  background-color: var(--cell-bg-color-hover);
  border-color: var(--cell-line-color-hover);
}
.picker__date__calendar__cell:active {
  color: var(--cell-text-color-active);
  background-color: var(--cell-bg-color-active);
  border-color: var(--cell-line-color-active);
}
.picker__date__calendar__cell:focus {
  color: var(--cell-text-color-active);
  background-color: var(--cell-bg-color-active);
  border-color: var(--cell-line-color-active);
}
.picker__date__calendar__cell.selected {
  color: var(--cell-text-color-selected) !important;
  background-color: var(--cell-bg-color-selected) !important;
  border-color: var(--cell-line-color-active--cell-text-color-selected) !important;
}
.picker__date__calendar__cell.today {
  color: var(--cell-text-color-today);
  background-color: var(--cell-bg-color-today);
  border-color: var(--cell-line-color-today);
}
.picker__date__calendar__cell--prev {
  color: var(--cell-text-color-prev);
}
.picker__date__calendar__cell--current:nth-child(7n+1) {
  color: var(--cell-text-color-holiday);
}
.picker__date__calendar__cell--holiday {
  color: var(--cell-text-color-holiday);
}
.picker__date__calendar__cell--next {
  color: var(--cell-text-color-next);
}
.picker__date__calendar .picker__date__calendar__title:nth-child(7n+1) {
  color: var(--cell-text-color-holiday);
}
.picker__time {
  display: none;
  width: 16.25rem;
  min-height: 7.375rem;
  padding: 1rem 0 1rem 0;
  justify-content: center;
}
.picker__time.flex {
  display: flex;
}
.picker__time__hour, .picker__time__minute {
  width: var(--data-width, 66px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.picker__time__hour .hour-up span,
.picker__time__hour .minute-up span, .picker__time__minute .hour-up span,
.picker__time__minute .minute-up span {
  transform: rotate(-90deg);
}
.picker__time__hour .hour-down span,
.picker__time__hour .minute-down span, .picker__time__minute .hour-down span,
.picker__time__minute .minute-down span {
  transform: rotate(90deg);
}
.picker__time__hour .picker__time__digit, .picker__time__minute .picker__time__digit {
  border-radius: 0.188rem;
  width: 6.25rem !important;
  height: 3.5rem;
  margin: 0.625rem 0;
  padding: 0;
  font-size: 2.5rem;
  font-weight: 400;
  text-align: center;
}
.picker__time__separator {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 4.063rem;
  margin: auto 0;
  font-size: 3.125rem;
  font-weight: 300;
}
.picker__time .btn__toggle__single {
  padding-left: 0.625rem;
}

/*
 * @file components/_file-uploader.scss
 * @description 파일 업로드 관련 디자인
 * @version 1.0
 */
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-link, .file-uploader--default .dropzone .dz-preview .dz-details .dz-remove, .file-uploader--default .dropzone .dz-preview .dz-details .dz-download, .file-uploader--default .dropzone .dz-preview .dz-details .dz-link {
  cursor: pointer;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-link span[class*=ic-], .file-uploader--default .dropzone .dz-preview .dz-details .dz-remove span[class*=ic-], .file-uploader--default .dropzone .dz-preview .dz-details .dz-download span[class*=ic-], .file-uploader--default .dropzone .dz-preview .dz-details .dz-link span[class*=ic-] {
  vertical-align: middle;
  background: var(--icon-color);
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-link span[class*=ic-]:hover, .file-uploader--default .dropzone .dz-preview .dz-details .dz-remove span[class*=ic-]:hover, .file-uploader--default .dropzone .dz-preview .dz-details .dz-download span[class*=ic-]:hover, .file-uploader--default .dropzone .dz-preview .dz-details .dz-link span[class*=ic-]:hover {
  background: var(--icon-color-hover);
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-link span[class*=ic-]:active, .file-uploader--default .dropzone .dz-preview .dz-details .dz-remove span[class*=ic-]:active, .file-uploader--default .dropzone .dz-preview .dz-details .dz-download span[class*=ic-]:active, .file-uploader--default .dropzone .dz-preview .dz-details .dz-link span[class*=ic-]:active {
  background: var(--icon-color-active);
}

.file-uploader--default {
  --dropzone-text-color: var(--color-gray-050);
  --dropzone-bg-color: var(--color-gray-000);
  --dropzone-bg-color-hover: var(--color-blue-000);
  --dropzone-bg-color-active: var(--color-blue-005);
  --dropzone-line-color: var(--color-gray-015);
  --dropzone-line-color-hover: var(--color-gray-015);
  --dropzone-line-color-active: var(--color-blue-050);
  --dropzone-border-radius: $border-radius-s;
  --dropzone-cloud-icon-color: var(--color-gray-050);
  --dropzone-clickable-text-color: var(--color-gray-050);
  --dropzone-clickable-text-color-hover: var(--color-blue-030);
  --dropzone-clickable-text-color-active: var(--color-blue-050);
  --dropzone-file-name-text-color: var(--color-gray-090);
  --dropzone-file-size-text-color: var(--color-gray-030);
  --dropzone-bar-text-color: var(--color-gray-030);
  --dropzone-bar-percent-text-color: var(--color-gray-070);
  --dropzone-bar-color: var(--color-gray-005);
  --dropzone-bar-color-progress: var(--color-blue-050);
}
.file-uploader--default .dropzone {
  display: grid;
  gap: 0.25rem;
  background-color: var(--dropzone-bg-color);
  font-size: 0.875rem;
}
.file-uploader--default .dropzone.dz-uploaded .dz-download {
  grid-column: 5 !important;
}
.file-uploader--default .dropzone.dz-drag-hover.dz-enabled-drop {
  border-style: solid;
}
.file-uploader--default .dropzone.dz-drag-hover.dz-enabled-drop .dz-message {
  opacity: 0.5;
}
.file-uploader--default .dropzone .dz-default.dz-message {
  border: 0.0625rem dashed var(--dropzone-line-color);
  border-radius: var(--dropzone-border-radius);
  display: grid;
  height: 4rem;
  grid-template-columns: 2.625rem auto;
  padding: 0.5rem 1rem 0.5rem 0.75rem;
  align-items: center;
  font-weight: 400;
  color: var(--dropzone-text-color);
}
.file-uploader--default .dropzone .dz-default.dz-message .ic-cloud--l {
  background: var(--dropzone-cloud-icon-color);
}
.file-uploader--default .dropzone .dz-default.dz-message .add-file-button-wrap {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.file-uploader--default .dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable {
  color: var(--dropzone-clickable-text-color);
  cursor: pointer;
}
.file-uploader--default .dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable:hover {
  color: var(--dropzone-clickable-text-color-hover);
}
.file-uploader--default .dropzone .dz-default.dz-message .add-file-button-wrap .dz-clickable:active {
  color: var(--dropzone-clickable-text-color-active);
}
.file-uploader--default .dropzone .dz-default.dz-message .add-file-button-wrap span:not(:first-child) {
  margin-left: 0.25rem;
}
.file-uploader--default .dropzone .dz-default.dz-message:hover {
  border-color: var(--dropzone-line-color-hover);
  background-color: var(--dropzone-bg-color-hover);
  outline: 0;
}
.file-uploader--default .dropzone .dz-default.dz-message:focus, .file-uploader--default .dropzone .dz-default.dz-message:active {
  border-color: var(--dropzone-line-color-active);
  background-color: var(--dropzone-bg-color-active);
  outline: 0;
}
.file-uploader--default .dropzone .dz-preview {
  position: relative;
  border: 0.0625rem solid var(--dropzone-line-color);
  border-radius: var(--dropzone-border-radius);
  height: 4.125rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--dropzone-bg-color);
  vertical-align: top;
}
.file-uploader--default .dropzone .dz-preview:hover {
  border-color: var(--dropzone-line-color-hover);
  z-index: 25;
}
.file-uploader--default .dropzone .dz-preview:hover .dz-image img {
  transform: scale(1);
  filter: blur(8px);
}
.file-uploader--default .dropzone .dz-preview:focus, .file-uploader--default .dropzone .dz-preview:active {
  border-color: var(--dropzone-line-color-active);
}
.file-uploader--default .dropzone .dz-preview.dz-file-preview .dz-image {
  border-radius: 1.25rem;
  background: var(--color-gray-040);
  background: linear-gradient(to bottom, var(--color-gray-005), var(--color-gray-010));
}
.file-uploader--default .dropzone .dz-preview.dz-file-preview .dz-details {
  opacity: 1;
}
.file-uploader--default .dropzone .dz-preview.dz-image-preview {
  background: transparent;
}
.file-uploader--default .dropzone .dz-preview.dz-image-preview .dz-details {
  transition: opacity 0.2s linear;
}
.file-uploader--default .dropzone .dz-preview .dz-details {
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 2.625rem auto 1.5rem 0.25rem 1.5rem;
  align-items: center;
  min-width: 100%;
  max-width: 100%;
  height: 2.75rem;
  text-align: center;
  opacity: 0;
  z-index: 10;
}
.file-uploader--default .dropzone .dz-preview .dz-details.linked {
  grid-template-columns: 2.625rem auto 2rem 2rem 2rem;
}
.file-uploader--default .dropzone .dz-preview .dz-details.linked .dz-download {
  grid-column: 4;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-file-type {
  grid-column: 1;
  grid-row: 1/span 2;
  width: 1.875rem;
  height: 1.875rem;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-filename {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 2;
  color: var(--dropzone-file-name-text-color);
  text-align: left;
  line-height: normal;
  pointer-events: none;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-size {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  grid-column: 2;
  color: var(--dropzone-file-size-text-color);
  font-size: 0.75rem;
  text-align: left;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-remove, .file-uploader--default .dropzone .dz-preview .dz-details .dz-download, .file-uploader--default .dropzone .dz-preview .dz-details .dz-link {
  grid-row: 1/span 2;
  text-align: center;
  border: none;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-link {
  grid-column: 3;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-download {
  grid-column: 3;
}
.file-uploader--default .dropzone .dz-preview .dz-details .dz-remove {
  grid-column: 5;
}
.file-uploader--default .dropzone .dz-preview .dz-image {
  position: relative;
  overflow: hidden;
  display: block;
  z-index: 10;
}
.file-uploader--default .dropzone .dz-preview .dz-image img {
  display: block;
}
.file-uploader--default .dropzone .dz-preview.dz-error {
  border-color: var(--line-color-error);
}
.file-uploader--default .dropzone .dz-preview.dz-error .dz-progress .dz-upload .dz-upload-progress {
  border-radius: 0.4375rem;
  height: 0.375rem;
  background: var(--dropzone-bar-color);
  overflow: hidden;
}
.file-uploader--default .dropzone .dz-preview.dz-error .dz-progress .dz-upload .dz-upload-progress span {
  border-radius: 0.4375rem;
  transition: width 100ms linear;
  display: block;
  height: inherit;
  background: var(--box-color-error);
}
.file-uploader--default .dropzone .dz-preview.dz-error .dz-error-message {
  position: absolute;
  left: -0.5rem;
  border-radius: 0.188rem;
  transition: opacity 0.3s ease;
  display: block;
  width: 8.75rem;
  padding: 0.5em 1.2em;
  background: linear-gradient(to bottom, var(--color-red-060), var(--color-red-070));
  color: var(--dropzone-bg-color);
  z-index: 500;
  pointer-events: none;
  opacity: 0;
}
.file-uploader--default .dropzone .dz-preview.dz-error .dz-error-message:after {
  position: absolute;
  top: -0.375rem;
  left: 4rem;
  border-bottom: 0.375rem solid var(--color-red-060);
  content: "";
  width: 0;
  height: 0;
}
.file-uploader--default .dropzone .dz-preview.dz-error:hover .dz-error-message {
  opacity: 1;
  pointer-events: auto;
}
.file-uploader--default .dropzone .dz-preview.dz-error .dz-remove span[class*=ic-] {
  background: var(--icon-color-error);
}
.file-uploader--default .dropzone .dz-preview.dz-processing .dz-progress {
  transition: all 0.2s linear;
  opacity: 1;
}
.file-uploader--default .dropzone .dz-preview.dz-complete .dz-progress {
  transition: opacity 0.4s ease-in;
  opacity: 0;
}
.file-uploader--default .dropzone .dz-preview:not(.dz-complete) .dz-size {
  opacity: 0;
}
.file-uploader--default .dropzone .dz-preview:not(.dz-complete) .dz-link span[class*=ic-],
.file-uploader--default .dropzone .dz-preview:not(.dz-complete) .dz-remove span[class*=ic-],
.file-uploader--default .dropzone .dz-preview:not(.dz-complete) .dz-download span[class*=ic-] {
  opacity: 0;
}
.file-uploader--default .dropzone .dz-preview .dz-progress {
  position: relative;
  top: -1.625rem;
  transform: scale(1);
  display: flex;
  flex-direction: column;
  width: inherit;
  margin-left: 2.625rem;
  overflow: hidden;
  opacity: 1;
  pointer-events: none;
  z-index: 750;
}
.file-uploader--default .dropzone .dz-preview .dz-progress .dz-upload {
  display: grid;
  align-items: center;
  grid-template-columns: auto 3rem;
  height: 1.125rem;
}
.file-uploader--default .dropzone .dz-preview .dz-progress .dz-upload-text {
  color: var(--dropzone-bar-text-color);
  font-size: 0.75rem;
}
.file-uploader--default .dropzone .dz-preview .dz-progress .dz-upload-percent {
  color: var(--dropzone-bar-percent-text-color);
  text-align: right;
}
.file-uploader--default .dropzone .dz-preview .dz-progress .dz-upload .dz-upload-progress {
  border-radius: 0.4375rem;
  height: 0.375rem;
  background: var(--dropzone-bar-color);
  overflow: hidden;
}
.file-uploader--default .dropzone .dz-preview .dz-progress .dz-upload .dz-upload-progress span {
  border-radius: 0.4375rem;
  transition: width 100ms linear;
  display: block;
  height: inherit;
  background: var(--dropzone-bar-color-progress);
}
.file-uploader--default.disabled {
  pointer-events: none;
}
.file-uploader--default.disabled .dropzone .dz-default {
  border: 0.0625rem solid var(--line-color-disabled);
  background-color: var(--bg-color-disabled);
}
.file-uploader--default.disabled .dropzone .dz-default.dz-message {
  color: var(--text-color-disabled);
}
.file-uploader--default.disabled .dropzone .dz-preview {
  border: 0.0625rem solid var(--line-color-disabled);
  background-color: var(--bg-color-disabled);
}
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-file-type {
  width: 2rem;
  height: 2rem;
  background-size: 2rem;
  filter: grayscale(1);
}
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-link span[class*=ic-],
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-remove span[class*=ic-],
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-download span[class*=ic-] {
  background: var(--icon-color-disabled);
}
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-filename,
.file-uploader--default.disabled .dropzone .dz-preview .dz-details .dz-size {
  color: var(--text-color-disabled);
}
.file-uploader--simple {
  --dropzone-title-color: var(--color-gray-090);
  --dropzone-no-data-color: var(--color-gray-080);
  --dropzone-file-name-text-color: var(--color-gray-090);
  --dropzone-file-size-text-color: var(--color-gray-030);
  display: flex;
  align-items: center;
  min-height: 3.125rem;
  padding: 0.125rem 1.25rem;
}
.file-uploader--simple__title {
  margin: auto 0;
  color: var(--dropzone-title-color);
  font-size: 0.75rem;
  font-weight: 400;
}
.file-uploader--simple__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: left;
}
.file-uploader--simple .dropzone.dz-uploaded {
  min-height: auto;
  padding: 0;
  border: 0;
  background-color: transparent;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview {
  height: auto;
  margin-bottom: 0;
  margin-top: 0.625rem;
  padding: 0;
  border: none;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview:first-child {
  margin-top: 0;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-image {
  display: none;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-file-type {
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-filename {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
  padding: 0 0.5rem 0 0.25rem;
  color: var(--dropzone-file-name-text-color);
  cursor: pointer;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-size {
  padding: 0;
  color: var(--dropzone-file-size-text-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.file-uploader--simple .dropzone.dz-uploaded .dz-preview .dz-details .dz-link {
  padding-left: 0.5rem;
}
.file-uploader--noFile {
  color: var(--dropzone-no-data-color);
  font-size: 0.75rem;
  font-weight: 400;
}
.file-uploader--single {
  --text-color-readonly: var(--color-gray-090);
  --line-color-hover: var(--color-blue-015);
  --line-color-focus: var(--color-blue-015);
  --line-color-active: var(--color-blue-015);
  --line-color-readonly: var(--color-gray-015);
  --bg-color: var(--color-gray-000);
  --bg-color-hover: var(--color-gray-000);
  --bg-color-focus: var(--color-gray-000);
  --bg-color-active: var(--color-gray-000);
  --bg-color-readonly: var(--color-gray-000);
  display: flex;
  align-items: stretch;
  height: 30px;
  box-sizing: border-box;
}
.file-uploader--single__info-wrap {
  position: relative;
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-left: 0.0625rem;
  background-color: var(--bg-color);
}
.file-uploader--single__info-wrap:not(:disabled):hover, .file-uploader--single__info-wrap:not(:read-only):hover {
  background-color: var(--bg-color-hover);
  border-color: var(--line-color-hover);
}
.file-uploader--single__info-wrap:not(:disabled):focus, .file-uploader--single__info-wrap:not(:read-only):focus {
  background-color: var(--bg-color-focus);
  border-color: var(--line-color-focus);
}
.file-uploader--single__info-wrap:not(:disabled):active, .file-uploader--single__info-wrap:not(:read-only):active {
  background-color: var(--bg-color-active);
  border-color: var(--line-color-active);
}
.file-uploader--single__info-wrap:read-only:not(.tagify) {
  color: var(--text-color-readonly);
  background-color: var(--bg-color-readonly);
  border-color: var(--line-color-readonly);
}
.file-uploader--single__info-wrap:read-only:not(.tagify) > input[type=text],
.file-uploader--single__info-wrap:read-only:not(.tagify) > input[type=password],
.file-uploader--single__info-wrap:read-only:not(.tagify) > input[type=number] {
  height: 100%;
  background: transparent;
  pointer-events: none;
  line-height: 28px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  outline: 0;
}
.file-uploader--single__info-wrap:has(input:placeholder-shown) > input[type=text]::placeholder,
.file-uploader--single__info-wrap:has(input:placeholder-shown) > input[type=password]::placeholder,
.file-uploader--single__info-wrap:has(input:placeholder-shown) > input[type=number]::placeholder {
  color: var(--tag-placeholder-color);
}
.file-uploader--single__info-wrap:has(input:placeholder-shown) .file__extension,
.file-uploader--single__info-wrap:has(input:placeholder-shown) .btn__remove {
  width: 0;
  visibility: hidden;
}
.file-uploader--single__info-wrap:not(.file-uploader--single__info-wrap:has(input:placeholder-shown)) > input[type=text],
.file-uploader--single__info-wrap:not(.file-uploader--single__info-wrap:has(input:placeholder-shown)) > input[type=password],
.file-uploader--single__info-wrap:not(.file-uploader--single__info-wrap:has(input:placeholder-shown)) > input[type=number] {
  padding-left: calc((0.5rem) + 1.25rem + (0.25rem));
  padding-right: calc(0.875rem + (0.5rem));
}
.file-uploader--single__info-wrap > .file__extension {
  position: absolute;
  left: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem;
}
.file-uploader--single__info-wrap > .btn__remove {
  position: absolute;
  right: 0.25rem;
  background-size: 0.875rem;
}
.file-uploader--single > [class*=btn__]:not(.btn__remove) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -0.0625rem;
}

/*
 * @file components/_modal.scss
 * @description 모달 디자인
 * @version 1.0
 */
body.active {
  overflow: hidden !important;
}

.modal {
  --data-modal-width: 430px;
  --data-modal-height: auto;
  --modal-footer-height: 3.75rem;
  --modal-backdrop-bg-color: rgba(118, 126, 156, 0.3);
  --modal-bg-color: var(--skeleton-bg-color);
  --modal-line-color: var(--skeleton-line-color);
  --modal-desc-color: var(--color-gray-070);
  --calendar-msg-text-color: var(--color-gray-070);
  --field-text-color-secondary: var(--color-gray-080);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal__backdrop, .modal__backdrop__info {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--modal-backdrop-bg-color);
  z-index: 5000;
}
.modal__close--out {
  display: inline-block;
  width: 100vw;
  height: 100vh;
  cursor: default;
}
.modal__close--in {
  position: absolute !important;
  top: 0.5rem;
  right: 0.5rem;
}
.modal__dialog {
  position: relative;
  width: var(--data-modal-width);
  height: var(--data-modal-height);
  margin: 0 auto 2em auto;
  background-color: var(--modal-bg-color);
  border: 0.0625rem solid var(--modal-line-color);
  opacity: 0;
  transition: 0.3s;
  z-index: 5000;
  border-radius: 0.563rem;
}
.modal__dialog.active {
  transition: 0.3s;
  opacity: 1;
}
.modal__dialog__header {
  min-height: 2.813rem;
  padding: 0.625rem 2.5rem 0.625rem 1.25rem;
  border-bottom: 0.063rem solid var(--h-bar-color-2);
}
.modal__dialog__body {
  overflow: auto;
  padding: 1.25rem;
}
.modal__dialog__footer {
  padding: 1rem 1.25rem;
  border-top: 0.063rem solid var(--h-bar-color-2);
}
.modal__dialog__footer .btn__list {
  width: 100%;
}
.modal__dialog__footer .btn__list .btn__hidden {
  display: none;
  width: 0;
}
.modal__dialog .modal__title {
  line-height: 1.3;
}
.modal__dialog .modal__title .modal__desc {
  border-bottom: 0;
  font-size: 0.875rem;
  color: var(--modal-desc-color);
}
.modal__dialog--scroll .modal__dialog__body {
  padding: 0;
}
.modal__dialog--scroll .modal__search__form {
  padding: 1.25rem !important;
}

.modal__dialog {
  min-width: calc(var(--data-modal-width));
}
.modal__dialog .spinner-container {
  justify-items: center;
  align-content: center;
}
.modal__dialog.modal__dialog--datagrid .search__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--label-color);
  line-height: 1.3;
}
.modal__dialog.modal__dialog--datagrid .component[data-component-type=datagrid] {
  --grid-line-color: var(--skeleton-line-color);
  --grid-border-radius: $border-radius;
}
.modal__dialog.modal__dialog--datagrid .component[data-component-type=datagrid] .tabulator {
  border-left: 0.0625rem solid var(--grid-line-color);
  border-right: 0.0625rem solid var(--grid-line-color);
  border-top-left-radius: var(--grid-border-radius);
  border-top-right-radius: var(--grid-border-radius);
}
.modal__dialog.modal__dialog--datagrid .component[data-component-type=datagrid] .datagrid__pagination {
  border: 0.0625rem solid var(--grid-line-color);
  border-bottom-right-radius: var(--grid-border-radius);
  border-bottom-left-radius: var(--grid-border-radius);
}
.modal__dialog.modal__dialog--bookmark {
  --bookmark-document-border-radius: $border-radius-s;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 3.25rem;
  margin-bottom: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-gray-003);
  border: 0.0625rem dashed var(--color-gray-010);
  border-radius: 0.563rem;
  box-sizing: border-box;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks.shake {
  animation: bookmark-picks-shake 0.3s;
  border-color: var(--color-error);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__label {
  margin-right: 0.25rem;
  color: var(--color-gray-050);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__empty {
  color: var(--color-gray-030);
  font-size: 0.875rem;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__hint {
  margin-left: auto;
  color: var(--color-gray-030);
  font-size: 0.75rem;
  white-space: nowrap;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 13.75rem;
  padding: 0.3125rem 0.5rem 0.3125rem 0.375rem;
  background: var(--color-gray-000);
  border: 0.0625rem solid var(--color-blue-010);
  border-radius: 62.4375rem;
  font-size: 0.875rem;
  cursor: grab;
  user-select: none;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__chip.dragging {
  opacity: 0.4;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__chip__order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--color-blue-050);
  color: var(--color-on-accent);
  font-size: 0.625rem;
  font-weight: 700;
  flex: none;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-picks__chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark {
  max-height: 40rem;
  overflow-y: auto;
  padding-right: 0.5rem;
  box-sizing: border-box;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__catalog {
  columns: 5 12.5rem;
  column-gap: 0.75rem;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__category {
  break-inside: avoid;
  margin-bottom: 0.75rem;
  padding: 0.75rem 0.75rem 0.625rem;
  background: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.563rem;
  box-sizing: border-box;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__category__title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 130%;
  border-bottom: 0.0625rem solid var(--color-gray-005);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__category__count {
  display: inline-block;
  visibility: hidden;
  padding: 0.0625rem 0.4375rem;
  background: var(--color-blue-000);
  border-radius: 62.4375rem;
  color: var(--color-blue-050);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 130%;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__category__count.visible {
  visibility: visible;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__group__label {
  display: block;
  margin: 0.625rem 0.125rem 0.25rem;
  color: var(--color-gray-040);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  line-height: 130%;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.625rem;
  margin-top: 0.25rem;
  padding: 0.375rem 0.625rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.188rem;
  color: var(--color-gray-090);
  font-size: 0.875rem;
  line-height: 130%;
  cursor: pointer;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row:hover {
  background: var(--color-gray-003);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row .checkbox {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row.checked {
  background: var(--color-blue-000);
  border-color: var(--color-blue-010);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row.checked .bookmark__row__name {
  color: var(--color-blue-050);
  font-weight: 700;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row.disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark__row.disabled:hover {
  background: var(--color-gray-000);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document {
  height: 33.75rem;
  overflow-y: auto;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-empty {
  height: 100%;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-empty .text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box {
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: var(--bookmark-document-border-radius);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group {
  height: 7.75rem;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .group__img {
  width: 8.375rem;
  min-width: 8.375rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .group__img.no-icon {
  background-size: auto;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group-content {
  min-width: 0;
  flex: 1;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .text-title {
  width: 100%;
  height: 2.625rem;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 1rem;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .text-breadcrumb {
  width: 100%;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__menu-path {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .text-desc {
  color: var(--color-gray-030);
  font-size: 0.75rem;
  min-height: 2.875rem;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group .text-desc span {
  height: 100%;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row {
  color: var(--color-gray-050);
  line-height: 150%;
  border-radius: var(--bookmark-document-border-radius);
  border: 0.0625rem solid var(--color-gray-010);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row:hover {
  background: var(--color-gray-003);
  cursor: pointer;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row .checkbox {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row.checked {
  background: var(--color-blue-000);
  border-color: var(--color-blue-010);
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row.checked .bookmark-document-box__group__document--row__name {
  color: var(--color-blue-050);
  font-weight: 700;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row.disabled {
  opacity: 0.38;
}
.modal__dialog.modal__dialog--bookmark .modal__dialog__body .bookmark-document-box__group__document--row.disabled:hover {
  background: none;
  cursor: not-allowed;
}
.modal__dialog.modal__dialog--approval {
  --approval-border-radius: $border-radius-m;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body {
  background: var(--color-gray-003);
  padding: 0 !important;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content {
  padding: 1.25rem;
  min-height: 34.125rem;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .condition__container {
  border-radius: 0.375rem;
  width: 42.5rem;
  padding: 0.75rem;
  background: var(--color-gray-000);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list {
  border-radius: 0.375rem;
  padding: 0.75rem;
  background: var(--color-gray-000);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content {
  width: 27.5rem;
  height: 23.75rem;
  overflow-y: auto;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box {
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: var(--approval-border-radius);
  background: var(--color-gray-000);
  width: 100%;
  padding: 0.75rem;
  cursor: pointer;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content--seq {
  width: 1rem;
  font-size: 0.625rem;
  color: var(--color-gray-050);
  text-align: center;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content--assignee {
  font-size: 0.75rem;
  pointer-events: none;
  min-width: 0;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content--assignee .name {
  color: var(--color-gray-090);
  font-weight: 700;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content--assignee .organization, .modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content--assignee .position {
  color: var(--color-gray-070);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box .approval__box__content button.btn__remove {
  margin-left: auto;
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box:hover {
  background: var(--color-blue-000);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box:focus {
  background: var(--color-blue-000);
  border-color: var(--color-blue-030);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box:active {
  background: var(--color-blue-005);
  border-color: var(--color-blue-050);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__box.selected {
  background: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__list .approval__content .approval__empty {
  background: var(--color-gray-003);
  width: 27.5rem;
  height: 23.75rem;
  align-content: center;
  text-align: center;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-gray-050);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__comment {
  border-radius: 0.375rem;
  padding: 0.75rem;
  background: var(--color-gray-000);
}
.modal__dialog.modal__dialog--approval .modal__dialog__body .detail__content .approval__container .approval__comment textarea {
  resize: none;
  overflow: auto;
}
.modal__dialog.modal__dialog--cmdb .modal__dialog__body {
  height: calc(var(--data-modal-height) - 3.875rem);
  padding: 1.25rem 1.25rem 0 1.25rem;
}
.modal__dialog.modal__dialog--cmdb .modal__dialog__body .tab__contents {
  width: calc(var(--data-modal-width) - 1.25rem - 1.25rem);
  height: 100%;
  overflow-y: auto;
}
.modal__dialog.modal__dialog--cmdb .modal__dialog__body .tab__content {
  height: 36rem;
}
.modal__dialog.modal__dialog--cmdb .modal__dialog__body .tab__content--mi {
  position: relative;
}
.modal__dialog.modal__dialog--calendar .select__box__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.modal__dialog.modal__dialog--calendar .calendar-color-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.modal__dialog.modal__dialog--calendar .calendar__msg {
  font-size: 0.75rem;
  color: var(--calendar-msg-text-color);
}
.modal__dialog.modal__dialog--calendar .select__box {
  width: 100% !important;
}
.modal__dialog.modal__dialog--calendar .schedule__list {
  width: 100% !important;
}
.modal__dialog.modal__dialog--calendar textarea {
  resize: none;
}
.modal__dialog.modal--business-time .business-time-master__batch-row {
  display: grid;
  grid-template-columns: 3.5rem 7.5rem 0.75rem 7.5rem 3rem 7.5rem 0.75rem 7.5rem 4.625rem;
  gap: 0.5rem;
  align-items: center;
}
.modal__dialog.modal--business-time .business-time-master__inline-label, .modal__dialog.modal--business-time .business-time-master__day-header, .modal__dialog.modal--business-time .business-time-master__work-header, .modal__dialog.modal--business-time .business-time-master__lunch-header, .modal__dialog.modal--business-time .business-time-master__day {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--label-color);
}
.modal__dialog.modal--business-time .business-time-master__inline-label {
  white-space: nowrap;
}
.modal__dialog.modal--business-time .business-time-master__separator {
  text-align: center;
}
.modal__dialog.modal--business-time .business-time-master__grid {
  border-top: 0.0625rem solid var(--skeleton-line-color);
}
.modal__dialog.modal--business-time .business-time-master__grid-row {
  display: grid;
  grid-template-columns: 2.125rem 2.5rem 7.5rem 2.3125rem 7.5rem 2.5rem 7.5rem 0.75rem 7.5rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.375rem;
  border-bottom: 0.0625rem solid var(--border-color, #d7dde5);
}
.modal__dialog.modal--business-time .business-time-master__grid-header {
  min-height: 2rem;
}
.modal__dialog.modal--business-time .business-time-master__day-header {
  grid-column: 1/2;
}
.modal__dialog.modal--business-time .business-time-master__work-header {
  grid-column: 2/6;
}
.modal__dialog.modal--business-time .business-time-master__lunch-header {
  grid-column: 6/10;
}
.modal__dialog.modal--business-time .business-time-master__day {
  grid-column: 1/2;
}
.modal__dialog.modal--business-time .business-time-master__work-toggle {
  grid-column: 2/3;
}
.modal__dialog.modal--business-time .business-time-master__work-range {
  grid-column: 3/6;
}
.modal__dialog.modal--business-time .business-time-master__holiday-area {
  grid-column: 3/6;
}
.modal__dialog.modal--business-time .business-time-master__lunch-toggle {
  grid-column: 6/7;
}
.modal__dialog.modal--business-time .business-time-master__lunch-range {
  grid-column: 7/10;
}
.modal__dialog.modal--business-time .business-time-master__unused-lunch-area {
  grid-column: 7/10;
}
.modal__dialog.modal--business-time .business-time-master__time-range {
  display: grid;
  grid-template-columns: 7.5rem 0.75rem 7.5rem;
  gap: 0.5rem;
  align-items: center;
}
.modal__dialog.modal--business-time .business-time-master__state-text {
  color: var(--field-text-color-secondary);
}
.modal__dialog.modal--business-time .business-time-master .date-picker__box {
  width: 100%;
}
.modal__dialog.modal--business-time .business-time-master .date-picker {
  width: 100%;
}
.modal__dialog.modal--business-time .business-time-master .date-picker__input {
  width: 100%;
}
.modal__dialog.modal__dialog--table {
  min-width: 42rem;
}
.modal__dialog.modal__dialog--edit .modal__dialog__body {
  scrollbar-width: none;
}
.modal__dialog.modal__dialog--edit .modal__dialog__body::-webkit-scrollbar {
  display: none;
}
.modal__dialog.modal__dialog--edit .modal__dialog__body .date-picker {
  width: 100%;
}
.modal__dialog.modal__dialog--edit .modal__dialog__body .approver-cell--dynamic {
  color: var(--color-gray-060);
  font-style: italic;
}
.modal__dialog.modal__dialog--kedb-detail {
  display: flex;
  flex-direction: column;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__header,
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__footer {
  flex-shrink: 0;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  scrollbar-width: auto;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body::-webkit-scrollbar {
  display: block;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .detail__form {
  flex: 0 0 auto;
  gap: 0.75rem;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__section {
  flex: 0 0 auto;
  overflow: hidden;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__section > .accordion {
  flex: 0 0 auto;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__components {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  width: 100%;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__components > .component__context {
  flex: 0 0 auto;
  min-width: 0;
  width: 100%;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__components > .component__context > .context-menu {
  display: none;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .kedb-detail__components .component {
  width: 100%;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .ql-container {
  flex: 1 1 0;
  height: auto;
}
.modal__dialog.modal__dialog--kedb-detail .modal__dialog__body .ql-editor {
  overflow-y: auto;
  resize: vertical;
  height: 100%;
  max-height: none !important;
}
.modal__dialog.modal__dialog--grid.no-pagination {
  --data-height: calc(var(--data-modal-height) - 5.5rem - 5.938rem - 2.188rem);
}
.modal__dialog.modal__dialog--grid .modal__dialog__body .text__message {
  float: right;
  height: 1.875rem;
  line-height: 2.5rem;
}
.modal__dialog.modal__dialog--grid .modal__dialog__body .component-area {
  border: none;
}
.modal__dialog.modal__dialog--grid .modal__dialog__body .component .element {
  pointer-events: auto;
}
.modal__dialog.modal__dialog--grid .modal__dialog__body .context-menu {
  display: none;
}
.modal__dialog.modal__dialog--grid .modal__dialog__body .search__form {
  column-gap: 0.25rem;
}
.modal__dialog.modal__dialog--tree {
  --data-height: calc(var(--data-modal-height) - 5.5rem - 6.125rem);
}
.modal__dialog.modal__dialog--tree.tree--search .modal__dialog__body .tree__wrapper {
  height: calc(100% - 2.625rem);
}
.modal__dialog.modal__dialog--tree .modal__dialog__body {
  height: var(--data-height, auto);
}
.modal__dialog.modal__dialog--tree .modal__dialog__body .tree__wrapper {
  height: 100%;
  border-top: 0.0625rem solid var(--color-gray-030);
  border-bottom: 0.0625rem solid var(--color-gray-030);
}
.modal__dialog.modal__dialog--tree .modal__dialog__body .tree__body {
  height: calc(100% - 1.5rem);
  margin: 0.75rem 0;
  overflow-y: auto;
}
.modal__dialog.modal__dialog--tree .modal__dialog__body .tree__body li:last-child:before {
  background-color: var(--color-gray-000);
}
.modal__dialog.modal__dialog--accessUser {
  --accessUser-border-radius: $border-radius-m;
  --accessUser-modal-bg: var(--color-gray-003);
  --accessUser-surface-bg: var(--color-gray-000);
  --accessUser-box-bg: var(--color-gray-000);
  --accessUser-box-border-color: var(--color-gray-010);
  --accessUser-text-name: var(--color-gray-090);
  --accessUser-text-sub: var(--color-gray-070);
  --accessUser-text-seq: var(--color-gray-050);
  --accessUser-text-empty: var(--color-gray-050);
  --accessUser-hover-bg: var(--color-blue-000);
  --accessUser-focus-bg: var(--color-blue-000);
  --accessUser-active-bg: var(--color-blue-005);
  --accessUser-focus-border-color: var(--color-blue-030);
  --accessUser-active-border-color: var(--color-blue-050);
  --accessUser-selected-bg: var(--color-blue-000);
  --accessUser-selected-border-color: var(--color-blue-050);
  --accessUser-empty-bg: var(--color-gray-003);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body {
  background: var(--accessUser-modal-bg);
  padding: 0 !important;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content {
  padding: 1.25rem;
  min-height: 34.125rem;
  display: flex;
  flex-wrap: wrap;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .tenant__container {
  border-radius: 0.375rem;
  padding: 0.75rem;
  background: var(--accessUser-surface-bg);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .condition__container {
  border-radius: 0.375rem;
  width: 48.5rem;
  padding: 0.75rem;
  background: var(--accessUser-surface-bg);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container {
  flex: 1;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list {
  border-radius: 0.375rem;
  padding: 0.75rem;
  background: var(--accessUser-surface-bg);
  overflow-y: auto;
  height: 555px;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content {
  width: 27.5rem;
  overflow-y: auto;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box {
  border: 0.0625rem solid var(--accessUser-box-border-color);
  border-radius: var(--accessUser-border-radius);
  background: var(--accessUser-box-bg);
  width: 100%;
  padding: 0.75rem;
  cursor: pointer;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content--seq {
  width: 1rem;
  font-size: 0.625rem;
  color: var(--accessUser-text-seq);
  text-align: center;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content--assignee {
  font-size: 0.75rem;
  pointer-events: none;
  min-width: 0;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content--assignee .name {
  color: var(--accessUser-text-name);
  font-weight: 700;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content--assignee .organization,
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content--assignee .position {
  color: var(--accessUser-text-sub);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box .accessUser__box__content button.btn__remove {
  margin-left: auto;
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box:hover {
  background: var(--accessUser-hover-bg);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box:focus {
  background: var(--accessUser-focus-bg);
  border-color: var(--accessUser-focus-border-color);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box:active {
  background: var(--accessUser-active-bg);
  border-color: var(--accessUser-active-border-color);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__list .accessUser__content .accessUser__box.selected {
  background: var(--accessUser-selected-bg);
  border-color: var(--accessUser-selected-border-color);
}
.modal__dialog.modal__dialog--accessUser .modal__dialog__body .detail__content .accessUser__container .accessUser__empty {
  background: var(--accessUser-empty-bg);
  width: 27.5rem;
  height: 23.75rem;
  align-content: center;
  text-align: center;
  height: 100%;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--accessUser-text-empty);
}
.modal__dialog.product-info-modal .modal__dialog__body {
  margin: 1.25rem;
  padding: 0.625rem;
}
.modal__dialog.product-info-modal .modal__dialog__body .product-version {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-gray-090);
  margin: 0 0 0 0.3125rem;
}
.modal__dialog.product-info-modal .modal__dialog__body label {
  font-size: 0.75rem;
  color: var(--color-gray-050);
  margin: 0.3125rem 0;
}
.modal__dialog.product-info-modal .modal__dialog__body .product-href {
  margin: 0.3125rem 0;
  color: #0066FF;
}
.modal__dialog.thumbnail__modal--image .modal__dialog__body, .modal__dialog.thumbnail__modal--file .modal__dialog__body, .modal__dialog.thumbnail__modal--cmdb-icon .modal__dialog__body, .modal__dialog.thumbnail__modal--banner .modal__dialog__body {
  height: calc(var(--data-modal-height) - 5.625rem - 5.938rem);
  scrollbar-width: none;
}
.modal__dialog.thumbnail__modal--image .modal__dialog__body::-webkit-scrollbar, .modal__dialog.thumbnail__modal--file .modal__dialog__body::-webkit-scrollbar, .modal__dialog.thumbnail__modal--cmdb-icon .modal__dialog__body::-webkit-scrollbar, .modal__dialog.thumbnail__modal--banner .modal__dialog__body::-webkit-scrollbar {
  display: none;
}
.modal__dialog.thumbnail__modal--image .modal__dialog__body .scroll-result, .modal__dialog.thumbnail__modal--file .modal__dialog__body .scroll-result, .modal__dialog.thumbnail__modal--cmdb-icon .modal__dialog__body .scroll-result, .modal__dialog.thumbnail__modal--banner .modal__dialog__body .scroll-result {
  height: calc(var(--data-modal-height) - 5.625rem - 5.938rem - 4.375rem);
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body {
  height: calc(var(--data-modal-height) - 5.938rem);
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .field__label {
  margin: 0.625rem 0;
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .date-picker {
  width: 100%;
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .content__ci .attribute-group {
  position: relative;
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.25rem;
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .content__ci .attribute-group .row-view:nth-last-of-type(1) {
  border-bottom-color: var(--color-gray-000);
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-edit .edit-form,
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-view .edit-form {
  height: calc(var(--data-modal-height) - 2rem - 5.938rem - 2.625rem);
  padding: 0 2.5rem;
  overflow-y: auto;
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-edit .field__label,
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-view .field__label {
  margin: 0.625rem 0;
}
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-edit .view-form,
.modal__dialog.cmdb-ci-view-modal .modal__dialog__body .cmdb-ci-content-view .view-form {
  overflow-y: auto;
}
.modal__dialog.organization-mapping-modal .modal__dialog__body {
  overflow: hidden;
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-tree {
  overflow-y: scroll;
  height: calc(var(--data-modal-height) - 5.5rem - 7.625rem - 1.75rem);
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-button {
  align-content: center;
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-button .ic-arrow-double {
  background-color: var(--color-gray-050);
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-button .ic-arrow-double:hover {
  background-color: var(--color-gray-080);
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-edit .organization-group {
  border: 0.0625rem solid var(--color-gray-020);
  border-radius: 0.1875rem;
  width: auto;
  height: auto;
  padding: 0.625rem 0.625rem 0.625rem 0.625rem;
  margin-top: 0.5rem;
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-edit .organization-group:hover {
  border-color: var(--color-gray-040);
}
.modal__dialog.organization-mapping-modal .modal__dialog__body .modal-column-edit .organization-group.selected {
  border-width: 0.0625rem;
  border-color: var(--color-gray-060);
}

@keyframes bookmark-picks-shake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-0.1875rem);
  }
  75% {
    transform: translateX(0.1875rem);
  }
}
.notification {
  position: relative;
  margin: auto 0;
  z-index: 100;
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.notification__ic {
  position: relative;
}
.notification__ic.active + .notification-panel {
  display: block;
}
.notification-panel {
  position: absolute;
  top: auto;
  right: 0;
  border: 0.0625rem solid var(--skeleton-line-color);
  display: none;
  width: 26rem;
  padding: 0.25rem;
  color: var(--text-color);
  background-color: var(--skeleton-bg-color);
  z-index: 25;
}
.notification-panel__header {
  display: flex;
  align-items: center;
  height: 2rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.188rem;
  padding-bottom: 0.25rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  border-bottom: 0.063rem solid var(--color-gray-010);
}
.notification-panel__header__title {
  font-size: 1rem;
  font-weight: 700;
}
.notification-panel__header__total {
  font-size: 0.75rem;
  color: var(--desc-color);
}
.notification-panel__header__message {
  font-size: 0.75rem;
  color: var(--desc-color);
}
.notification-panel__body {
  overflow-y: auto;
  max-height: 30rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.notification-panel__body .noData {
  height: 6.875rem;
  padding: 3rem;
}
.notification-panel__body__list__low {
  border-bottom: 0.063rem solid var(--color-gray-020);
  padding: 0.625rem;
}
.notification-panel__body__list__low:hover {
  background-color: rgba(var(--color-blue-020), 0.1);
}
.notification-panel__body__list__low .ic-active-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-blue-010);
  border-radius: 100%;
  width: 1.75rem;
  height: 1.75rem;
}
.notification-panel__body__list__low .ic-active-bell--l {
  background-color: var(--color-blue-030);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 68%;
}
.notification-panel__body__list__low__title {
  max-width: 15rem;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 0.875rem;
  margin-top: 0.125rem;
}
.notification-panel__body__list__low__title__link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.notification-panel__body__list__low__string {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__low__string:first-of-type {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.875rem;
}
.notification-panel__body__list__low__tag {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__low__date {
  color: var(--color-gray-050);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__low__user {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__low .ic-delete {
  padding: 0;
  background: var(--color-gray-050);
}
.notification-panel__body__list__medium {
  border-bottom: 0.063rem solid var(--color-gray-020);
  padding: 0.625rem;
}
.notification-panel__body__list__medium:hover {
  background-color: rgba(var(--color-vivid-green-030), 0.1);
}
.notification-panel__body__list__medium .ic-active-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-vivid-green-010);
  border-radius: 100%;
  width: 1.75rem;
  height: 1.75rem;
}
.notification-panel__body__list__medium .ic-active-bell--l {
  background-color: var(--color-vivid-green-060);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 68%;
}
.notification-panel__body__list__medium__title {
  max-width: 15rem;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 0.875rem;
  margin-top: 0.125rem;
}
.notification-panel__body__list__medium__title__link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.notification-panel__body__list__medium__string {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__medium__string:first-of-type {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.875rem;
}
.notification-panel__body__list__medium__tag {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__medium__date {
  color: var(--color-gray-050);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__medium__user {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__medium .ic-delete {
  padding: 0;
  background: var(--color-gray-050);
}
.notification-panel__body__list__high {
  border-bottom: 0.063rem solid var(--color-gray-020);
  padding: 0.625rem;
}
.notification-panel__body__list__high:hover {
  background-color: rgba(var(--color-orange-030), 0.1);
}
.notification-panel__body__list__high .ic-active-bell {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-red-010);
  border-radius: 100%;
  width: 1.75rem;
  height: 1.75rem;
}
.notification-panel__body__list__high .ic-active-bell--l {
  background-color: var(--color-red-050);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mask-size: 68%;
}
.notification-panel__body__list__high__title {
  max-width: 15rem;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 0.875rem;
  margin-top: 0.125rem;
}
.notification-panel__body__list__high__title__link:hover {
  cursor: pointer;
  text-decoration: underline;
}
.notification-panel__body__list__high__string {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__high__string:first-of-type {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.875rem;
}
.notification-panel__body__list__high__tag {
  color: var(--color-gray-060);
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__high__date {
  color: var(--color-red-050);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__high__user {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.75rem;
  max-width: 8.5rem;
}
.notification-panel__body__list__high .ic-delete {
  padding: 0;
  background: var(--color-gray-050);
}
.notification__content textarea {
  width: 100%;
}
.notification__content__form {
  width: 76.875rem;
  padding-left: 29.375rem;
}
.notification__content__form__tab {
  padding: 0;
  border-bottom: 0.063rem solid;
  border-color: var(--color-gray-030);
  font-size: 1.25rem;
}
.notification__content__form__tab .token-tab {
  flex: inherit;
  justify-content: center;
  padding: 0.625rem 2rem;
  border-bottom: 0rem;
}
.notification__content__form__tab--label {
  font-size: 1.25rem;
  color: var(--color-gray-050);
}
.notification__content__form__tab .active {
  border-bottom-width: 0.188rem;
  border-color: #0066FF;
  color: var(--color-gray-110);
  font-weight: 600;
}
.notification__content__info {
  width: 29.375rem;
  padding-left: 3.75rem;
}
.notification__content__info__title {
  margin-top: 2.625rem;
  font-size: 1.25rem;
  font-weight: 600;
}
.notification__content__info__type {
  margin-top: 0.813rem;
  font-size: 0.875rem;
  color: var(--color-gray-090);
}
.notification__content__info--list {
  margin-top: 0.625rem;
  font-size: 0.75rem;
  color: var(--color-gray-060);
}

#toast-panel {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 5000;
  pointer-events: none;
}

.z-toast {
  margin-top: 0.5rem;
  pointer-events: auto;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.z-toast--enter {
  opacity: 0;
  transform: translateX(110%);
}
.z-toast--hide {
  overflow: hidden;
  opacity: 0;
  transform: translateX(110%);
  margin-top: 0;
  transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, opacity 0.25s ease-in, transform 0.3s cubic-bezier(0.7, 0, 0.84, 0);
}
.z-toast__card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  width: 22.5rem;
  padding: 0.75rem 2.25rem 0.75rem 0.75rem;
  background-color: var(--color-gray-000);
  border-radius: 0.563rem;
  border: 0.0625rem solid var(--color-gray-020);
  border-left: 0.25rem solid var(--color-blue-030);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.z-toast__card:hover {
  background-color: var(--color-gray-010);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.375rem 0.875rem 0 var(--elevation-color-2);
}
.z-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 100%;
  background-color: var(--color-blue-010);
}
.z-toast__content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.z-toast__title {
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.z-toast__message {
  color: var(--color-gray-070);
  font-size: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}
.z-toast__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  mask-image: url("../../assets/media/icons/common/icon_clear.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  background: var(--color-gray-050);
  padding: 0;
}
.z-toast__close:hover {
  background-color: var(--color-gray-080);
}
.z-toast.__low .z-toast__card {
  border-left-color: var(--color-blue-030);
}
.z-toast.__low .z-toast__icon {
  background-color: var(--color-blue-010);
}
.z-toast.__low .z-toast__icon .ic-active-bell--l {
  background-color: var(--color-blue-030);
}
.z-toast.__medium .z-toast__card {
  border-left-color: var(--color-vivid-green-060);
}
.z-toast.__medium .z-toast__icon {
  background-color: var(--color-vivid-green-010);
}
.z-toast.__medium .z-toast__icon .ic-active-bell--l {
  background-color: var(--color-vivid-green-060);
}
.z-toast.__high .z-toast__card {
  border-left-color: var(--color-red-050);
}
.z-toast.__high .z-toast__icon {
  background-color: var(--color-red-010);
}
.z-toast.__high .z-toast__icon .ic-active-bell--l {
  background-color: var(--color-red-050);
}

@media (prefers-reduced-motion: reduce) {
  .z-toast, .z-toast__card {
    transition: none;
  }
}
.bookmark {
  --bookmark-border-radius: $border-radius-m;
  position: relative;
  margin: auto 0;
  z-index: 100;
  /* ==================================================
   * menu / document 공통
   * ================================================== */
  /* ==================================================
   * document 전용 스타일
   * ================================================== */
  /* ==================================================
   * menu 전용 스타일 (필요하면 여기)
   * ================================================== */
}
.bookmark-menu__ic.active + .bookmark-panel, .bookmark-document__ic.active + .bookmark-panel {
  display: block;
}
.bookmark-menu-panel, .bookmark-document-panel {
  position: absolute;
  top: auto;
  right: 0;
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: var(--bookmark-border-radius);
  display: none;
  width: 22rem;
  color: var(--text-color);
  background-color: var(--skeleton-bg-color);
  z-index: 25;
  /* ---------- header (공통) ---------- */
  /* ---------- body (공통) ---------- */
}
.bookmark-menu-panel__header, .bookmark-document-panel__header {
  display: flex;
  align-items: center;
  height: 2rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 0.063rem solid var(--color-gray-010);
}
.bookmark-menu-panel__header__title, .bookmark-document-panel__header__title {
  font-size: 1rem;
  font-weight: 700;
}
.bookmark-menu-panel__body, .bookmark-document-panel__body {
  overflow-y: auto;
  min-height: 2.875rem;
  padding: 0.25rem;
}
.bookmark-menu-panel__body ul, .bookmark-document-panel__body ul {
  /* display: none; */
  flex-direction: column;
  min-width: 7.5rem;
  margin: 0;
  z-index: 250;
}
.bookmark-document-panel .context-menu__item > .bookmark-document-panel__item {
  align-items: flex-start;
  height: auto !important;
  min-height: 1.875rem;
}
.bookmark-document-panel__item-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}
.bookmark-document-panel__menu-path {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.personal-setting {
  --personal-setting-border-radius: $border-radius-m;
  position: relative;
  margin: auto 0;
  z-index: 100;
}
.personal-setting__ic.active + .-panel {
  display: block;
}
.personal-setting-panel {
  position: absolute;
  top: auto;
  right: 0;
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: var(--personal-setting-border-radius);
  display: none;
  width: 22rem;
  color: var(--text-color);
  background-color: var(--skeleton-bg-color);
  z-index: 25;
}
.personal-setting-panel__header {
  display: flex;
  align-items: center;
  height: 2rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-top: 0.188rem;
  padding-bottom: 0.25rem;
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  border-bottom: 0.063rem solid var(--color-gray-010);
}
.personal-setting-panel__header__title {
  font-size: 1rem;
  font-weight: 700;
}
.personal-setting-panel__body li:hover {
  cursor: pointer;
  color: var(--color-gray-070);
  background: var(--color-blue-000);
  border: var(--color-blue-000);
}

/*
 * @file components/_datagrid.scss
 * @description Data Grid/페이징 목록 디자인
 *
 * @description 라이브러리인 /vendor/tabulator/tabulator.css 를 재정의하여 디자인함
 *              변수를 통해 중복되는 코드 제거 및 코드 컨벤션에 맞게 수정
 */
.tabulator {
  border: none;
  background-color: var(--grid-bg-color);
  color: var(--text-color);
  /*.tabulator-col-resize-handle {
    width: 6px; // 6px
    right: -3px; // -3px
    background: transparent;
    @include border(0.0625rem, solid, var(--grid-line-color), right);
    //transition: border-right 0.2s ease;
    @include transition(border-right 0.2s ease);

    &:hover, &:active  {
      @include border(0.188rem, solid, var(--grid-resize-handle-color), right); // 3px
      cursor: col-resize;
    }
  }*/
}
.tabulator .tabulator-header {
  background-color: var(--grid-header-bg-color);
  border-top: 0.0625rem solid var(--grid-line-color);
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.tabulator .tabulator-header .tabulator-col {
  border-right: 0.0625rem solid var(--grid-line-color);
  background: var(--grid-header-bg-color);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
  color: var(--grid-header-text-color);
  font-size: 0.875rem;
  font-weight: 700;
  padding-right: 0;
}
.tabulator .tabulator-header .tabulator-col.tabulator-moving {
  background: var(--bg-color-focus);
  border: 0.0625rem solid var(--line-color-focus);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background-color: var(--grid-header-bg-color);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-title {
  padding-right: 0;
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .ic-sorting {
  background: var(--grid-sort-icon-color);
  transform: rotate(180deg);
}
.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=descending] .ic-sorting {
  background: var(--grid-sort-icon-color);
}
.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
  padding: 0.5rem;
}
.tabulator .tabulator-tableholder {
  overflow-x: scroll !important;
}
.tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--grid-bg-color);
  color: var(--text-color);
}
.tabulator .tabulator-tableholder .tabulator-row {
  height: auto;
  background-color: var(--grid-bg-color);
}
.tabulator .tabulator-tableholder .tabulator-row:hover {
  background-color: var(--grid-bg-color-hover);
}
.tabulator .tabulator-tableholder .tabulator-row.inactive {
  color: var(--text-color-readonly);
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  border-right: 0.0625rem solid var(--grid-line-color);
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell.tabulator-align-left {
  justify-content: start;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell.tabulator-align-center {
  justify-content: center;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell.tabulator-align-right {
  justify-content: flex-end;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .document-labeling {
  display: inline-flex;
  cursor: pointer;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .document-labeling.active .document-labeling-icon {
  fill: #0066FF;
  stroke: #0052F7;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .document-star {
  display: inline-flex;
  cursor: pointer;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .document-star.active .document-star-icon {
  fill: #FADF2D;
  stroke: #D7BC20;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .cell__time {
  display: flex;
  align-items: center;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .cell__time .value {
  flex: 1 1 auto;
  min-width: 0.75rem;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell .cell__time .fromNow {
  flex: 0 0 auto;
}
.tabulator .tabulator-tableholder .tabulator-row .tabulator-cell--merge-up {
  border-bottom-color: var(--grid-bg-color);
}
.tabulator .tabulator-footer {
  display: none;
  border-top: 0.0625rem solid var(--grid-line-color);
  background-color: var(--grid-bg-color);
  color: var(--text-color);
}

.datagrid__pagination {
  border-top: 0.0625rem solid var(--skeleton-line-color);
  background-color: var(--grid-bg-color);
  padding: 0.5rem 0.75rem;
  color: var(--text-color);
  border-bottom-right-radius: 0.563rem;
  border-bottom-left-radius: 0.563rem;
}

.datagrid__empty {
  --grid-empty-text-color: var(--color-gray-070);
  border-top: 0.0625rem solid var(--skeleton-line-color);
  align-items: center;
  justify-content: center;
  container-type: size;
  overflow: hidden;
}
.datagrid__empty .empty__icon .ic-no-data,
.datagrid__empty .empty__icon .ic-no-search {
  width: 16.25rem;
  height: 16.25rem;
}
@media screen and (max-width: 1024px) {
  .datagrid__empty .empty__icon .ic-no-data,
.datagrid__empty .empty__icon .ic-no-search {
    width: 12.5rem !important;
    height: 12.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .datagrid__empty .empty__icon .ic-no-data,
.datagrid__empty .empty__icon .ic-no-search {
    width: 10rem !important;
    height: 10rem !important;
  }
}
@media screen and (max-width: 480px) {
  .datagrid__empty .empty__icon .ic-no-data,
.datagrid__empty .empty__icon .ic-no-search {
    width: 7.5rem !important;
    height: 7.5rem !important;
  }
}
.datagrid__empty .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--grid-empty-text-color);
}
.datagrid__empty .empty__subtitle {
  color: var(--grid-empty-text-color);
}

@container (max-height: 450px) {
  .datagrid__empty .empty__icon .ic-no-data, .datagrid__empty .empty__icon .ic-no-search {
    width: 12.5rem;
    height: 12.5rem;
  }
}
@container (max-height: 245px) {
  .datagrid__empty .empty__icon {
    display: none !important;
  }
}
/*
 * @file components/_spinner.scss
 * @description 로딩바 디자인
 * @version 1.0
 */
.spinner-container {
  --spinner-color-1: rgba(140, 148, 176, 0.3);
  --spinner-color-2: rgba(140, 148, 176, 0.5);
  --spinner-color-3: rgba(140, 148, 176, 1);
  position: relative;
  z-index: 9999;
}
.spinner-container .spinner-panel {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  animation-delay: 0s;
  animation-duration: auto;
  animation-name: spinner;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
}
.spinner-container .spinner-panel .spinner-text {
  position: absolute;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color-readonly);
  animation-delay: 0s;
  animation-duration: auto;
  animation-name: dots;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-direction: normal;
}
.spinner-container .spinner-panel .spinner-text .dots::after {
  content: "";
  display: inline-block;
  width: 1em;
  text-align: left;
  animation: dots 1.5s steps(4, end) infinite;
}
.spinner-container .spinner-panel .spinner {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spinner 1s linear infinite;
  background: conic-gradient(var(--spinner-color-3) 0%, var(--spinner-color-2) 25%, var(--spinner-color-1) 50%, var(--spinner-color-2) 75%, var(--spinner-color-3) 100%);
  mask: radial-gradient(farthest-side, transparent 90%, black 91%);
}
.spinner-container .spinner-panel .spinner-circle-s {
  width: 24px;
  height: 24px;
  border: 4px solid var(--color-gray-040);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: spinner 1s linear infinite;
}

/*
 * @file components/_pagination.scss
 * @description pagination 디자인
 */
.pagination {
  font-size: 0.875rem;
  font-weight: 400;
}
.pagination .btn__paging--arrow, .pagination .btn__paging--number {
  display: inline-block;
  overflow: visible;
  border-radius: 0.188rem;
  vertical-align: middle;
  opacity: 1;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}
.pagination .btn__paging--arrow:focus, .pagination .btn__paging--arrow:hover, .pagination .btn__paging--number:focus, .pagination .btn__paging--number:hover {
  outline: 0;
}
.pagination .btn__paging--arrow:disabled, .pagination .btn__paging--arrow.disabled, .pagination .btn__paging--number:disabled, .pagination .btn__paging--number.disabled {
  cursor: default;
}
.pagination .btn__paging--arrow {
  padding: 0.25rem;
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-015);
}
.pagination .btn__paging--arrow [class*=ic-] {
  background: var(--color-gray-070);
  pointer-events: none;
}
.pagination .btn__paging--arrow:focus {
  background-color: var(--color-gray-000);
  border-color: var(--color-blue-030);
}
.pagination .btn__paging--arrow:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.pagination .btn__paging--arrow:hover {
  background-color: var(--color-blue-000);
  border-color: var(--color-gray-015);
}
.pagination .btn__paging--arrow:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.pagination .btn__paging--arrow:enabled:active, .pagination .btn__paging--arrow:enabled.active {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.pagination .btn__paging--arrow:enabled:active [class*=ic-], .pagination .btn__paging--arrow:enabled.active [class*=ic-] {
  background: var(--color-gray-070);
}
.pagination .btn__paging--arrow:disabled, .pagination .btn__paging--arrow.disabled {
  background-color: var(--color-gray-005);
  border-color: var(--color-gray-015);
}
.pagination .btn__paging--arrow:disabled [class*=ic-], .pagination .btn__paging--arrow.disabled [class*=ic-] {
  background: var(--color-gray-030);
}
.pagination .btn__paging--number {
  color: var(--color-gray-070);
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-015);
  line-height: 1.3;
  padding: 0.313rem 0.625rem;
}
.pagination .btn__paging--number:focus {
  color: var(--color-gray-070);
  background-color: var(--color-gray-000);
  border-color: var(--color-blue-030);
}
.pagination .btn__paging--number:hover {
  color: var(--color-gray-070);
  background-color: var(--color-blue-000);
  border-color: var(--color-gray-015);
}
.pagination .btn__paging--number:enabled:active, .pagination .btn__paging--number:enabled.active {
  color: var(--color-gray-070);
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.pagination .btn__paging--number:disabled, .pagination .btn__paging--number.disabled {
  color: var(--color-gray-030);
  background-color: var(--color-gray-005);
  border-color: var(--color-gray-015);
}
.pagination .btn__paging--number.selected {
  color: var(--color-blue-050);
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.pagination .btn__paging--number.selected:focus, .pagination .btn__paging--number.selected:hover {
  color: var(--color-blue-050);
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-050);
}
.pagination .more {
  display: inline-block;
  width: 1.875rem;
  height: 1.875rem;
  line-height: 1.3;
  padding: 0.313rem 0.625rem;
}
.pagination .pagination__label {
  font-size: 0.75rem;
  color: var(--color-gray-070);
}

/** 
 * 팝업 디자인
 * components/_popup.scss
 * 화면 : 공지사항 팝업
 */
.popup {
  width: 100%;
  height: 100vh;
  background-color: var(--color-gray-000);
}
.popup .notice-popup {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.popup .notice-popup .view-title h2 {
  line-height: 1.3;
}
.popup .notice-popup__body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.popup .notice-popup__content {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: calc(100vh - 16rem);
  min-height: clamp(10rem, 100vh - 20rem, 20rem);
}
.popup .notice-popup__footer {
  flex: 0 0 auto;
}

.custom-chart__help h4 {
  margin-top: 0.31235rem;
  margin-bottom: 0.3125rem;
}
.custom-chart__help p {
  line-height: 1.2;
  margin-left: 1.5625rem;
}
.custom-chart__help p.height-add {
  line-height: 1.5;
}

:root {
  --tag-placeholder-color: var(--color-gray-015);
  --tag-bg-color: var(--color-gray-000);
  --tag-bg-color-invalid: #FDEFEC;
  --tag-border-color: var(--color-gray-020);
  --tag-border-color-invalid: #DE3412;
  --tag-border-radius: $border-radius-s;
  --tag-remove-btn-color: var(--color-gray-070);
  --tag-dropdown-bg-color: var(--color-gray-000);
  --tag-dropdown-shadow-color: rgba(96, 104, 133, 0.3);
  --tag-dropdown-border-color: var(--color-gray-003);
  --tag-dropdown-item-color-hover: var(--color-blue-000);
  --tag-dropdown-name-text-color: var(--color-gray-070);
  --tag-dropdown-team-text-color: var(--color-gray-050);
}

.tagify {
  --tag--min-width: 1ch;
  --tag--max-width: 100%;
  border: 0.063rem solid var(--line-color);
  border-radius: var(--tag-border-radius);
  display: inline-flex;
  align-items: flex-start;
  align-content: baseline;
  flex-wrap: wrap;
  padding: 0;
  line-height: 0;
  outline: none;
  position: relative;
  box-sizing: border-box;
  transition: 0.1s;
  background: var(--bg-color);
}
@keyframes tags--bump {
  30% {
    transform: scale(1.2);
  }
}
.tagify:has(.tagify__input) {
  min-height: 1.875rem;
}
.tagify[disabled] {
  background: var(--bg-color-disabled);
  color: var(--text-color-disabled);
  filter: saturate(0);
  opacity: 0.5;
  pointer-events: none;
}
.tagify[disabled].tagify--empty > .tagify__input::before {
  position: relative;
}
.tagify[readonly]:not(.tag-properties) {
  background: transparent;
  border: none;
}
.tagify[readonly].tagify--select, .tagify[disabled].tagify--select {
  pointer-events: none;
}
.tagify[readonly]:not(.tagify--select):not(.tagify--empty), .tagify[disabled]:not(.tagify--select):not(.tagify--empty) {
  cursor: default;
}
.tagify[readonly]:not(.tagify--select):not(.tagify--empty) > .tagify__input, .tagify[disabled]:not(.tagify--select):not(.tagify--empty) > .tagify__input {
  visibility: hidden;
  display: none;
  width: 0;
  margin: 0.125rem 0;
}
.tagify[readonly] .tagify__tag__removeBtn, .tagify[disabled] .tagify__tag__removeBtn {
  display: none;
}
.tagify[readonly] .tagify__tag-text, .tagify[disabled] .tagify__tag-text {
  padding-right: 0.5rem;
}
.tagify.error {
  border-color: var(--line-color-error);
}
.tagify:hover:not([readonly]):not(.tagify--focus) {
  border-color: var(--line-color-hover);
  background: var(--bg-color-hover);
}
.tagify + input,
.tagify + textarea {
  position: absolute !important;
  left: -9999em !important;
  transform: scale(0) !important;
}
.tagify__tag {
  border: 0.063rem solid var(--tag-border-color);
  border-radius: var(--tag-border-radius);
  display: inline-flex;
  align-items: center;
  max-width: var(--tag--max-width);
  margin-inline: 0.125rem 0;
  margin-block: 0.125rem;
  position: relative;
  z-index: 1;
  outline: none;
  line-height: normal;
  cursor: default;
  transition: 0.13s ease-out;
  background: var(--tag-bg-color);
  box-sizing: border-box;
}
.tagify__tag > div:not(.user-popover) {
  border-radius: var(--tag-border-radius);
  display: flex;
  flex: 1;
  vertical-align: top;
  box-sizing: border-box;
  max-width: 100%;
  color: var(--text-color);
  line-height: inherit;
  white-space: nowrap;
  transition: 0.13s ease-out;
}
.tagify__tag > div:not(.user-popover) > * {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
  min-width: var(--tag--min-width);
  max-width: var(--tag--max-width);
  transition: 0.8s ease, 0.1s color;
}
.tagify__tag > div:not(.user-popover) > *:only-child {
  width: 100%;
}
.tagify__tag > div:not(.user-popover)::before {
  content: "";
  position: absolute;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  transition: 120ms ease;
  animation: tags--bump 0.3s ease-out 1;
}
.tagify__tag:hover:not([readonly]) {
  background: var(--bg-color-hover);
}
.tagify__tag--flash div::before {
  animation: none;
}
.tagify__tag--hide {
  width: 0 !important;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  opacity: 0;
  transform: scale(0);
  transition: 0.3s;
  pointer-events: none;
}
.tagify__tag--hide > div > * {
  white-space: nowrap;
}
.tagify__tag.tagify--noAnim > div::before {
  animation: none;
}
.tagify__tag.tagify--notAllowed:not(.tagify__tag--editable) {
  border: 0.0625rem solid var(--tag-border-color-invalid);
  background: var(--tag-bg-color-invalid);
}
.tagify__tag[readonly] .tagify__tag__removeBtn {
  display: none;
}
.tagify__tag:not([readonly]) {
  margin-top: 0.188rem;
  margin-left: 0.25rem;
}
.tagify__tag:not([readonly]):not(.user__tag) {
  padding: 0.063rem 0.25rem;
}
.tagify__tag--editable > .tagify__tag__removeBtn {
  pointer-events: none;
  opacity: 0;
  transform: translateX(100%) translateX(0.313rem);
}
.tagify__tag--editable.tagify--invalid > div::before {
  box-shadow: inset 0 0 0 0.125rem var(--tag-bg-color-invalid);
}
.tagify__tag--editable:hover::before {
  background-color: var(--bg-color-hover);
}
.tagify__tag__removeBtn {
  width: 0.875rem;
  height: 0.875rem;
  -webkit-mask-image: url("../../assets/media/icons/icon_clear_tag.svg");
  mask-image: url("../../assets/media/icons/icon_clear_tag.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  order: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3.125rem;
  cursor: pointer;
  background: var(--tag-remove-btn-color);
  color: var(--tag-remove-btn-color);
  margin: 0 0.125rem 0 0;
  overflow: hidden;
  transition: 0.2s ease-out;
}
.tagify__tag__avatar-wrap {
  grid-area: avatar;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.188rem;
  border-radius: 50%;
  overflow: hidden;
}
.tagify__tag__avatar-wrap > img {
  width: 100%;
  vertical-align: top;
}
.tagify__tag.user__tag {
  border-radius: 1.25rem;
}
.tagify__tag.user__tag > div:not(.user-popover) {
  padding: 0.063rem;
}
.tagify__tag-text {
  padding-right: 0.25rem;
  cursor: pointer;
}
.tagify.grid__tag {
  padding: 0.375rem 0;
}
.tagify.grid__tag .tagify__tag {
  margin-inline: 0;
  margin-block: 0;
  font-size: 0.75rem;
  padding: 0 0.5rem;
}
.tagify.grid__tag .tagify__tag-text {
  padding-right: 0;
}
.tagify .tagify__input br {
  display: none;
}
.tagify .tagify__input * {
  display: inline;
  white-space: nowrap;
}
.tagify__input {
  flex-grow: 1;
  display: inline-block;
  min-width: 3.125rem;
  padding: 0.188rem 0.313rem;
  margin: 0.125rem;
  line-height: normal;
  position: relative;
  white-space: pre-wrap;
  color: var(--text-color);
  box-sizing: inherit;
  overflow: hidden;
}
.tagify__input:focus {
  outline: none;
}
.tagify__input:focus::before {
  transition: 0.2s ease-out;
  opacity: 0;
  transform: translatex(0.375rem);
}
.tagify__input:focus:empty::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  color: var(--tag-placeholder-color);
}
.tagify__input::before {
  content: attr(data-placeholder);
  width: 100%;
  height: 100%;
  margin: auto 0;
  z-index: 1;
  color: var(--tag-placeholder-color);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
}
.tagify__input::after {
  content: attr(data-suggest);
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  min-width: calc(100% - 1.5em);
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: pre;
  color: var(--text-color);
  opacity: 0.3;
  pointer-events: none;
  max-width: 6.25rem;
}
.tagify__input .tagify__tag {
  margin: 0 0.063rem;
}
.tagify--empty .tagify__input::before {
  transition: 0.2s ease-out;
  opacity: 1;
  transform: none;
  display: inline-block;
  width: auto;
}
.tagify--focus {
  border: 0.063rem solid var(--line-color-focus);
  background-color: var(--bg-color-focus);
  transition: 0s;
}
.tagify--invalid {
  border: 0.063rem solid var(--tag-border-color-invalid);
}
.tagify__dropdown {
  position: absolute;
  z-index: 9999;
  transform: translateY(-0.063rem);
  border-top: 1px solid var(--tag-dropdown-border-color);
  overflow: hidden;
  margin-top: 0.3125rem;
  padding: 0 0.188rem;
}
.tagify__dropdown[dir=rtl] {
  transform: translate(-100%, -0.063rem);
}
.tagify__dropdown[placement=top] {
  margin-top: 0;
  transform: translateY(-100%);
}
.tagify__dropdown[placement=top] .tagify__dropdown__wrapper {
  border-top-width: 0.069rem;
  border-bottom-width: 0;
}
.tagify__dropdown[position=text] {
  font-size: 0.9em;
}
.tagify__dropdown[position=text] .tagify__dropdown__wrapper {
  border-width: 1px;
}
.tagify__dropdown__wrapper {
  border: 0.063rem solid var(--tag-dropdown-border-color);
  border-radius: 0.188rem;
  box-shadow: 0 0.25rem 0.188rem 0 var(--tag-dropdown-shadow-color);
  scroll-behavior: auto;
  max-height: 13.75rem;
  overflow: hidden;
  color: var(--text-color);
  background: var(--tag-dropdown-bg-color);
  transition: 0.3s cubic-bezier(0.5, 0, 0.3, 1), transform 0.15s;
  animation: dd-wrapper-show 0s 0.3s forwards;
}
@keyframes dd-wrapper-show {
  to {
    overflow-y: auto;
  }
}
.tagify__dropdown__header:empty {
  display: none;
}
.tagify__dropdown__footer:empty {
  display: none;
}
.tagify__dropdown--initial .tagify__dropdown__wrapper {
  max-height: 1.25rem;
  transform: translateY(-1em);
}
.tagify__dropdown__item {
  border-radius: var(--tag-border-radius);
  box-sizing: border-box;
  padding: 0.375rem 0.5rem;
  margin: 0.063rem 0.375rem;
  white-space: pre-wrap;
  cursor: pointer;
  position: relative;
  outline: none;
  height: 1.875rem;
  max-height: 1.875rem;
  max-width: 100%;
  line-height: normal;
}
.tagify__dropdown__item--active {
  background: var(--tag-dropdown-item-color-hover);
}
.tagify__dropdown__item:active {
  filter: brightness(105%);
}
.tagify__dropdown.tags-look .tagify__dropdown__item {
  border: 0.063rem solid var(--tag-border-color);
  border-radius: var(--tag-border-radius);
  transition: 0s;
  background: var(--tag-bg-color);
  height: fit-content;
  display: inline-block;
  margin: 0.5rem 0.25rem;
  padding: 0.188rem 0.25rem;
}
.tagify__dropdown.tags-look .tagify__dropdown__item:hover {
  background: var(--bg-color-hover);
}
.tagify__dropdown.users-list .tagify__dropdown__item {
  display: grid;
  grid-template-areas: "avatar name team";
  grid-template-columns: auto auto 1fr;
  gap: 0 0.375rem;
}
.tagify__dropdown.users-list .tagify__dropdown__item__avatar-wrap {
  grid-area: avatar;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  overflow: hidden;
}
.tagify__dropdown.users-list .tagify__dropdown__item__avatar-wrap img {
  width: 100%;
  vertical-align: top;
}
.tagify__dropdown.users-list .tagify__dropdown__item strong {
  grid-area: name;
  width: 100%;
  color: var(--tag-dropdown-name-text-color);
  font-size: 0.875rem;
  white-space: nowrap;
}
.tagify__dropdown.users-list .tagify__dropdown__item span {
  grid-area: team;
  width: 100%;
  color: var(--tag-dropdown-team-text-color);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * @file components/_text-editor.scss
 * @description Customize Quill Editor v1.3.6 (https://quilljs.com/)
 * @version 1.0
 */
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:hover, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label:hover, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label:hover, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label:hover,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item:hover {
  background-color: var(--ql-bg-color-hover);
  color: var(--ql-text-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:focus, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label:focus, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label:focus, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label:focus,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item:focus {
  border: 0.0625rem solid var(--ql-line-color-hover);
  border-radius: 0.188rem;
  background-color: var(--ql-bg-color);
  color: var(--ql-text-color-hover);
}

.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button.ql-active {
  background-color: var(--ql-bg-color-hover);
  color: var(--ql-icon-color-active);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button.ql-active:hover {
  background-color: var(--ql-bg-color-active-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button.ql-active .ql-icon {
  fill: var(--ql-icon-color-active);
}

.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker.ql-expanded .ql-picker-label, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker.ql-expanded .ql-picker-label, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-label {
  border-radius: 0.188rem;
  border-color: transparent;
  background-color: var(--ql-bg-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker.ql-expanded .ql-picker-label:hover, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker.ql-expanded .ql-picker-label:hover, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-label:hover {
  background-color: var(--ql-bg-color-active-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker.ql-expanded .ql-picker-label .ql-icon, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker.ql-expanded .ql-picker-label .ql-icon, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-label .ql-icon {
  fill: var(--ql-icon-color-active);
}

.ql-wrapper-container {
  --ql-text-color: var(--color-gray-090);
  --ql-text-color-hover: var(--color-gray-070);
  --ql-text-color-disabled: var(--color-gray-030);
  --ql-line-color: var(--color-gray-015);
  --ql-line-color-hover: var(--color-blue-030);
  --ql-line-color-focus: var(--color-blue-050);
  --ql-line-color-table: var(--color-gray-020);
  --ql-shadow-color: var(--color-gray-030);
  --ql-bg-color: var(--color-gray-000);
  --ql-bg-color-hover: var(--color-blue-000);
  --ql-bg-color-active-hover: var(--color-blue-005);
  --ql-bg-color-readonly: var(--color-gray-005);
  --ql-icon-color: var(--color-gray-080);
  --ql-icon-color-active: var(--color-blue-050);
  --ql-icon-color-readonly: var(--color-gray-040);
  --ql-error-line-color: var(--line-color-error);
  --ql-mention-text-color: var(--color-blue-050);
  --ql-table-picker-line-color: var(--color-gray-015);
  --ql-table-picker-line-color-hover: var(--color-blue-030);
  --ql-table-picker-bg-color-active: var(--color-blue-000);
  --ql-editor-table-line-color: var(--color-gray-010);
  --ql-editor-table-bg-color: var(--color-gray-000);
  --ql-editor-table-text-color: var(--color-gray-090);
  --ql-operation-menu-line-color: var(--color-gray-003);
  --ql-operation-menu-bg-color: var(--color-gray-000);
  --ql-operation-menu-text-color: var(--color-gray-070);
  --ql-operation-menu-sub-text-color: var(--color-gray-050);
  --ql-operation-menu-bg-color-hover: var(--color-blue-000);
  --ql-operation-menu-bg-color-focus: var(--color-blue-005);
  --ql-operation-menu-shadow-color: var(--color-gray-030);
  background-color: transparent;
}
.ql-wrapper-container .ql-toolbar *:focus {
  outline: none !important;
}
.ql-wrapper-container .ql-toolbar.ql-snow {
  border: 0.0625rem solid var(--ql-line-color);
  border-radius: 0.188rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 0;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-picker {
  color: var(--ql-text-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats {
  border-right: 0.0625rem solid var(--ql-line-color);
  margin: 0.125rem 0;
  padding: 0;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats:has(.ql-image) {
  border: none;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-picker-label,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-picker-item.ql-active {
  color: var(--ql-line-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header {
  width: 6.25rem;
  height: 1.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item {
  padding: 0.188rem 0.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label:not(.ql-color-picker):not(.ql-icon-picker) svg,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item:not(.ql-color-picker):not(.ql-icon-picker) svg {
  right: 4%;
  top: 40%;
  margin: auto;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label:not(.ql-color-picker):not(.ql-icon-picker) svg .ql-arrow,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item:not(.ql-color-picker):not(.ql-icon-picker) svg .ql-arrow {
  fill: var(--ql-text-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-label::before,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-item::before {
  line-height: unset !important;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-options {
  box-shadow: 0 0.125rem 0.75rem 0 var(--ql-shadow-color);
  border-radius: 0.25rem;
  padding: 2px;
  z-index: 25;
  line-height: 1.3;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-options .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
  line-height: 1.2;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-options .ql-picker-item[data-value="2"]::before {
  font-size: 1.5em;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-options .ql-picker-item[data-value="3"]::before {
  font-size: 1.17em;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header .ql-picker-options .ql-picker-item[data-value="4"]::before {
  font-size: 0.83em;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-label svg {
  transform: rotate(180deg);
  transform-origin: 50% 50%;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-options {
  margin-left: -0.0625rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-header.ql-expanded .ql-picker-options .ql-picker-item.ql-selected {
  color: var(--ql-line-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker {
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 0.25rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker:first-child {
  margin-left: 0.25rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label {
  padding: 0 !important;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label:active {
  border: 0.0625rem solid var(--ql-line-color-focus);
  border-radius: 0.188rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label svg {
  width: 1.5rem;
  height: 1.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label svg .ql-transparent {
  opacity: 1;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label svg .ql-label,
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label svg .bg-line {
  fill: var(--ql-icon-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label svg .bg {
  fill: var(--ql-bg-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-label.ql-active[data-value]:not([data-value=""]) svg .ql-label {
  fill: var(--ql-bg-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-options {
  box-shadow: 0 0.125rem 0.75rem 0 var(--ql-shadow-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker .ql-picker-options .ql-picker-item {
  border-radius: 0.188rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker.ql-expanded .ql-picker-options {
  border-color: var(--ql-bg-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-color-picker.ql-expanded .ql-picker-options .ql-picker-item.ql-selected {
  border-color: var(--ql-line-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker {
  width: 1.5rem;
  height: 1.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 !important;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label:active {
  border: 0.0625rem solid var(--ql-line-color-focus);
  border-radius: 0.188rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label::before {
  display: none;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-label svg {
  position: static;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-options {
  box-shadow: 0 0.125rem 0.75rem 0 var(--ql-shadow-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-options .create_select_block_item {
  border-color: var(--ql-table-picker-line-color);
  border-radius: 0.188rem;
  cursor: pointer;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-options .create_select_block_item:hover {
  border-color: var(--ql-table-picker-line-color-hover);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker .ql-picker-options .create_select_block_item.active {
  border-color: var(--ql-table-picker-line-color-hover);
  background-color: var(--ql-table-picker-bg-color-active);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker.ql-expanded .ql-picker-options {
  border-color: var(--ql-bg-color);
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats .ql-table.ql-picker.ql-expanded .ql-picker-options .create_select_custom {
  display: none !important;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button {
  position: relative;
  border-radius: 0.188rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.25rem;
  padding: 0;
  line-height: 1;
  vertical-align: middle;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:last-child {
  margin-right: 0.25rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button svg {
  display: block;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:after {
  content: "";
  position: absolute;
  background: transparent;
}
.ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:enabled:active, .ql-wrapper-container .ql-toolbar.ql-snow .ql-formats button:enabled.active {
  border: 0.0625rem solid var(--ql-line-color-focus);
  border-radius: 0.188rem;
  background-color: var(--ql-bg-color-hover);
}
.ql-wrapper-container .ql-toolbar-hidden {
  display: none;
}
.ql-wrapper-container .ql-toolbar-readonly .ql-picker {
  color: var(--ql-icon-color-readonly) !important;
}
.ql-wrapper-container .ql-toolbar-readonly .ql-icon,
.ql-wrapper-container .ql-toolbar-readonly .ql-transparent {
  fill: var(--ql-icon-color-readonly) !important;
}
.ql-wrapper-container .ql-toolbar-readonly .bg {
  opacity: 0;
}
.ql-wrapper-container .ql-toolbar-readonly button.ql-active .ql-icon {
  fill: var(--ql-icon-color-active) !important;
}
.ql-wrapper-container .ql-container.ql-snow {
  border: 0.0625rem solid var(--ql-line-color);
  border-radius: 0.188rem;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  height: auto;
  color: var(--ql-text-color);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.2;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor {
  height: auto;
  padding: 0.625rem;
  resize: vertical;
  overflow-y: auto;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor.ql-blank::before {
  content: attr(data-placeholder);
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor h1, .ql-wrapper-container .ql-container.ql-snow .ql-editor h2, .ql-wrapper-container .ql-container.ql-snow .ql-editor h3, .ql-wrapper-container .ql-container.ql-snow .ql-editor h4, .ql-wrapper-container .ql-container.ql-snow .ql-editor h5, .ql-wrapper-container .ql-container.ql-snow .ql-editor h6 {
  line-height: 1.2;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor em {
  font-style: italic;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor strong {
  font-weight: bold;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-mention {
  color: var(--ql-mention-text-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-wrapper {
  padding: 0;
  border-radius: 0.375rem;
  background-color: var(--ql-editor-table-bg-color);
  overflow: hidden;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table {
  width: 100%;
  border: 0.0625rem solid var(--ql-editor-table-line-color);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0.375rem;
  table-layout: fixed;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-cell {
  min-width: 5rem;
  height: 2rem;
  padding: 0 0.75rem;
  border: none;
  border-right: 0.0625rem solid var(--ql-editor-table-line-color);
  border-bottom: 0.0625rem solid var(--ql-editor-table-line-color);
  background-color: var(--ql-editor-table-bg-color);
  color: var(--ql-editor-table-text-color);
  font-size: 0.875rem;
  vertical-align: middle;
  white-space: normal;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-cell:last-child {
  border-right: none;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table tr:first-child .ql-table-cell:first-child {
  border-top-left-radius: 0.375rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table tr:first-child .ql-table-cell:last-child {
  border-top-right-radius: 0.375rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table tr:last-child .ql-table-cell {
  border-bottom: none;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table tr:last-child .ql-table-cell:first-child {
  border-bottom-left-radius: 0.375rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table tr:last-child .ql-table-cell:last-child {
  border-bottom-right-radius: 0.375rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-cell-inner {
  display: block;
  min-width: 100%;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-tooltip {
  overflow: hidden;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-col-header {
  box-sizing: border-box;
  border: none;
  border-right: 0.0625rem solid var(--ql-editor-table-line-color);
  background-color: var(--ql-editor-table-bg-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-col-header:last-child {
  border-right: none;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-col-separator {
  right: -0.0625rem;
  width: 0.125rem;
  background-color: transparent;
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-drag-line,
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-selection_line {
  border-color: var(--ql-table-picker-line-color-hover);
}
.ql-wrapper-container .ql-container.ql-snow .ql-editor .ql-table-drag-line {
  background-color: var(--ql-table-picker-line-color-hover);
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu {
  width: 12.5rem;
  max-height: 17.5rem;
  padding: 0.25rem;
  border: 0.0625rem solid var(--ql-operation-menu-line-color);
  border-radius: 0.188rem;
  box-shadow: 0 0.125rem 0.75rem 0 var(--ql-operation-menu-shadow-color);
  background-color: var(--ql-operation-menu-bg-color);
  color: var(--ql-operation-menu-text-color);
  font-size: 0.875rem;
  overflow: auto;
  z-index: 250;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-item {
  display: flex;
  align-items: center;
  min-height: 1.875rem;
  margin: 0.125rem 0;
  padding: 0.313rem 0.5rem;
  border: 0.0625rem solid var(--ql-operation-menu-bg-color);
  border-radius: 0.188rem;
  background-color: var(--ql-operation-menu-bg-color);
  color: var(--ql-operation-menu-text-color);
  line-height: 1.3;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-item:hover {
  border-color: var(--ql-operation-menu-bg-color-hover);
  background-color: var(--ql-operation-menu-bg-color-hover);
  color: var(--ql-operation-menu-text-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-item:focus {
  border-color: var(--ql-operation-menu-bg-color-focus);
  background-color: var(--ql-operation-menu-bg-color-focus);
  color: var(--ql-operation-menu-text-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-item:active, .ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-item.active {
  border-color: var(--ql-operation-menu-bg-color-focus);
  background-color: var(--ql-operation-menu-bg-color-focus);
  color: var(--ql-operation-menu-text-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1rem;
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: inherit;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-icon svg {
  width: 1rem;
  height: 1rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-icon svg .ql-stroke {
  stroke: currentColor;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-icon svg .ql-fill {
  fill: currentColor;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-dividing {
  height: 0.0625rem;
  margin: 0.25rem 0;
  background-color: var(--ql-operation-menu-line-color);
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-subtitle,
.ql-wrapper-container .ql-container.ql-snow .ql-table-operation-menu-hit {
  margin: 0.125rem 0;
  padding: 0.313rem 0.5rem;
  color: var(--ql-operation-menu-sub-text-color);
  font-size: 0.75rem;
}
.ql-wrapper-container .ql-container.ql-snow .ql-table-selection_line {
  border-width: 0.0625rem;
}
.ql-wrapper-container .ql-container.ql-disabled .ql-editor, .ql-wrapper-container .ql-container.ql-readonly .ql-editor {
  resize: none;
  height: auto;
}
.ql-wrapper-container .ql-container.ql-disabled .ql-blank:before, .ql-wrapper-container .ql-container.ql-readonly .ql-blank:before {
  color: transparent;
}
.ql-wrapper-container.ql-border-disabled .ql-toolbar.ql-snow,
.ql-wrapper-container.ql-border-disabled .ql-container.ql-snow {
  border-color: transparent;
}
.ql-wrapper-container:hover:not(.ql-readonly) {
  outline: 0;
}
.ql-wrapper-container:hover:not(.ql-readonly) .ql-toolbar.ql-snow,
.ql-wrapper-container:hover:not(.ql-readonly) .ql-container.ql-snow:not(.ql-disabled) {
  border-color: var(--ql-line-color-hover);
}
.ql-wrapper-container:focus-within:not(.ql-readonly) {
  outline: 0;
}
.ql-wrapper-container:focus-within:not(.ql-readonly) .ql-toolbar.ql-snow,
.ql-wrapper-container:focus-within:not(.ql-readonly) .ql-container.ql-snow {
  border-color: var(--ql-line-color-hover);
}
.ql-wrapper-container:not(.ql-border-disabled).ql-readonly {
  background-color: var(--ql-bg-color-readonly);
  pointer-events: none;
}
.ql-wrapper-container:not(.ql-border-disabled).ql-readonly .ql-container.ql-snow:has(.label-component) {
  border: none;
}
.ql-wrapper-container:not(.ql-border-disabled).ql-readonly .ql-container.ql-snow:has(.label-component) .label-component {
  height: auto;
}
.ql-wrapper-container:not(.ql-border-disabled).ql-readonly .ql-container.ql-snow > :not(.label-component) {
  color: var(--ql-text-color-disabled) !important;
}
.ql-wrapper-container.error .ql-snow {
  border-color: var(--ql-error-line-color);
}
.ql-wrapper-container.error:hover:not(.ql-readonly) .ql-toolbar.ql-snow,
.ql-wrapper-container.error:hover:not(.ql-readonly) .ql-container.ql-snow:not(.ql-disabled) {
  border-color: var(--ql-error-line-color);
}
.ql-wrapper-container.error:focus-within:not(.ql-readonly) .ql-toolbar.ql-snow,
.ql-wrapper-container.error:focus-within:not(.ql-readonly) .ql-container.ql-snow {
  border-color: var(--ql-error-line-color);
}

/*
 * @file components/_thumbnail.scss
 * @description 썸네일 디자인
 * @version 1.0
 */
.grid__thumbnail {
  --thumbnail-bg-color-hover: var(--color-blue-000);
  --thumbnail-bg-color-focus: var(--color-gray-000);
  --thumbnail-bg-color-active: var(--color-blue-005);
  --thumbnail-bg-color-selected: var(--color-blue-000);
  --thumbnail-line-color: var(--color-gray-015);
  --thumbnail-line-color-hover: var(--color-gray-015);
  --thumbnail-line-color-focus: var(--color-blue-030);
  --thumbnail-line-color-active: var(--color-blue-050);
  --thumbnail-line-color-selected: var(--color-blue-050);
  --thumbnail-font-color-title: var(--color-gray-090);
  --thumbnail-font-color-description: var(--color-gray-050);
  --thumbnail-font-color-footer-update: var(--color-gray-070);
  --thumbnail-font-color-footer-size: var(--color-gray-030);
  --thumbnail-icon-color: var(--color-gray-050);
  position: relative;
  display: inline-block;
  max-width: 15rem;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}
.grid__thumbnail .thumbnail__image {
  border: 0.0625rem solid var(--thumbnail-line-color);
  border-radius: 0.375rem;
  position: relative;
  display: inline-block;
  width: 100%;
  height: 10rem;
  padding: 0.625rem;
}
.grid__thumbnail .thumbnail__image img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.grid__thumbnail .thumbnail__image .thumbnail__data {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.grid__thumbnail .thumbnail__image span {
  width: 100%;
  height: 100%;
  background-size: auto;
}
.grid__thumbnail .thumbnail__image .checkbox {
  position: absolute;
  top: 0.625rem;
  left: 0.625rem;
  pointer-events: none;
}
.grid__thumbnail .thumbnail__image:hover {
  background-color: var(--thumbnail-bg-color-hover);
}
.grid__thumbnail .thumbnail__image:focus {
  border: 0.0625rem solid var(--thumbnail-line-color-focus);
}
.grid__thumbnail .thumbnail__image:active {
  background-color: var(--thumbnail-bg-color-active);
  border: 0.0625rem solid var(--thumbnail-line-color-active);
}
.grid__thumbnail .thumbnail__image.selected {
  background-color: var(--thumbnail-bg-color-selected);
  border: 0.0625rem solid var(--thumbnail-line-color-selected);
}
.grid__thumbnail .thumbnail__image.warning {
  background-color: #FCDFD9;
  border: 0.0625rem solid #DE3412;
}
.grid__thumbnail .thumbnail__checkbox {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.grid__thumbnail .thumbnail__caption {
  padding: 0.625rem 0 0 0;
}
.grid__thumbnail .thumbnail__caption--p {
  width: 80%;
  height: 1.5rem;
}
.grid__thumbnail .thumbnail__caption--p.no-icon {
  width: 100%;
}
.grid__thumbnail .thumbnail__caption--p-fill {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}
.grid__thumbnail .thumbnail__caption .thumbnail__caption--title,
.grid__thumbnail .thumbnail__caption .thumbnail__caption__name {
  height: 100%;
  color: var(--thumbnail-font-color-title);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: inherit;
  line-height: 1.5rem;
}
.grid__thumbnail .thumbnail__caption .thumbnail__caption__date {
  color: var(--thumbnail-font-color-footer-update);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 0.25rem 0 0 0;
}
.grid__thumbnail .thumbnail__caption .thumbnail__caption__size,
.grid__thumbnail .thumbnail__caption .thumbnail__caption--description {
  color: var(--thumbnail-font-color-description);
  font-size: 0.75rem;
  font-weight: 400;
  cursor: inherit;
}
.grid__thumbnail .thumbnail__caption .thumbnail__caption--rename {
  display: none;
  width: 100%;
  height: 100%;
  float: left;
  padding: 0 0.25rem;
}
.grid__thumbnail .thumbnail__caption [class*=ic-] {
  background: var(--thumbnail-icon-color);
}
.grid__thumbnail .thumbnail__caption [class*=ic-]:hover {
  background-color: #0066FF;
}
.grid__thumbnail .thumbnail__footer--update-date, .grid__thumbnail .thumbnail__footer--size {
  padding: 0.25rem 0 0 0;
  font-size: 0.75rem;
  font-weight: 400;
}
.grid__thumbnail .thumbnail__footer--update-date {
  color: var(--thumbnail-font-color-footer-update);
}
.grid__thumbnail .thumbnail__footer--size {
  color: var(--thumbnail-font-color-footer-size);
}
.grid__thumbnail--small {
  --thumbnail-bg-color-hover: var(--color-blue-000);
  --thumbnail-bg-color-focus: var(--color-gray-000);
  --thumbnail-bg-color-active: var(--color-blue-005);
  --thumbnail-bg-color-selected: var(--color-blue-000);
  --thumbnail-line-color: var(--color-gray-015);
  --thumbnail-line-color-hover: var(--color-gray-015);
  --thumbnail-line-color-focus: var(--color-blue-030);
  --thumbnail-line-color-active: var(--color-blue-050);
  --thumbnail-line-color-selected: var(--color-blue-050);
  --thumbnail-font-color-title: var(--color-gray-090);
  --thumbnail-font-color-description: var(--color-gray-050);
  position: relative;
  display: inline;
  max-width: 15rem;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}
.grid__thumbnail--small .thumbnail__wrapper {
  border: 0.0625rem solid var(--thumbnail-line-color);
  border-radius: 0.25rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 15rem;
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
}
.grid__thumbnail--small .thumbnail__wrapper:hover {
  background-color: var(--thumbnail-bg-color-hover);
}
.grid__thumbnail--small .thumbnail__wrapper:focus {
  border: 0.0625rem solid var(--thumbnail-line-color-focus);
}
.grid__thumbnail--small .thumbnail__wrapper:active {
  background-color: var(--thumbnail-bg-color-active);
  border: 0.0625rem solid var(--thumbnail-line-color-active);
}
.grid__thumbnail--small .thumbnail__wrapper:has(.thumbnail__image.selected) {
  background-color: var(--thumbnail-bg-color-selected);
  border: 0.0625rem solid var(--thumbnail-line-color-selected);
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__image {
  position: absolute;
  width: 100%;
  height: 100%;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__image .thumbnail__data {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 2.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0.938rem 1.125rem;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__image .thumbnail__checkbox {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption {
  width: 9.375rem;
  margin: 0.938rem 0 0.938rem 4.75rem;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption--title,
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption__name {
  height: 1.25rem;
  color: var(--thumbnail-font-color-title);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: inherit;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption__date {
  display: none;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption__size {
  color: var(--thumbnail-font-color-footer-size);
  font-size: 0.75rem;
  font-weight: 400;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption--description {
  color: var(--thumbnail-font-color-description);
  font-size: 0.75rem;
  font-weight: 400;
  cursor: inherit;
}
.grid__thumbnail--small .thumbnail__wrapper .thumbnail__caption .thumbnail__caption--rename {
  display: none;
  width: 100%;
  float: left;
}
.grid__thumbnail .swap-highlight {
  opacity: 0.5;
}

.datascroll {
  display: grid;
  height: inherit;
  font-size: 0.75rem;
  font-weight: 400;
  grid-template-columns: repeat(auto-fill, 15rem);
  align-content: start;
  overflow-y: auto;
}
.datascroll .grid__thumbnail {
  height: max-content;
}
.datascroll__empty {
  --grid-empty-text-color: var(--color-gray-070);
  display: grid;
  height: inherit;
  align-content: center;
  justify-items: center;
}
.datascroll__empty .empty__icon .ic-no-data,
.datascroll__empty .empty__icon .ic-no-search {
  width: 16.188rem;
  height: 11.688rem;
}
.datascroll__empty .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grid-empty-text-color);
}
.datascroll__empty .empty__subtitle {
  color: var(--grid-empty-text-color);
}

/*
 * @file components/_tooltip.scss
 * @description 툴팁 레이어 디자인
 * @version 1.0
 *
 * 사용 방법
 * - .smart-tooltip은 zTooltip.js가 생성하는 실제 툴팁 레이어입니다.
 * - 툴팁 표시 대상과의 간격은 zTooltip 옵션 offset으로 조정하며 기본값은 4px입니다.
 * - 사이즈는 size--s(3px 8px), size--l(8px 8px)를 사용합니다.
 * - 테마는 default, dark, error, info를 사용합니다.
 */
.smart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  z-index: 500;
  border-radius: 0.188rem;
  box-shadow: 0 0.188rem 0.188rem 0 var(--elevation-color-4);
  word-wrap: break-word;
  white-space: pre-line;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.smart-tooltip.size--s {
  padding: 0.188rem 0.5rem;
}
.smart-tooltip.size--l {
  padding: 0.5rem 0.5rem;
}
.smart-tooltip.tooltip--visible {
  opacity: 1;
  visibility: visible;
}
.smart-tooltip .tooltip__arrow {
  display: none;
}
.smart-tooltip .tooltip__code {
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.375rem;
  background-color: var(--color-gray-005);
  padding: 0.75rem 0.875rem;
}
.smart-tooltip .tooltip__bullet {
  color: var(--color-blue-030);
}
.smart-tooltip.default {
  color: var(--color-gray-090);
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-010);
}
.smart-tooltip.dark {
  color: var(--color-gray-000);
  background-color: var(--color-gray-080);
  border: 0.0625rem solid var(--color-gray-080);
}
.smart-tooltip.error {
  color: var(--color-gray-090);
  background-color: var(--color-red-005);
  border: 0.0625rem solid #D90C25;
}
.smart-tooltip.info {
  color: var(--color-gray-090);
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-blue-030);
}

/*
 * @file components/_feedback-icon.scss
 * @description 툴팁 아이콘 디자인
 * @version 1.0
 *
 * 사용 방법
 * - 툴팁 아이콘 위에 툴팁이 표시된다.
 * - 툴팁 레이어 디자인은 _tooltip.scss를 참고한다.
 * - Help: <div class="feedback-icon--blue"><span class="ic-help--s" data-tooltip="..."></span></div>
 * - Validation: <span class="feedback-icon--red validation__icon ic-info--s"></span>
 */
.feedback-icon--gray {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  --feedback-icon-color: var(--color-gray-070);
  --feedback-icon-color-hover: var(--color-blue-050);
}
.feedback-icon--gray[class*=ic-], .feedback-icon--gray [class*=ic-] {
  cursor: pointer;
  background: var(--feedback-icon-color);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.feedback-icon--gray:hover[class*=ic-], .feedback-icon--gray:hover [class*=ic-] {
  background: var(--feedback-icon-color-hover);
}

.feedback-icon--dark {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  --feedback-icon-color: var(--color-gray-000);
  --feedback-icon-color-hover: var(--color-gray-010);
}
.feedback-icon--dark[class*=ic-], .feedback-icon--dark [class*=ic-] {
  cursor: pointer;
  background: var(--feedback-icon-color);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.feedback-icon--dark:hover[class*=ic-], .feedback-icon--dark:hover [class*=ic-] {
  background: var(--feedback-icon-color-hover);
}

.feedback-icon--red {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  --feedback-icon-color: var(--line-color-error);
  --feedback-icon-color-hover: var(--line-color-error);
}
.feedback-icon--red[class*=ic-], .feedback-icon--red [class*=ic-] {
  cursor: pointer;
  background: var(--feedback-icon-color);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.feedback-icon--red:hover[class*=ic-], .feedback-icon--red:hover [class*=ic-] {
  background: var(--feedback-icon-color-hover);
}

.feedback-icon--blue {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  cursor: pointer;
  --feedback-icon-color: var(--color-blue-030);
  --feedback-icon-color-hover: var(--color-blue-050);
}
.feedback-icon--blue[class*=ic-], .feedback-icon--blue [class*=ic-] {
  cursor: pointer;
  background: var(--feedback-icon-color);
  transition: background 0.2s ease, opacity 0.2s ease;
}
.feedback-icon--blue:hover[class*=ic-], .feedback-icon--blue:hover [class*=ic-] {
  background: var(--feedback-icon-color-hover);
}

/*
 * @file components/_popover.scss
 * @description 팝오버 컴포넌트 디자인
 * @version 1.0
 */
.user-popover {
  --popover-border-radius: $border-radius-m;
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 300px;
  background-color: var(--skeleton-bg-color);
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.563rem;
  padding: 1rem;
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.user-popover * {
  user-select: text;
}
.user-popover.show {
  opacity: 1;
  visibility: visible;
}
.user-popover .user-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}
.user-popover .user-position {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--desc-color);
  align-content: center;
}
.user-popover .user-organization {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sub-color);
}
.user-popover .field {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.filter-popover {
  position: relative;
}
.filter-popover .filter-anchor {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.filter-popover .filter-anchor > input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.filter-popover .filter-popover__content {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--skeleton-bg-color);
  z-index: 500;
  width: 100%;
  padding: 0.75rem;
}
.filter-popover .filter-popover__content .filter-row .date-picker__box,
.filter-popover .filter-popover__content .filter-row .filter-row__value {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
.filter-popover .filter-popover__content.is-open {
  display: block;
}

/*
 * @file componenets/_tree.scss
 * @description 트리 구조 디자인
 * @version 1.0
 */
.tree-container {
  --tree-border-color: var(--color-gray-030);
  --tree-node-bg-hover: var(--color-blue-005);
  --tree-node-bg-selected: var(--color-blue-010);
  --tree-node-bg-selected-hover: var(--color-blue-015);
  --tree-node-bg-active: var(--color-blue-005);
  --tree-node-text-selected: var(--color-blue-050);
  --tree-text-color: var(--color-gray-070);
  --tree-customIcon-color-default: var(--color-gray-070);
  height: var(--data-height, 655px);
  overflow-y: auto;
}
.tree-container ul.tree {
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
  color: var(--tree-text-color);
  font-size: 0.875rem;
  font-weight: 400;
  list-style-type: none;
  cursor: default;
}
.tree-container ul.tree li {
  position: relative;
  overflow: visible;
  display: block;
  padding-right: 0.125rem;
  line-height: 1.875rem;
  text-overflow: clip;
  white-space: normal;
  word-wrap: normal;
}
.tree-container ul.tree li:not(:has(> .expander-icon))::before {
  content: "";
  position: absolute;
  top: 0.125rem;
  bottom: 0rem;
  left: 0.438rem;
  border-left: 1px dashed var(--tree-border-color);
}
.tree-container ul.tree li:has(> .expander-icon)::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 0rem;
  left: 0.438rem;
  border-left: 1px dashed var(--tree-border-color);
}
.tree-container ul.tree li > ul {
  display: none;
}
.tree-container ul.tree li.tree-opened > ul {
  display: block;
}
.tree-container ul.tree li.tree-closed > ul {
  display: none;
}
.tree-container ul.tree li.tree-li--invisible::before {
  content: none !important;
  border: 0 !important;
}
.tree-container ul.tree li.tree-li--invisible > .node,
.tree-container ul.tree li.tree-li--invisible > .expander-icon {
  display: none !important;
}
.tree-container ul.tree li.tree-li--invisible > ul {
  margin-left: 0;
}
.tree-container ul.tree li.tree-li--invisible > ul::before {
  display: none;
  content: none;
}
.tree-container ul.tree li.tree-li--invisible > ul > li {
  padding-left: 0;
}
.tree-container ul.tree li.tree-li--invisible > ul > li::before {
  content: none !important;
  border: 0 !important;
  width: 0 !important;
  height: 0 !important;
}
.tree-container ul.tree li.tree-li--invisible > ul > li:last-child::before {
  content: none !important;
  border: 0 !important;
}
.tree-container ul.tree li > .node {
  max-width: calc(100% - 1.5rem);
}
.tree-container ul.tree li:not(:has(> .expander-icon)) > .node {
  margin-left: 1.25rem;
  max-width: calc(100% - 1.25rem);
}
.tree-container ul.tree li > .expander-icon,
.tree-container ul.tree li > .node {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-left: 0px;
}
.tree-container ul.tree li .expander-icon {
  width: 1rem;
  height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.25rem;
  cursor: pointer;
  flex: 0 0 auto;
}
.tree-container ul.tree ul {
  position: relative;
  -webkit-user-select: none;
  user-select: none;
  margin: 0 0 0 1.25rem;
  padding: 0;
  list-style-type: none;
}
.tree-container ul.tree ul li {
  display: block;
  position: relative;
}
.tree-container ul.tree ul li.tree-hidden {
  display: none !important;
}
.tree-container ul.tree ul li.tree-hidden:before {
  border-top-color: transparent !important;
}
.tree-container ul.tree ul li.tree-hidden:last-child:before {
  border-left-color: transparent !important;
}
.tree-container ul.tree ul li > .node {
  max-width: calc(100% - 1.5rem);
}
.tree-container ul.tree ul li:not(:has(> .expander-icon)) > .node {
  margin-left: 1.25rem;
  max-width: calc(100% - 1.25rem);
}
.tree-container ul.tree ul li > .expander-icon,
.tree-container ul.tree ul li > .node {
  display: inline-flex;
  align-items: center;
  vertical-align: top;
  border-left: 0px;
}
.tree-container ul.tree label {
  color: var(--tree-text-color);
}
.tree-container ul.tree .icon_menu {
  position: relative;
  top: 0.125rem;
}
.tree-container .icon_tree {
  width: 1rem;
  height: 1rem;
  margin-top: -0.125rem;
  margin-left: 0.25rem;
  vertical-align: middle;
  display: inline-block;
  flex: 0 0 auto;
}
.tree-container .icon_tree--file {
  display: inline-block;
  vertical-align: middle;
  height: 1rem;
  margin-top: -0.125rem;
  margin-left: 0.25rem;
  background-color: transparent;
  flex: 0 0 auto;
}
.tree-container .icon_tree--custom {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.25rem;
  background-color: var(--icon-color);
  flex: 0 0 auto;
}
.tree-container .icon_tree[src=""], .tree-container .icon_tree:not([src]) {
  display: none;
}
.tree-container span.node {
  border: 0.0625rem solid transparent;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  width: auto;
  height: 1.875rem;
  cursor: pointer;
}
.tree-container span.node label {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}
.tree-container span.node:hover {
  border-radius: 0.125rem;
  background-color: var(--tree-node-bg-hover);
}
.tree-container span.node:focus, .tree-container span.node:active {
  border-radius: 0.125rem;
  background-color: var(--tree-node-bg-selected);
}
.tree-container span.node:disabled {
  color: var(--text-color-disabled);
}
.tree-container span.node.node_selected {
  border-radius: 0.125rem;
  background-color: var(--tree-node-bg-selected);
}
.tree-container span.node.node_selected label {
  color: var(--tree-node-text-selected);
}
.tree-container span.node.node_selected:hover {
  background-color: var(--tree-node-bg-selected-hover);
}
.tree-container.tree--readonly ul.tree span.node {
  pointer-events: none;
  cursor: default;
}

.tree-nodata {
  --tree-empty-text-color: var(--color-gray-070);
  display: grid;
  grid-auto-flow: column;
  column-gap: 0.5rem;
  place-items: center;
  justify-content: center;
  height: var(--data-height, 655px);
  font-size: 0.875rem;
  font-weight: 400;
}
.tree-nodata__icon {
  background: var(--icon-color);
}
.tree-nodata__text {
  line-height: 1.5;
  color: var(--tree-empty-text-color);
}

/*
 * @file components/_tab.scss
 * @description 탭 디자인
 * @version 1.0
 */
.tabs {
  --text-color: var(--color-gray-070);
  --text-color-hover: var(--color-gray-070);
  --text-color-selected: var(--color-gray-090);
  --bg-color: var(--color-gray-000);
  --bg-color-hover: var(--color-blue-000);
  --bg-color-selected: var(--color-gray-000);
  --line-color: var(--color-gray-015);
  --line-color-hover: var(--color-blue-015);
  --line-color-selected: var(--color-blue-050);
  --icon-color: var(--color-gray-070);
  --icon-color-hover: var(--color-gray-060);
  --icon-color-selected: var(--color-gray-090);
  display: flex;
  align-items: center;
  border-bottom: 0.0625rem solid var(--line-color);
}
.tabs .tab {
  min-width: 5rem;
  color: var(--text-color);
  background-color: var(--bg-color);
  padding: 0.625rem 0.25rem;
  border-bottom: 0.0625rem solid var(--line-color);
}
.tabs .tab [class*=ic-] {
  background: var(--icon-color);
}
.tabs .tab .tab__label {
  color: var(--text-color);
}
.tabs .tab.active {
  border-width: 0.125rem;
  border-color: var(--line-color-selected);
  color: var(--text-color-selected);
  background-color: var(--bg-color-selected);
  font-weight: 700;
  margin-bottom: -0.0625rem;
}
.tabs .tab.active [class*=ic-] {
  background: var(--icon-color-selected);
}
.tabs .tab.active .tab__label {
  color: var(--text-color-selected);
}
.tabs .tab:not(.active):hover {
  color: var(--text-color-hover);
  background-color: var(--bg-color-hover);
  border-bottom: 0.125rem solid var(--line-color-hover);
  margin-bottom: -0.0625rem;
}
.tabs .tab:not(.active):hover [class*=ic-] {
  background: var(--icon-color-hover);
}
.tabs .tab:not(.active):hover .tab__label {
  color: var(--text-color-hover);
}
.tabs--vertical {
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  border-right: 0.0625rem solid var(--line-color);
  background-color: var(--color-gray-003);
  min-width: 10rem;
  padding: 0.5rem 0;
}
.tabs--vertical + * {
  padding-top: 0.75rem;
  padding-left: 1.5rem;
}
.tabs--vertical .tab {
  min-width: auto;
  padding: 0.75rem 1rem;
  border: none;
  border-left: 0.125rem solid transparent;
  background-color: transparent;
}
.tabs--vertical .tab.active {
  border-top: 0.0625rem solid var(--line-color);
  border-bottom: 0.0625rem solid var(--line-color);
  border-left: 0.1875rem solid var(--text-color-selected);
  border-right: none;
  background-color: var(--bg-color-selected);
  font-weight: 700;
  color: var(--text-color-selected);
  margin-bottom: 0;
  margin-right: -0.0625rem;
}
.tabs--vertical .tab.active [class*=ic-] {
  background: var(--icon-color-selected);
}
.tabs--vertical .tab.active .tab__label {
  color: var(--text-color-selected);
}
.tabs--vertical .tab:not(.active):hover {
  border: none;
  border-left: 0.125rem solid transparent;
  background-color: var(--color-gray-010);
  margin-bottom: 0;
  margin-right: 0;
}
.tabs--vertical .tab:not(.active):hover [class*=ic-] {
  background: var(--icon-color-hover);
}
.tabs--vertical .tab:not(.active):hover .tab__label {
  color: var(--text-color-hover);
}

.radio-tabs {
  --text-color: var(--color-gray-070);
  --text-color-hover: var(--color-gray-070);
  --text-color-selected: var(--color-blue-050);
  --bg-color: var(--color-gray-000);
  --bg-color-hover: var(--color-blue-000);
  --bg-color-selected: var(--color-blue-005);
  --line-color: var(--color-gray-015);
  display: flex;
  align-items: center;
  gap: 1px;
  background-color: var(--line-color);
  border-radius: 0.375rem;
  padding: 1px;
}
.radio-tabs .tab {
  min-width: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  color: var(--text-color);
  margin: 0;
  border: none;
  background-color: var(--bg-color);
  cursor: pointer;
}
.radio-tabs .tab:first-child {
  border-top-left-radius: 0.1875rem;
  border-bottom-left-radius: 0.1875rem;
}
.radio-tabs .tab:last-child {
  border-top-right-radius: 0.1875rem;
  border-bottom-right-radius: 0.1875rem;
}
.radio-tabs .tab .tab__label {
  padding: 0.625rem 0.25rem;
  width: 100%;
  margin: 3px;
  text-align: center;
}
.radio-tabs .tab.active .tab__label {
  color: var(--text-color-selected);
  background-color: var(--bg-color-selected);
}
.radio-tabs .tab:not(.active):hover .tab__label {
  color: var(--text-color-hover);
  background-color: var(--bg-color-hover);
}

.tab__content--noData {
  --tab-empty-text-color: var(--color-gray-070);
  display: grid;
  flex: 1;
  min-height: var(--data-height, 32.188rem);
  align-content: center;
  place-items: center;
}
.tab__content--noData .noData__iconWrap {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tab__content--noData .ic-no-data {
  width: 16.188rem;
  height: 11.688rem;
}
.tab__content--noData .noData__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tab-empty-text-color);
  text-align: center;
}

.token-tabs {
  display: flex;
  margin-top: 2rem;
  padding: 0 1.375rem;
}
.token-tabs .token-tab {
  border-bottom: 0.0625rem solid var(--color-gray-030);
  flex: 1;
  padding: 0.625rem 0;
  color: var(--color-gray-040);
}
.token-tabs .token-tab.active {
  border-bottom: 0.188rem solid #0066FF;
  color: var(--color-gray-080);
}

/*
 * @file components/_validation.scss
 * @description validation message
 * @version 1.0
 */
.required::after {
  content: "*";
  color: #DE3412;
  font-weight: 700;
}

/*
 * @file components/_breadcrumb.scss
 * @description 브레드크럼 디자인
 * @version 1.0
 */
.breadcrumb {
  min-height: 1.5rem;
}
.breadcrumb__wrapping {
  display: flex;
  flex-wrap: wrap;
}
.breadcrumb__wrapping .breadcrumb__item {
  height: 1.5rem;
  display: flex;
  align-items: center;
  position: relative;
  border-radius: 0.188rem;
}
.breadcrumb__wrapping .breadcrumb__item .link:has(:hover) {
  background: var(--color-gray-000);
  color: var(--color-gray-070);
}
.breadcrumb__wrapping .breadcrumb__item .link {
  height: 1.5rem;
  padding: 0 0.5rem;
  text-decoration: none;
  border: 0.0625rem solid transparent;
  border-radius: 0.188rem;
}
.breadcrumb__wrapping .breadcrumb__item .link.selected {
  background: transparent;
  color: var(--color-gray-100);
}
.breadcrumb__wrapping .breadcrumb__item .link:hover {
  background: var(--color-gray-000);
  color: var(--color-gray-070);
}
.breadcrumb__wrapping .breadcrumb__item .link:active {
  border: 0.0625rem solid var(--color-gray-050);
}
.breadcrumb__wrapping .breadcrumb__item:last-child .select__box__label {
  color: var(--color-gray-100) !important;
}
.breadcrumb__wrapping .breadcrumb__item:last-child .select__box > .ic-arrow-down--s {
  width: 1.375rem;
  height: 1.375rem;
  background: var(--color-gray-070) !important;
}
.breadcrumb__wrapping .breadcrumb__item:last-child .select__box:hover {
  background: var(--color-gray-000);
}
.breadcrumb__wrapping .breadcrumb__item:last-child .link {
  background: transparent !important;
  color: var(--color-gray-100) !important;
}
.breadcrumb__wrapping .breadcrumb__item:last-child .link:hover {
  background: var(--color-gray-000);
  color: var(--color-gray-070);
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown {
  position: relative;
  width: 100%;
  height: 1.5rem;
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box {
  display: inline-block;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  padding: 0 0.5rem;
  min-height: 1.5rem;
  max-height: 1.5rem;
  border: 0;
  border: 0.0625rem solid transparent;
  border-radius: 0.188rem;
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box__label {
  font-size: 0.875rem;
  height: 100%;
  padding: 0 1rem 0 0 !important;
  line-height: 1.6;
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box .ic-arrow-down--s {
  background: var(--color-gray-070);
  width: 1rem;
  height: 1rem;
  -webkit-mask-size: 1rem 1rem;
  mask-size: 1rem 1rem;
  position: absolute;
  top: 0.375rem;
  right: 0.3125rem;
  bottom: 0.375rem;
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box.active {
  border: 0.0625rem solid var(--color-gray-050);
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box.active + .select__options {
  display: inline-block;
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box:hover {
  background: var(--color-gray-000);
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box:focus {
  border: 0.0625rem solid var(--color-gray-030);
}
.breadcrumb__wrapping .breadcrumb__item .breadcrumb__dropdown .select__box:active {
  border: 0.0625rem solid var(--color-gray-050);
}
.breadcrumb__wrapping .breadcrumb__item:not(:last-child) .ic-slash {
  width: 1.375rem;
  height: 1.375rem;
  background: var(--color-gray-015);
  mask-size: 1.375rem;
  -webkit-mask-size: 1.375rem;
}
.breadcrumb__ellipsis {
  height: fit-content;
}
.breadcrumb__ellipsis > [class*=ic-] {
  background: var(--color-gray-070);
  width: 1.5rem;
  height: 1.5rem;
  mask-size: 1.5rem;
  -webkit-mask-size: 1.5rem;
}
.breadcrumb__ellipsis:hover {
  background: var(--color-gray-005);
}
.breadcrumb__ellipsis:focus {
  background: var(--color-gray-005);
}
.breadcrumb__ellipsis:active {
  background: var(--color-gray-010);
}

/*
 * @file components/_context-menu.scss
 * @description 컨텍스트 메뉴 디자인
 * @version 1.0
 */
.context-menu {
  position: relative;
}
.context-menu span[class*=ic-] {
  pointer-events: none;
}
.context-menu .context-menu__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.context-menu .context-menu__toggle.user-info__ic {
  width: 1.875rem;
  height: 1.875rem;
}
.context-menu .context-menu__toggle.user-info__ic .user-info__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.context-menu .context-menu__toggle.active .ic-arrow-down {
  transform: rotate(-90deg);
}
.context-menu .context-menu__toggle.active + .context-menu__content {
  display: flex;
}
.context-menu .context-menu__content {
  display: none;
  flex-direction: column;
  min-width: 7.5rem;
  margin: 0;
  padding: 0.25rem;
  border-radius: 0.188rem;
  z-index: 250;
  cursor: default;
}
.context-menu .context-menu__content.left-top {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
  transform: translate(0, -100%);
}
.context-menu .context-menu__content.left-top .context-menu__item > [class*=btn__] {
  text-align: left;
}
.context-menu .context-menu__content.left-bottom {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: 0;
}
.context-menu .context-menu__content.left-bottom .context-menu__item > [class*=btn__] {
  text-align: left;
}
.context-menu .context-menu__content.right-top {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  transform: translate(0, -100%);
}
.context-menu .context-menu__content.right-top .context-menu__item > [class*=btn__] {
  text-align: right;
}
.context-menu .context-menu__content.right-bottom {
  position: absolute;
  top: auto;
  right: 0;
  bottom: auto;
  left: auto;
}
.context-menu .context-menu__content.right-bottom .context-menu__item > [class*=btn__] {
  text-align: left;
}
.context-menu .context-menu__content .context-menu__item {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}
.context-menu .context-menu__content .context-menu__item:last-child {
  margin-bottom: 0;
}
.context-menu .context-menu__content .context-menu__item > [class*=btn__] {
  width: 100%;
  height: 1.875rem;
  font-size: 0.875rem;
  font-weight: 400;
  border-radius: 0.188rem;
  padding: 0.313rem 0.5rem;
  line-height: 1.3;
}
.context-menu .context-menu__content .context-menu__empty {
  display: grid;
  height: 2.875rem;
  text-align: center;
}
.context-menu .context-menu__content.primary {
  border: 0.0625rem solid var(--color-gray-003);
  background-color: var(--color-gray-000);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__] {
  color: var(--color-gray-070);
  border-color: var(--color-gray-000);
  background-color: var(--color-gray-000);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__] [class*=ic-] {
  background: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:hover {
  border-color: var(--color-blue-000);
  background-color: var(--color-blue-000);
  color: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:focus {
  border-color: var(--color-blue-005);
  background-color: var(--color-blue-005);
  color: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:enabled:active, .context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:enabled.active {
  border-color: var(--color-blue-005);
  background-color: var(--color-blue-005);
  color: var(--color-gray-070);
}
.context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:enabled:active [class*=ic-], .context-menu .context-menu__content.primary .context-menu__item > [class*=btn__]:enabled.active [class*=ic-] {
  background: var(--color-gray-070);
}
.context-menu .context-menu__content.switch-user-panel {
  width: 12.5rem;
}
.context-menu.search-condition-menu {
  display: flex;
  position: absolute;
  top: auto;
  right: 0;
  bottom: 100%;
  left: auto;
  padding: 0.25rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.563rem;
  background-color: var(--color-gray-000);
  z-index: 25;
  transform: translate(0, -0.25rem);
}
.context-menu.search-condition-menu::after {
  content: "";
  position: absolute;
  top: auto;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 0.25rem;
}
.context-menu.search-condition-menu .context-group {
  display: flex;
  flex-direction: row;
  padding: 0;
  gap: 0.25rem;
}
.context-menu.search-condition-menu .context-menu__item {
  display: flex;
  margin: 0;
}

.search--context-menu {
  position: relative;
}

/*
 * @file components/_stepper.scss
 * @description Stepper 디자인
 * @version 1.0
 */
@keyframes glowing {
  0% {
    box-shadow: 0 0 0 0.063rem #7AB0FF;
  }
  40% {
    box-shadow: 0 0 0 0.375rem #7AB0FF;
  }
  60% {
    box-shadow: 0 0 0 0.375rem #7AB0FF;
  }
  100% {
    box-shadow: 0 0 0 0.063rem #7AB0FF;
  }
}
@keyframes horizontal-step-progress {
  0% {
    transform: scale(0.1);
  }
  13% {
    transform: scale(0.35);
  }
  25% {
    transform: scale(0.6);
  }
  38% {
    transform: scale(0.85);
  }
  51% {
    transform: scale(1.1);
  }
  64% {
    transform: scale(0.85);
  }
  77% {
    transform: scale(0.6);
  }
  90% {
    transform: scale(0.35);
  }
  100% {
    transform: scale(0.1);
  }
}
@keyframes horizontal-step-progress-check {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  30% {
    width: 0;
    height: 0.438rem;
    opacity: 1;
  }
  100% {
    width: 0.83rem;
    height: 0.438rem;
    opacity: 1;
  }
}
.stepper--horizontal {
  --bar-h: 1.875rem;
  --track-h: 3.75rem;
  --step-y: 27%;
  display: grid;
  position: relative;
  padding: 0 2.5rem;
  height: 100%;
}
.stepper--horizontal .stepper__bar {
  position: absolute;
  left: 2.5rem;
  right: 2.5rem;
  height: var(--bar-h);
  top: 0.625rem;
  z-index: 1;
  pointer-events: none;
}
.stepper--horizontal .stepper__bar .stepper__bar-bg,
.stepper--horizontal .stepper__bar .stepper__bar-progress {
  position: absolute;
  inset: 0;
  height: 100%;
}
.stepper--horizontal .stepper__bar .stepper__bar-bg {
  align-self: center;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-005);
  border-radius: 6.1875rem;
}
.stepper--horizontal .stepper__bar .stepper__bar-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--stepper-bar-standby-pattern) 90%, transparent) 0 2px, color-mix(in srgb, var(--stepper-bar-standby-pattern) 0%, transparent) 2px 12px);
  pointer-events: none;
  border-radius: 6.1875rem;
}
.stepper--horizontal .stepper__bar .stepper__bar-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stepper--horizontal .stepper__bar .stepper__bar-progress::before {
  content: "";
  position: absolute;
  width: 100%;
  inset: 0;
  background-image: linear-gradient(90deg, var(--color-vivid-green-030), var(--color-blue-030));
  background-size: var(--data-progress, 0%) 100%;
  background-repeat: no-repeat;
  transition: background-size var(--data-bar-animation-duration) linear;
  border-radius: 6.1875rem;
}
.stepper--horizontal .stepper__bar .stepper__bar-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(var(--stepper-bar-overlay), 0.3), rgba(var(--stepper-bar-overlay), 0));
  background-size: var(--data-progress) 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: 6.1875rem;
}
.stepper--horizontal .stepper__bar .stepper__bar-progress.stop::before {
  background-size: var(--data-progress);
  background-image: linear-gradient(90deg, var(--color-gray-020), var(--color-gray-030));
}
.stepper--horizontal .stepper__bar .stepper__bar-progress.stop::after {
  background-image: linear-gradient(180deg, rgba(var(--stepper-bar-overlay), 0.3), rgba(var(--stepper-bar-overlay), 0));
}
.stepper--horizontal.animation-off .stepper__circle,
.stepper--horizontal.animation-off .stepper__circle::before,
.stepper--horizontal.animation-off .stepper__circle::after {
  animation: none !important;
  transition: none !important;
}
.stepper--horizontal .stepper__steps {
  position: absolute;
  top: var(--step-y);
  left: 2.5rem;
  right: 2.5rem;
  transform: translateY(-50%);
  height: var(--track-h);
  pointer-events: none;
  z-index: 2;
}
.stepper--horizontal .stepper__steps .stepper__step {
  position: absolute;
  top: 50%;
  left: var(--data-progress);
  transform: translate(-50%, -50%);
  display: grid;
  max-width: 7.5rem;
  justify-items: center;
  z-index: 2;
  width: auto;
  height: 1.875rem;
}
.stepper--horizontal .stepper__steps .stepper__step:first-child {
  transform: translate(-35%, -50%);
  width: 6.25rem;
}
.stepper--horizontal .stepper__steps .stepper__step:last-child {
  transform: translate(-65%, -50%);
  width: 6.25rem;
}
.stepper--horizontal .stepper__steps .stepper__step .stepper__circle {
  grid-row: 1;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.1875rem 0;
  font-weight: 700;
  position: relative;
  z-index: 2;
  border: 0.125rem solid var(--color-gray-020);
  border-radius: 50%;
}
.stepper--horizontal .stepper__steps .stepper__step .stepper__circle.stop {
  border: 0.188rem solid var(--color-gray-020);
}
.stepper--horizontal .stepper__steps .stepper__step .stepper__title {
  position: absolute;
  top: calc(100% + 0.875rem);
  left: 50%;
  transform: translateX(-50%);
  width: var(--step-title-width, 7.5rem);
  max-width: var(--step-title-width, 7.5rem);
  text-align: center;
  color: var(--color-gray-050);
  font-weight: 400;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
  cursor: default;
}
.stepper--horizontal .stepper__steps .stepper__step .stepper__title.stop {
  color: var(--color-gray-050);
}
.stepper--horizontal .stepper__steps .stepper__step:first-child .stepper__title {
  left: 35%;
  transform: none;
  text-align: left;
}
.stepper--horizontal .stepper__steps .stepper__step:last-child .stepper__title {
  left: 65%;
  transform: translateX(-100%);
  text-align: right;
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__circle {
  background-color: var(--color-gray-000);
  border: 0.125rem solid var(--color-vivid-green-050);
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__circle::after {
  display: block;
  content: "";
  width: 0.83rem;
  height: 0.438rem;
  border-bottom: 0.125rem solid var(--color-vivid-green-050);
  border-left: 0.125rem solid var(--color-vivid-green-050);
  transform: translate(0.188rem, 0.313rem) rotate(-45deg);
  animation: horizontal-step-progress-check 0.6s ease-out forwards;
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__circle.stop {
  border-color: var(--color-gray-040);
  background-color: var(--color-gray-000);
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__circle.stop::after {
  border-color: var(--color-gray-040) !important;
  animation: none;
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__title {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.875rem;
}
.stepper--horizontal .stepper__steps .stepper__step.done .stepper__title.stop {
  color: var(--color-gray-050);
}
.stepper--horizontal .stepper__steps .stepper__step.progress .outer {
  content: "";
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
  border-radius: 50%;
  z-index: -1;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .outer::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  transform: translate(13%, 12%);
  background: var(--color-gray-000);
  border: 0.125rem solid var(--color-gray-000);
  border-radius: 50%;
  z-index: 1;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .outer.stop {
  background: linear-gradient(180deg, var(--color-gray-030), var(--color-gray-050));
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__circle {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  scale: 0.8;
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
  border: 0 solid transparent;
  border-radius: 50%;
  z-index: 1;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__circle:not(.stop) {
  animation: horizontal-step-progress 1200ms ease-out infinite;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__circle.stop {
  transform: scale(0.8);
  background: linear-gradient(180deg, var(--color-gray-030), var(--color-gray-050));
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__circle.stop::before {
  background: linear-gradient(180deg, var(--color-gray-030), var(--color-gray-050));
  border: 0.125rem solid var(--color-gray-000);
  border-radius: 50%;
  z-index: -1;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__title {
  color: var(--color-gray-090);
  font-weight: 400;
  font-size: 0.875rem;
}
.stepper--horizontal .stepper__steps .stepper__step.progress .stepper__title.stop {
  color: var(--color-gray-050);
}
.stepper--horizontal .stepper__steps .stepper__step.last.progress .stepper__circle {
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
  animation: none;
}
.stepper--horizontal .stepper__steps .stepper__step.last.progress .stepper__circle::before {
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
}
.stepper--horizontal .stepper__steps .stepper__step.last.progress .stepper__circle::after {
  animation: horizontal-step-progress-check 0.6s ease-out forwards;
}
.stepper--horizontal .stepper__steps .stepper__step.last .stepper__circle {
  position: relative;
  width: 1.875rem;
  height: 1.875rem;
  margin: 0;
  background: var(--color-gray-020);
  border: 0 solid transparent;
  border-radius: 50%;
  z-index: 2;
}
.stepper--horizontal .stepper__steps .stepper__step.last .stepper__circle::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-gray-020);
  border: 0.125rem solid var(--color-gray-000);
  border-radius: 50%;
  z-index: -1;
}
.stepper--horizontal .stepper__steps .stepper__step.last .stepper__circle::after {
  content: "";
  display: block;
  width: 0.83rem;
  height: 0.438rem;
  border-bottom: 0.125rem solid var(--color-gray-000);
  border-left: 0.125rem solid var(--color-gray-000);
  transform: translate(0.5rem, 0.625rem) rotate(-45deg);
}
.stepper--horizontal .stepper__steps .stepper__step.last .stepper__circle.stop::after {
  border-color: var(--color-gray-000) !important;
}
.stepper--horizontal.stepper--multiple .stepper__steps .stepper__step .stepper__title {
  display: -webkit-box;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  max-height: 2.6em;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.timeline {
  position: relative;
  width: 100%;
}
.timeline::after {
  content: "";
  position: absolute;
  background: linear-gradient(180deg, var(--color-vivid-green-050), var(--color-blue-050));
  margin-left: 0.75rem;
  width: 0.125rem;
  top: var(--timeline-line-top, 1rem);
  height: var(--timeline-line-height, 100%);
}
.timeline .timeline-container {
  padding: 0;
  position: relative;
  background-color: inherit;
  margin-left: 1.5rem;
}
.timeline .timeline-container::after {
  content: "";
  position: absolute;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--color-vivid-green-050);
  border: 0.125rem solid var(--color-vivid-green-050);
  top: var(--timeline-line-top, 1rem);
  border-radius: 50%;
  z-index: 1;
}
.timeline .timeline-container:last-child::before {
  content: "";
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
  border: 0 solid transparent;
  top: var(--timeline-line-top, 1rem);
  left: -1.313rem;
  border-radius: 50%;
}
.timeline .timeline-container:last-child::after {
  content: "";
  position: absolute;
  top: var(--timeline-line-top, 1rem);
  left: -1.313rem;
  transform: translate(0.125rem, 0.125rem);
  width: 1rem;
  height: 1rem;
  background: linear-gradient(180deg, var(--color-blue-050), var(--color-vivid-green-040));
  border: 0.125rem solid var(--color-gray-000);
  border-radius: 50%;
  z-index: 1;
}
.timeline .right::after {
  left: -1rem;
}
.timeline .timeline-container-layer {
  padding: 0.5rem 0 0 0.5rem;
}
.timeline .timeline-container-layer__step {
  gap: 0.5rem;
  max-width: 75%;
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 0.875rem;
}
.timeline .timeline-container-layer__step .action {
  padding-left: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.timeline .timeline-container-layer__content {
  min-height: 1.125rem;
  margin-top: 0.938rem;
  padding: 0.5rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  color: var(--color-gray-060);
  font-weight: 400;
  font-size: 0.75rem;
  cursor: pointer;
}
.timeline .timeline-container-layer__content .task__row [class*=ic-] {
  min-width: 1.25rem;
}
.timeline .timeline-container-layer__content .task__row .text {
  font-size: 0.75rem;
  max-width: 40%;
  line-height: 100%;
  font-weight: 700;
  color: var(--color-gray-090);
}
.timeline .timeline-container-layer__content .task__row .action {
  max-width: 60%;
  font-size: 0.75rem;
  font-weight: 400;
}
.timeline .timeline-container-layer__content .operator__row {
  height: 1.5rem;
}
.timeline .timeline-container-layer__content .operator__row .user-info {
  color: var(--color-gray-070);
  max-width: 220px;
  align-items: center;
  padding: 0.125rem;
}
.timeline .timeline-container-layer__content .operator__row .user-info:hover {
  background: var(--color-blue-000);
  border-radius: 0.75rem;
}
.timeline .timeline-container-layer__content .operator__row .date-info {
  font-size: 0.625rem;
}
.timeline .timeline-container-layer__content .operator__row .date-info .separate-bullet {
  margin: auto 0.25rem;
  width: 0.188rem;
  height: 0.188rem;
  background-color: var(--color-gray-030);
  border-radius: 50%;
}
.timeline .timeline-container-layer__content .operator__row .date-info .date-time {
  color: var(--color-gray-050);
}
.timeline .timeline-container-layer__content .comment__row {
  color: var(--color-gray-050);
  background-color: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.375rem;
  padding: 0.25rem;
  white-space: pre-wrap;
}
.timeline .timeline-container-layer__content.running {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-000);
}
.timeline .timeline-container-layer__content.running .task__row [class*=ic-] {
  background: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.running .task__row .action {
  color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.running:hover {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.running.active {
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-015);
}
.timeline .timeline-container-layer__content.pending {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-000);
}
.timeline .timeline-container-layer__content.pending .task__row [class*=ic-] {
  background: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.pending .task__row .action {
  color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.pending:hover {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.pending.active {
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-015);
}
.timeline .timeline-container-layer__content.waiting {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-000);
}
.timeline .timeline-container-layer__content.waiting .task__row [class*=ic-] {
  background: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.waiting .task__row .action {
  color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.waiting:hover {
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.waiting.active {
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-015);
}
.timeline .timeline-container-layer__content.finish {
  background-color: var(--color-gray-003);
  border-color: var(--color-gray-003);
}
.timeline .timeline-container-layer__content.finish .task__row [class*=ic-] {
  background: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.finish .task__row .action {
  color: var(--color-blue-050);
}
.timeline .timeline-container-layer__content.finish:hover {
  background-color: var(--color-gray-003);
  border-color: var(--color-gray-030);
}
.timeline .timeline-container-layer__content.finish.active {
  background-color: var(--color-gray-005);
  border-color: var(--color-gray-050);
}
.timeline .timeline-container-layer__content.reject {
  background-color: var(--color-red-005);
  border-color: var(--color-red-005);
}
.timeline .timeline-container-layer__content.reject .task__row [class*=ic-] {
  background: var(--color-red-050);
}
.timeline .timeline-container-layer__content.reject .task__row .action {
  color: var(--color-red-050);
}
.timeline .timeline-container-layer__content.reject:hover {
  background-color: var(--color-red-005);
  border-color: var(--color-red-020);
}
.timeline .timeline-container-layer__content.reject.active {
  background-color: var(--color-red-010);
  border-color: var(--color-red-050);
}
.timeline .timeline-container-layer__content.withdraw {
  background-color: var(--color-orange-005);
  border-color: var(--color-orange-005);
}
.timeline .timeline-container-layer__content.withdraw .task__row [class*=ic-] {
  background: var(--color-orange-050);
}
.timeline .timeline-container-layer__content.withdraw .task__row .action {
  color: var(--color-orange-050);
}
.timeline .timeline-container-layer__content.withdraw:hover {
  background-color: var(--color-orange-005);
  border-color: var(--color-orange-050);
}
.timeline .timeline-container-layer__content.withdraw.active {
  background-color: var(--color-orange-010);
  border-color: var(--color-orange-050);
}
.timeline .timeline-container-layer__content.delegate {
  background-color: var(--color-cyan-005);
  border-color: var(--color-cyan-050);
}
.timeline .timeline-container-layer__content.delegate .task__row [class*=ic-] {
  background: var(--color-cyan-060);
}
.timeline .timeline-container-layer__content.delegate .task__row .action {
  color: var(--color-cyan-060);
}
.timeline .timeline-container-layer__content.delegate:hover {
  background-color: var(--color-cyan-005);
  border-color: var(--color-cyan-050);
}
.timeline .timeline-container-layer__content.delegate.active {
  background-color: var(--color-cyan-010);
  border-color: var(--color-cyan-060);
}
.timeline .timeline-container-layer__content .approval__wrapper {
  margin: 0.5rem 0 0.25rem 1rem;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval__label {
  font-size: 0.75rem;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval__content {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper {
  min-height: 1.125rem;
  border: 0.0625rem solid transparent;
  border-radius: 0.375rem;
  padding: 0.5rem;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper:first-child {
  margin-top: 4px;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper .task__row .approval-circle {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.625rem;
  font-weight: 500;
  display: inline-block;
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper .comment__row {
  background-color: var(--color-gray-003);
  border-color: var(--color-gray-003);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.running {
  background-color: var(--color-gray-000);
  border-color: var(--color-blue-015);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.running .task__row .approval-circle {
  color: var(--color-gray-000);
  background: var(--color-blue-030);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.running .task__row .action {
  color: var(--color-gray-000);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.pending {
  background-color: var(--color-gray-000);
  border-color: var(--color-gray-000);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.pending .task__row .approval-circle {
  color: var(--color-gray-050);
  background: var(--color-gray-010);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.pending .task__row .action {
  color: var(--color-gray-050);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.pending .task__row .text {
  color: var(--color-gray-050);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.finish {
  background-color: var(--color-gray-000);
  border-color: var(--color-vivid-green-030);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.finish .task__row .approval-circle {
  color: var(--color-vivid-green-060);
  background: var(--color-vivid-green-020);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.finish .task__row .action {
  color: var(--color-vivid-green-060);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.reject {
  background-color: var(--color-gray-000);
  border-color: var(--color-red-020);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.reject .task__row .approval-circle {
  color: var(--color-red-050);
  background: var(--color-red-010);
}
.timeline .timeline-container-layer__content .approval__wrapper .approval-item__wrapper.reject .task__row .action {
  color: var(--color-red-050);
}

/*
 * @file components/_grid.scss
 * @description grid 디자인
 * @version 1.0
 *
 * Sort 미사용시 grid 디자인 사용 가능
 */
.grid {
  --row-height: 2.375rem;
  --row-header-height: 2.625rem;
  display: grid;
  flex: 1;
  height: 100%;
  align-content: start;
  font-size: 0.875rem;
  font-weight: 400;
}
.grid .grid__row {
  display: grid;
  grid-template-columns: var(--data-columns-width);
}
.grid .grid__row:not(:last-child) .grid__cell {
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.grid .grid__cell {
  display: flex;
  align-items: center;
  height: inherit;
  border-radius: inherit;
  border-right: 0.0625rem solid var(--grid-line-color);
  color: var(--grid-body-text-color);
  /*없으면 말줄임 안됨*/
}
.grid .grid__cell .flex__row {
  min-width: 0;
}
.grid .grid__head {
  font-weight: 700;
  border-top: 0.0625rem solid var(--grid-line-color);
  border-bottom: 0.0625rem solid var(--grid-line-color);
}
.grid .grid__head .grid__row {
  background-color: var(--grid-header-bg-color);
  grid-template-columns: var(--data-header-columns-width);
  grid-template-rows: minmax(2.25rem, auto);
}
.grid .grid__head .grid__row .grid__row {
  height: var(--row-header-height);
}
.grid .grid__head .grid__row .grid__cell:not([data-grid-sortable=false]),
.grid .grid__head .grid__row .grid__cell:not([data-grid-sortable=false]) {
  cursor: pointer;
}
.grid .grid__head .grid__row .grid__cell:not([data-grid-sortable=false]) > *,
.grid .grid__head .grid__row .grid__cell:not([data-grid-sortable=false]) > * {
  pointer-events: none;
}
.grid .grid__head .grid__row .grid__cell > *,
.grid .grid__head .grid__row .grid__cell > * {
  color: var(--grid-header-text-color);
  font-weight: 600;
}
.grid.grid--header-sync .grid__body {
  scrollbar-gutter: stable;
}
.grid .grid__body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
.grid .grid__body .grid__row {
  height: var(--row-height);
  grid-template-columns: var(--data-body-columns-width);
  grid-template-rows: minmax(2.375rem, auto);
  background-color: var(--grid-bg-color);
}
.grid .grid__body .grid__row.selected {
  background-color: var(--grid-bg-color-selected);
}
.grid .grid__body .grid__row.warning {
  background-color: var(--grid-bg-color-warning);
}
.grid .grid__body .grid__row.read-only {
  cursor: default;
}
.grid .grid__body .grid__row:last-child {
  border-radius: 0 0 0.1875rem 0.1875rem;
}
.grid .grid__body .grid__row:last-child .grid__cell {
  border-bottom: 0.0625rem solid var(--grid-line-color);
  border-radius: 0;
}
.grid .grid__body .grid__row:not(.read-only):hover {
  background-color: var(--grid-bg-color-hover);
}
.grid .grid__body .grid__cell {
  color: inherit;
  background-color: inherit;
}

.grid__empty {
  flex: 1;
  min-height: var(--data-height, 38.125rem);
  align-content: center;
}
.grid__empty .grid__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1.125rem;
  font-weight: 500;
}
.grid__empty .grid__cell > .ic-no-data,
.grid__empty .grid__cell > .ic-no-search {
  width: 16.25rem;
  height: 16.25rem;
}
.grid__empty .grid__cell > .empty__title {
  line-height: 1.3;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--grid-empty-text-color);
}
.grid__empty .grid__cell > .empty__subtitle {
  line-height: 1.3;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--grid-empty-text-color);
}
.grid__empty .empty__icon .ic-no-data,
.grid__empty .empty__icon .ic-no-search {
  width: 16.25rem;
  height: 16.25rem;
}

.fixed-grid__column, .fixed-grid__row {
  --border-radius: 0.375rem;
  --line-color: var(--color-gray-010);
  --bg-color: var(--color-gray-000);
  --text-color: var(--color-gray-090);
  display: grid;
}
.fixed-grid__column .fixed-grid__item, .fixed-grid__row .fixed-grid__item {
  display: flex;
  align-items: center;
  height: inherit;
  color: var(--text-color);
  font-weight: 500;
  background-color: var(--bg-color);
  padding: 0 0.75rem;
}
.fixed-grid__column.grid-line, .fixed-grid__row.grid-line {
  border: 0.0625rem solid var(--line-color);
  background-color: var(--line-color);
  border-radius: 0.375rem;
  overflow: hidden;
}
.fixed-grid__column.grid-line .fixed-grid__item, .fixed-grid__row.grid-line .fixed-grid__item {
  border-right: 0.0625rem solid var(--line-color);
  border-bottom: 0.0625rem solid var(--line-color);
}
.fixed-grid__column.grid-line .fixed-grid__item.last-in-row, .fixed-grid__row.grid-line .fixed-grid__item.last-in-row {
  border-right: none;
}
.fixed-grid__column.grid-line .fixed-grid__item.last-row, .fixed-grid__row.grid-line .fixed-grid__item.last-row {
  border-bottom: none;
}
.fixed-grid__column {
  --data-columns: 4;
  --row-height: 2.25rem;
  grid-template-columns: repeat(var(--data-columns), auto);
  grid-auto-rows: minmax(var(--row-height), auto);
  grid-auto-flow: row;
}
.fixed-grid__row {
  --data-rows: 4;
  --row-width: 7.5rem;
  grid-template-rows: repeat(var(--data-rows), auto);
  grid-auto-columns: minmax(var(--row-width), auto);
  grid-auto-flow: column;
}

.guide__empty {
  align-items: center;
  justify-content: center;
  container-type: size;
  overflow: hidden;
}
.guide__empty .empty__icon .ic-no-data,
.guide__empty .empty__icon .ic-no-search {
  width: 16.25rem;
  height: 16.25rem;
}
@media screen and (max-width: 1024px) {
  .guide__empty .empty__icon .ic-no-data,
.guide__empty .empty__icon .ic-no-search {
    width: 12.5rem !important;
    height: 12.5rem !important;
  }
}
@media screen and (max-width: 767px) {
  .guide__empty .empty__icon .ic-no-data,
.guide__empty .empty__icon .ic-no-search {
    width: 10rem !important;
    height: 10rem !important;
  }
}
@media screen and (max-width: 480px) {
  .guide__empty .empty__icon .ic-no-data,
.guide__empty .empty__icon .ic-no-search {
    width: 7.5rem !important;
    height: 7.5rem !important;
  }
}
.guide__empty .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--grid-empty-text-color);
}
.guide__empty .empty__subtitle {
  color: var(--grid-empty-text-color);
}

.guide-detail {
  min-height: 0;
  overflow: hidden;
  z-index: 0;
}
.guide-detail .editor-view table,
.guide-detail .editor-preview table {
  margin-bottom: 1rem;
}
.guide-detail .editor-view table + blockquote,
.guide-detail .editor-preview table + blockquote {
  margin-top: 1rem;
}
.guide-detail .tree-view-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: none;
  overflow: auto;
}
.guide-detail .tree-view-content > div:first-child {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}
.guide-detail .tree-view-content-writer {
  flex: 0 0 auto;
}
.guide-detail .tree-view-content .file-content {
  flex: 0 0 auto;
}
.guide-detail #viewContent,
.guide-detail #viewContent.editor-view {
  flex: 0 0 auto;
  min-height: auto;
  height: auto;
  overflow: visible;
}
.guide-detail .tree-edit-content {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.guide-detail .tree-edit-content-editor,
.guide-detail .tree-edit-content-preview {
  min-height: 0;
  overflow: auto;
}
.guide-detail .tree-edit-content #attachFiles {
  min-height: 0;
  max-height: 17.2rem;
  overflow: auto;
}

/*
 * 스크롤스파이
 * 나무위키 우측 바로가기 앵커 기능 참고
 *
 * @file utilities/_scrollspy.scss
 * @description 스크롤스파이 디자인
 * @version 1.0
 */
.scroll-spy {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  width: var(--data-width, 12.5rem);
  z-index: 25;
}
.scroll-spy .spy__item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  margin-right: 1.25rem;
}
.scroll-spy .spy__item .spy__dot__box {
  width: 20px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  z-index: 1;
}
.scroll-spy .spy__item .spy__dot__box .spy__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--color-gray-050);
}
.scroll-spy .spy__item .spy__dot__box:hover .spy__dot {
  transform: scale(1.3);
  background: var(--color-gray-050);
}
.scroll-spy .spy__item .spy__dot__box:hover ~ .spy__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.scroll-spy .spy__item .spy__dot__box:active .spy__dot {
  background-color: var(--color-blue-050);
}
.scroll-spy .spy__item .spy__tooltip {
  position: absolute;
  right: 25px;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-gray-050);
  background-color: var(--color-gray-000);
  padding: 2px 8px;
  border-radius: 0.188rem;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(10px);
  transition: all 0.3s ease;
  border: 0.063rem solid var(--color-gray-015);
}
.scroll-spy .spy__item .spy__tooltip.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.scroll-spy .spy__item .spy__tooltip:hover {
  color: var(--color-gray-050);
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-015);
}
.scroll-spy .spy__item .spy__tooltip:active {
  color: var(--color-blue-070);
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-050);
}
@media screen and (max-width: 767px) {
  .scroll-spy {
    width: 7.5rem;
  }
}
@media screen and (max-width: 480px) {
  .scroll-spy {
    display: none;
  }
}

/*
 * @file components/_dashboard.scss
 * @description 개인현황판(대시보드) 디자인
 * @version 1.0
 */
.dashboard-panel {
  --dashboard-empty-text-color: var(--color-gray-070);
  --dashboard-component-empty-text-color: var(--color-gray-070);
  --dashboard-component-empty-icon-color: var(--color-gray-070);
  --dashboard-component-line-color: var(--skeleton-line-color);
  --dashboard-component-bg-color: var(--skeleton-bg-color);
  --dashboard-component-text-color: var(--color-gray-090);
  --dashboard-component-floating-line-color: var(--skeleton-line-color);
  --dashboard-component-floating-bg-color: var(--skeleton-bg-color);
  position: relative;
  width: 100%;
  height: 100%;
}
.dashboard-panel .dashboard-panel__grid {
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  grid-template-rows: repeat(var(--grid-row-count), 1fr);
  grid-template-columns: repeat(var(--grid-col-count), 1fr);
  gap: 0.75rem;
}
.dashboard-panel .dashboard-panel__grid.component {
  pointer-events: none;
}
.dashboard-panel .dashboard-panel__component {
  --component-empty-text-color: var(--dashboard-component-empty-text-color);
  width: 100%;
  position: relative;
  border: 0.063rem solid var(--dashboard-component-line-color);
  border-radius: 0.375rem;
  background-color: var(--dashboard-component-bg-color);
  color: var(--dashboard-component-text-color);
  pointer-events: auto;
  overflow: hidden;
}
.dashboard-panel .dashboard-panel__component:hover .dashboard-panel__component--header.floating {
  transition: opacity 0.2s ease;
  opacity: 1;
}
.dashboard-panel .dashboard-panel__component--header:not(.floating) {
  width: 100%;
  height: 2.25rem;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.25rem;
}
.dashboard-panel .dashboard-panel__component--header.floating {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: 0.063rem solid var(--dashboard-component-floating-line-color);
  border-radius: 0.375rem;
  box-shadow: 0 0.25rem 0.188rem 0 var(--elevation-color-3);
  padding: 0.25rem;
  background-color: var(--dashboard-component-floating-bg-color);
  opacity: 0;
  z-index: 500;
}
.dashboard-panel .dashboard-panel__component--header.floating + .dashboard-panel__component--content {
  padding: 0.75rem;
}
.dashboard-panel .dashboard-panel__component--header div {
  display: flex;
  gap: 0.25rem;
}
.dashboard-panel .dashboard-panel__component--header div.left {
  flex: 1;
  min-width: 0;
}
.dashboard-panel .dashboard-panel__component--header .title {
  flex-shrink: 1;
  cursor: default;
}
.dashboard-panel .dashboard-panel__component--content {
  flex: 1;
  overflow: hidden;
  padding: 0 0.75rem 0.75rem 0.75rem;
}
.dashboard-panel .dashboard-panel__component--content--monthCalendar, .dashboard-panel .dashboard-panel__component--content--weekCalendar, .dashboard-panel .dashboard-panel__component--content--dayCalendar {
  padding-top: 0.375rem !important;
}
.dashboard-panel .dashboard-panel__component--content .component__inner {
  height: 100%;
}
.dashboard-panel .dashboard-panel__component__empty--l {
  display: grid;
  height: 100%;
  align-content: center;
  justify-items: center;
}
.dashboard-panel .dashboard-panel__component__empty--l .empty__icon .ic-no-data {
  width: 7.5rem;
  height: 7.5rem;
}
.dashboard-panel .dashboard-panel__component__empty--l .empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--component-empty-text-color);
}
.dashboard-panel .dashboard-panel__component__empty {
  display: grid;
  grid-auto-flow: column;
  gap: 0.5rem;
  height: 100%;
  justify-content: center;
  align-items: center;
}
.dashboard-panel .dashboard-panel__component__empty .empty__icon .ic-search--l {
  background-color: var(--dashboard-component-empty-icon-color);
}
.dashboard-panel .dashboard-panel__component__empty .empty__title {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--component-empty-text-color);
}
.dashboard-panel .dashboard-panel__empty {
  display: grid;
  height: 100%;
  align-content: center;
  justify-items: center;
}
.dashboard-panel .dashboard-panel__empty .empty__icon .ic-no-data {
  width: 16.25rem;
  height: 16.25rem;
}
.dashboard-panel .dashboard-panel__empty .empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dashboard-empty-text-color);
  line-height: 1.3;
}
.dashboard-panel .dashboard-panel__empty .empty__subtitle {
  color: var(--dashboard-empty-text-color);
}

.dashboard-panel--editor {
  --dashboard-editor-grid-bg-color: var(--color-gray-003);
  --dashboard-editor-grid-line-color: var(--color-gray-015);
  --dashboard-editor-plus-bg-color: var(--color-gray-005);
  --dashboard-editor-plus-icon-color: var(--color-gray-020);
  --dashboard-editor-grid-bg-color-hover: var(--color-blue-000);
  --dashboard-editor-plus-bg-color-hover: var(--color-blue-005);
  --dashboard-editor-plus-icon-color-hover: var(--color-blue-015);
  --dashboard-editor-grid-bg-color-active: var(--color-blue-005);
  --dashboard-editor-grid-line-color-active: var(--color-blue-050);
  --dashboard-editor-plus-bg-color-active: var(--color-blue-010);
  --dashboard-editor-plus-icon-color-active: var(--color-blue-050);
  --dashboard-editor-grid-bg-color-selected: color-mix(in srgb, var(--color-blue-050) 20%, transparent);
  --dashboard-editor-grid-line-color-selected: var(--color-blue-050);
  --dashboard-editor-plus-bg-color-selected: var(--color-blue-050);
  --dashboard-editor-plus-icon-color-selected: var(--color-gray-000);
}
.dashboard-panel--editor .dashboard-panel__grid-item {
  display: grid;
  align-items: center;
  justify-content: center;
  background-color: var(--dashboard-editor-grid-bg-color);
  border: 0.125rem dashed var(--dashboard-editor-grid-line-color);
  border-radius: 0.563rem;
  overflow: hidden;
  cursor: pointer;
}
.dashboard-panel--editor .dashboard-panel__grid-item .plus {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  max-width: 2.5rem;
  max-height: 2.5rem;
  pointer-events: auto;
  background-color: var(--dashboard-editor-plus-bg-color);
}
.dashboard-panel--editor .dashboard-panel__grid-item .plus span[class*=ic-] {
  background-color: var(--dashboard-editor-plus-icon-color);
}
.dashboard-panel--editor .dashboard-panel__grid-item:hover {
  background-color: var(--dashboard-editor-grid-bg-color-hover);
}
.dashboard-panel--editor .dashboard-panel__grid-item:hover .plus {
  background-color: var(--dashboard-editor-plus-bg-color-hover);
}
.dashboard-panel--editor .dashboard-panel__grid-item:hover .plus span[class*=ic-] {
  background-color: var(--dashboard-editor-plus-icon-color-hover);
}
.dashboard-panel--editor .dashboard-panel__grid-item:active {
  background-color: var(--dashboard-editor-grid-bg-color-active);
  border: 0.125rem dashed var(--dashboard-editor-grid-line-color-active);
}
.dashboard-panel--editor .dashboard-panel__grid-item:active .plus {
  background-color: var(--dashboard-editor-plus-bg-color-active);
}
.dashboard-panel--editor .dashboard-panel__grid-item:active .plus span[class*=ic-] {
  background-color: var(--dashboard-editor-plus-icon-color-active);
}
.dashboard-panel--editor .dashboard-panel__grid-item.selected {
  background-color: var(--dashboard-editor-grid-bg-color-selected);
  border: 0.125rem solid var(--dashboard-editor-grid-line-color-selected);
}
.dashboard-panel--editor .dashboard-panel__grid-item.selected .plus {
  background-color: var(--dashboard-editor-plus-bg-color-selected);
}
.dashboard-panel--editor .dashboard-panel__grid-item.selected .plus span[class*=ic-] {
  background-color: var(--dashboard-editor-plus-icon-color-selected);
}

.select__sort {
  --dashboard-sort-bg-color: var(--select-option-bg-color);
  --dashboard-sort-line-color: var(--select-option-bg-color);
  --dashboard-sort-bg-color-hover: var(--select-option-item-bg-color-hover);
  --dashboard-sort-line-color-focus: var(--line-color-focus);
}
.select__sort .select__box {
  background-color: var(--dashboard-sort-bg-color);
  border: 0.0625rem solid var(--dashboard-sort-line-color);
}
.select__sort .select__box:hover {
  background-color: var(--dashboard-sort-bg-color-hover);
}
.select__sort .select__box:focus {
  border: 0.0625rem solid var(--dashboard-sort-line-color-focus);
}

/*
 * @file components/_slot.scss
 * @description 슬롯 디자인 (컴포넌트를 넣을 수 있는 빈 영역을 슬롯이라 일컫는다)
 * @version 1.0
 */
.slots {
  --slot-bg-color: var(--color-gray-003);
  --slot-bg-color-hover: var(--color-blue-000);
  --slot-bg-color-focus: var(--color-gray-000);
  --slot-bg-color-active: var(--color-blue-005);
  --slot-bg-color-selected: rgba(0, 102, 255, 0.2);
  --slot-bg-color-disabled: var(--color-gray-003);
  --slot-line-color: var(--color-gray-015);
  --slot-line-color-hover: var(--color-gray-015);
  --slot-line-color-focus: var(--color-blue-030);
  --slot-line-color-active: var(--color-blue-050);
  --slot-line-color-selected: var(--color-blue-050);
  --slot-line-color-disabled: var(--color-gray-003);
  --slot-icon-size: 2.5rem;
  --slot-icon-size-s: 1.25rem;
  --slot-plus-bg-color: var(--color-gray-005);
  --slot-plus-bg-color-hover: var(--color-blue-005);
  --slot-plus-bg-color-focus: var(--color-blue-005);
  --slot-plus-bg-color-active: var(--color-blue-010);
  --slot-plus-bg-color-selected: var(--color-blue-010);
  --slot-plus-bg-color-disabled: var(--color-gray-010);
  --slot-plus-icon-color: var(--color-gray-020);
  --slot-plus-icon-color-hover: var(--color-blue-015);
  --slot-plus-icon-color-focus: var(--color-blue-015);
  --slot-plus-icon-color-active: var(--color-blue-050);
  --slot-plus-icon-color-selected: var(--color-gray-000);
  --slot-plus-icon-color-disabled: var(--color-gray-030);
  display: grid;
  position: absolute;
  width: 100%;
  height: 100%;
  grid-template-rows: repeat(var(--grid-row-count), 1fr);
  grid-template-columns: repeat(var(--grid-col-count), 1fr);
  gap: 0.75rem;
}
.slots .slot {
  display: grid;
  align-items: center;
  justify-content: center;
  height: var(--slot-height, auto);
  background-color: var(--slot-bg-color);
  border: 0.125rem dashed var(--slot-line-color);
  border-radius: 0.563rem;
  cursor: pointer;
}
.slots .slot .plus, .slots .slot .plus--s {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  pointer-events: auto;
  background-color: var(--slot-plus-bg-color);
}
.slots .slot .plus span[class*=ic-], .slots .slot .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color);
}
.slots .slot .plus {
  width: var(--slot-icon-size);
  height: var(--slot-icon-size);
}
.slots .slot .plus--s {
  width: var(--slot-icon-size-s);
  height: var(--slot-icon-size-s);
}
.slots .slot:hover {
  background-color: var(--slot-bg-color-hover);
  border: 0.125rem dashed var(--slot-line-color-hover);
}
.slots .slot:hover .plus, .slots .slot:hover .plus--s {
  background-color: var(--slot-plus-bg-color-hover);
}
.slots .slot:hover .plus span[class*=ic-], .slots .slot:hover .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color-hover);
}
.slots .slot:focus {
  background-color: var(--slot-bg-color-focus);
  border: 0.125rem dashed var(--slot-line-color-focus);
}
.slots .slot:focus .plus, .slots .slot:focus .plus--s {
  background-color: var(--slot-plus-bg-color-focus);
}
.slots .slot:focus .plus span[class*=ic-], .slots .slot:focus .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color-focus);
}
.slots .slot:active {
  background-color: var(--slot-bg-color-active);
  border: 0.125rem dashed var(--slot-line-color-active);
}
.slots .slot:active .plus, .slots .slot:active .plus--s {
  background-color: var(--slot-plus-bg-color-active);
}
.slots .slot:active .plus span[class*=ic-], .slots .slot:active .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color-active);
}
.slots .slot.selected {
  background-color: var(--slot-bg-color-selected);
  border: 0.125rem solid var(--slot-line-color-selected);
}
.slots .slot.selected .plus, .slots .slot.selected .plus--s {
  background-color: var(--slot-plus-bg-color-selected);
}
.slots .slot.selected .plus span[class*=ic-], .slots .slot.selected .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color-selected);
}
.slots .slot.disabled {
  background-color: var(--slot-bg-color-disabled);
  border: 0.125rem solid var(--slot-line-color-disabled);
  cursor: not-allowed;
}
.slots .slot.disabled .plus, .slots .slot.disabled .plus--s {
  background-color: var(--slot-plus-bg-color-disabled);
}
.slots .slot.disabled .plus span[class*=ic-], .slots .slot.disabled .plus--s span[class*=ic-] {
  background: var(--slot-plus-icon-color-disabled);
}

/*
 * @file components/_search.scss
 * @description 검색 디자인
 * @version 1.0
 */
.search {
  padding: 0.625rem 0.75rem;
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
}
.search__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--label-color);
  line-height: 1.3;
}

/*
 * @file layout/_wrapper.scss
 * @description wrapper에서 사용되는 scss
 * @version 1.0
 */
.wrapper {
  display: flex;
  margin: 0 auto;
  height: 100vh;
  overflow: hidden;
}

/*
 * @file layout/_container.scss
 * @description container에서 사용되는 scss
 * @version 1.0
 */
.container__dashboard {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
  overflow-y: auto;
}

.container__common {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
  overflow-y: auto;
}
.container__common .list {
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
  margin: 0.75rem 1.25rem auto 1.25rem;
}
.container__common .list .list__btn {
  padding: 0.5rem 0.75rem;
}
.container__common .list .list__content {
  overflow: auto;
}
.container__common .list .list__content .element {
  width: 100%;
}
.container__common .list .list__content.resizable {
  height: calc(100vh - 2.5rem - 3rem - 3.137rem - 1.5rem - 1.875rem - 1rem);
}
.container__common .list .list__content .list__empty {
  height: 100%;
  justify-content: center;
}
.container__common .list .list__content .list__empty .empty__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container__common .list .list__content .list__empty .empty__cell > .empty__icon > .ic-no-data, .container__common .list .list__content .list__empty .empty__cell > .empty__icon .ic-no-search {
  width: 16.25rem;
  height: 16.25rem;
}
.container__common .list .list__content .list__empty .empty__cell > .empty__title {
  line-height: 1.3;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--content-empty-text-color);
}
.container__common .list .list__content .list__empty .empty__cell > .empty__subtitle {
  line-height: 1.3;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--content-empty-text-color);
}

.container__detail {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
}
.container__detail .detail__section.fluid {
  flex: 1 1 auto;
  min-height: 0;
}
.container__detail .detail__section .detail__center {
  min-width: 0;
  margin: 0 auto;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.container__detail .detail__section .detail__center.placeholder {
  visibility: hidden;
  opacity: 0;
}
.container__detail .detail__section .detail__scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  scrollbar-gutter: stable both-edges;
  padding: 0.5rem 0 1rem 0;
}
.container__detail .detail__inner {
  width: var(--data-width, 100%);
  height: var(--data-height, fit-content);
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
  margin: 0 auto;
  min-width: 0;
}
.container__detail .detail__inner.inner--no-border {
  border: 0rem solid transparent;
  background-color: transparent !important;
}
.container__detail .detail__btn {
  min-height: 3.375rem;
  padding: 0.75rem;
}
.container__detail .detail__content {
  min-height: 725px;
  padding: 0.75rem;
}
.container__detail .detail__content .view-title h2 {
  line-height: 1.3;
}
.container__detail .detail__content .view-content {
  min-height: var(--data-content-height);
}

.container__columns {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
}
.container__columns .column__section,
.container__columns .column__inner,
.container__columns .detail {
  min-height: 0;
}
.container__columns .column-left,
.container__columns .column-right {
  min-width: 0;
}
.container__columns .column__inner {
  padding: 1.25rem;
  background-color: var(--content-bg-color);
  border-radius: 0.563rem;
  border: 0.0625rem solid var(--detail-line-color);
}
.container__columns .column__inner .search {
  background-color: transparent;
  border: none;
}
.container__columns .column__inner .table-container {
  height: var(--data-height, 260px);
}
.container__columns .column__inner .table-container .table__box tbody tr.is-clickable {
  cursor: pointer;
}

.container__calendar {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
  padding: 1rem 1rem 0 1rem;
  display: flex;
  min-height: 0;
  min-width: 0;
  /* 좌측: 기본 20% */
  /* 우측: 나머지 전체 */
  /* 접힘 상태: 좌측 0% */
}
.container__calendar .calendar__sidebar {
  flex: 0 0 20%;
  max-width: 20%;
  min-width: 0;
  min-height: 0;
  transition: flex-basis 0.2s ease, max-width 0.2s ease, opacity 0.2s ease;
}
.container__calendar .calendar__sidebar .detail__inner {
  width: var(--data-width, 100%);
  height: var(--data-height, fit-content);
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
  margin: 0 auto;
  min-height: 0;
}
.container__calendar .calendar__sidebar .detail__inner.inner--no-border {
  border-color: transparent !important;
  background-color: transparent !important;
}
.container__calendar .calendar__sidebar .calendar__sidebar-layout {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.container__calendar .calendar__sidebar .calendar__list {
  flex: 1 1 auto !important;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.container__calendar .calendar__sidebar .calendar__list::-webkit-scrollbar {
  display: none;
}
.container__calendar .calendar__main {
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
  background-color: var(--content-bg-color);
  height: var(--data-height, fit-content);
  padding: 1.25rem;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.container__calendar.is-sidebar-collapsed .calendar__sidebar {
  flex: 0 0 0;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.container__scroll {
  width: calc(100% - 2.5rem);
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  margin-left: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
  display: flex;
  flex-direction: column;
}
.container__scroll .content {
  background-color: var(--content-bg-color);
  height: calc(100vh - 2.5rem - 3rem - 1.25rem);
  border-radius: 0.563rem;
  border: 0.0625rem solid var(--content-line-color);
}
.container__scroll .content .search {
  background-color: transparent;
  border: none;
}
.container__scroll .content .search .order-option .select__box {
  background-color: var(--select-option-bg-color);
  border: 0.0625rem solid var(--select-option-bg-color);
}
.container__scroll .content .search .order-option .select__box:hover {
  background-color: var(--select-option-item-bg-color-hover);
}
.container__scroll .content .search .order-option .select__box:focus {
  border: 0.0625rem solid var(--line-color-focus);
}
.container__scroll .content .inner {
  height: 100%;
}
.container__scroll .content .inner.deliverable__page {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}
.container__scroll .content .inner .list-content.dashboard-template__content {
  height: calc(100vh - 11.25rem);
}
.container__scroll .content .inner .list-content.deliverable__content {
  min-height: 0;
  height: 100%;
}
.container__scroll .content .inner .list-content.deliverable__content .grid--header-sync {
  min-height: 0;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}
.container__scroll .content .inner .list-content.deliverable__content .grid--header-sync .grid__head,
.container__scroll .content .inner .list-content.deliverable__content .grid--header-sync .grid__body,
.container__scroll .content .inner .list-content.deliverable__content .grid--header-sync .grid__row {
  min-width: 0;
  width: 100%;
}
.container__scroll .content .inner .list-content.deliverable__content .grid--header-sync .grid__body {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow-x: hidden;
}

.container__document {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2.5rem);
  margin-top: 2.5rem;
  box-sizing: border-box;
  background-color: var(--container-bg-color);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.container__document.placeholder {
  visibility: hidden;
  opacity: 0;
}
.container__document .document__section.fluid {
  flex: 1 1 auto;
  min-height: 0;
}
.container__document .document__section .document__center {
  margin: 0 auto;
}
.container__document .document__section .document__scroll {
  flex: 1;
  overflow-y: auto;
  position: relative;
  scrollbar-gutter: stable both-edges;
}
.container__document .document__inner {
  width: var(--data-width, 60rem);
  height: var(--data-height, fit-content);
  background-color: var(--content-bg-color);
  border: 0.0625rem solid var(--content-line-color);
  border-radius: 0.563rem;
  margin: 0 auto;
}
.container__document .document__inner.inner--no-border {
  border-color: transparent !important;
  background-color: transparent !important;
}

/*
 * @file layout/_navigation.scss
 * @description 네비게이션에서 사용되는 scss
 * @version 1.0
 */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  width: 2.5rem;
  height: 100vh;
  box-sizing: border-box;
  z-index: 7000;
}
.navigation .navigation__items {
  background-color: #1C1E2B;
  overflow-y: auto;
  flex-shrink: 0;
}
.navigation .navigation__items .navigation__info {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 3.75rem;
}
.navigation .navigation__items .navigation__info [class*=ic-] {
  margin: 0.5rem;
  background: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items .navigation__info .navigation__icon--custom {
  margin: 0.5rem;
  color: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items .navigation__info .navigation__icon--text-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0.5rem;
  border: 0.0625rem solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--menu-icon-color, #8C94B0);
}
.navigation .navigation__items .navigation__info .navigation__title {
  color: #FFFFFF;
}
.navigation .navigation__items .navigation__item .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items .navigation__item .navigation__link {
  display: flex;
  flex-direction: row;
  height: 1.875rem;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items .navigation__item .navigation__link:hover {
  text-decoration: none;
}
.navigation .navigation__items .navigation__accordion {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion:has(input[type=radio]:checked), .navigation .navigation__items .navigation__accordion:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.navigation .navigation__items .navigation__accordion > .navigation__accordion__border {
  min-width: 0;
  height: 1.875rem;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items .navigation__accordion > .navigation__accordion__border [class*=ic-] {
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion > .navigation__accordion__border > .navigation__accordion__label {
  height: 100%;
  padding: 0 0 0 calc(0.25rem + (var(--data-padding-level) - 1) * 1rem);
  gap: 0.5rem;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items .navigation__accordion > .navigation__accordion__border > .navigation__accordion__label {
  cursor: pointer;
  line-height: 1.3;
}
.navigation .navigation__items .navigation__accordion > .navigation__accordion__border > .navigation__accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
  background: var(--icon-color);
}
.navigation .navigation__items .navigation__accordion > input[type=checkbox],
.navigation .navigation__items .navigation__accordion > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.navigation .navigation__items .navigation__accordion > input[type=checkbox]:checked ~ .navigation__accordion__border .nav-issue-badge,
.navigation .navigation__items .navigation__accordion > input[type=radio]:checked ~ .navigation__accordion__border .nav-issue-badge {
  display: none;
}
.navigation .navigation__items .navigation__accordion > input[type=checkbox]:checked ~ .navigation__accordion__content,
.navigation .navigation__items .navigation__accordion > input[type=radio]:checked ~ .navigation__accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.navigation .navigation__items .navigation__accordion > input[type=checkbox]:checked ~ .navigation__accordion__content::-webkit-scrollbar,
.navigation .navigation__items .navigation__accordion > input[type=radio]:checked ~ .navigation__accordion__content::-webkit-scrollbar {
  display: none;
}
.navigation .navigation__items .navigation__accordion .navigation__accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
}
.navigation .navigation__items .navigation__accordion .navigation__accordion__content .accordion__inner {
  padding: 0.75rem;
}
.navigation .navigation__items .navigation__accordion--s {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion--s:has(input[type=radio]:checked), .navigation .navigation__items .navigation__accordion--s:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.navigation .navigation__items .navigation__accordion--s > .navigation__accordion__border {
  min-width: 0;
  height: 1.875rem;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items .navigation__accordion--s > .navigation__accordion__border [class*=ic-] {
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion--s > .navigation__accordion__border > .navigation__accordion__label {
  height: 100%;
  padding: 0 0 0 calc(0.25rem + (var(--data-padding-level) - 1) * 1rem);
  gap: 0.5rem;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items .navigation__accordion--s > .navigation__accordion__border > .navigation__accordion__label {
  cursor: pointer;
  line-height: 1.3;
}
.navigation .navigation__items .navigation__accordion--s > .navigation__accordion__border > .navigation__accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
  background: var(--icon-color);
}
.navigation .navigation__items .navigation__accordion--s > input[type=checkbox],
.navigation .navigation__items .navigation__accordion--s > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.navigation .navigation__items .navigation__accordion--s > input[type=checkbox]:checked ~ .navigation__accordion__border .nav-issue-badge,
.navigation .navigation__items .navigation__accordion--s > input[type=radio]:checked ~ .navigation__accordion__border .nav-issue-badge {
  display: none;
}
.navigation .navigation__items .navigation__accordion--s > input[type=checkbox]:checked ~ .navigation__accordion__content,
.navigation .navigation__items .navigation__accordion--s > input[type=radio]:checked ~ .navigation__accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.navigation .navigation__items .navigation__accordion--s > input[type=checkbox]:checked ~ .navigation__accordion__content::-webkit-scrollbar,
.navigation .navigation__items .navigation__accordion--s > input[type=radio]:checked ~ .navigation__accordion__content::-webkit-scrollbar {
  display: none;
}
.navigation .navigation__items .navigation__accordion--s .navigation__accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
}
.navigation .navigation__items .navigation__accordion--s .navigation__accordion__content .accordion__inner {
  padding: 0.75rem;
}
.navigation .navigation__items .navigation__accordion--xs {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion--xs:has(input[type=radio]:checked), .navigation .navigation__items .navigation__accordion--xs:has(input[type=checkbox]:checked) {
  flex: 1 1 auto;
}
.navigation .navigation__items .navigation__accordion--xs > .navigation__accordion__border {
  min-width: 0;
  height: 1.875rem;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items .navigation__accordion--xs > .navigation__accordion__border [class*=ic-] {
  flex: 0 0 auto;
}
.navigation .navigation__items .navigation__accordion--xs > .navigation__accordion__border > .navigation__accordion__label {
  height: 100%;
  padding: 0 0 0 calc(0.25rem + (var(--data-padding-level) - 1) * 1rem);
  gap: 0.5rem;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items .navigation__accordion--xs > .navigation__accordion__border > .navigation__accordion__label {
  cursor: pointer;
  line-height: 1.3;
}
.navigation .navigation__items .navigation__accordion--xs > .navigation__accordion__border > .navigation__accordion__label [class*=ic-arrow-right] {
  transition: all 0.2s ease;
  background: var(--icon-color);
}
.navigation .navigation__items .navigation__accordion--xs > input[type=checkbox],
.navigation .navigation__items .navigation__accordion--xs > input[type=radio] {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.navigation .navigation__items .navigation__accordion--xs > input[type=checkbox]:checked ~ .navigation__accordion__border .nav-issue-badge,
.navigation .navigation__items .navigation__accordion--xs > input[type=radio]:checked ~ .navigation__accordion__border .nav-issue-badge {
  display: none;
}
.navigation .navigation__items .navigation__accordion--xs > input[type=checkbox]:checked ~ .navigation__accordion__content,
.navigation .navigation__items .navigation__accordion--xs > input[type=radio]:checked ~ .navigation__accordion__content {
  scrollbar-width: none;
  flex: 1 1 auto;
  opacity: 1;
  overflow-y: auto;
  max-height: var(--data-height, auto);
}
.navigation .navigation__items .navigation__accordion--xs > input[type=checkbox]:checked ~ .navigation__accordion__content::-webkit-scrollbar,
.navigation .navigation__items .navigation__accordion--xs > input[type=radio]:checked ~ .navigation__accordion__content::-webkit-scrollbar {
  display: none;
}
.navigation .navigation__items .navigation__accordion--xs .navigation__accordion__content {
  transition: all 0.25s ease;
  position: relative;
  flex: 0 0 0;
  opacity: 0;
  overflow: hidden;
}
.navigation .navigation__items .navigation__accordion--xs .navigation__accordion__content .accordion__inner {
  padding: 0.75rem;
}
.navigation .navigation__items--level1 {
  display: none;
  width: 2.563rem;
  background-color: #2B2F42;
  border-top: none;
  scrollbar-width: none;
}
.navigation .navigation__items--level1::-webkit-scrollbar {
  display: none;
}
.navigation .navigation__items--level1 .navigation__item--level1 {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  width: 2.563rem;
  height: 2.563rem;
  cursor: pointer;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items--level1 .navigation__item--level1 .navigation__icon:not(.navigation__icon--custom) {
  background: #237CFF;
}
.navigation .navigation__items--level1 .navigation__item--level1 .navigation__icon.navigation__icon--root-color {
  background: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1:hover {
  background-color: #3B4158;
}
.navigation .navigation__items--level1 .navigation__item--level1:hover .navigation__icon:not(.navigation__icon--custom) {
  background: #237CFF;
}
.navigation .navigation__items--level1 .navigation__item--level1:hover .navigation__icon.navigation__icon--root-color {
  background: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1:hover .navigation__icon--custom {
  color: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1:hover .navigation__icon--text-fallback {
  color: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level1 .navigation__item--level1:active .navigation__icon:not(.navigation__icon--custom) {
  background: #003FEB;
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1:active .navigation__icon.navigation__icon--root-color {
  background: #8C94B0;
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1:active .navigation__icon--custom {
  color: #8C94B0;
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1:active .navigation__icon--text-fallback {
  color: #8C94B0;
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1.active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level1 .navigation__item--level1.active .navigation__icon:not(.navigation__icon--custom) {
  background: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1.active .navigation__icon--custom {
  color: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1.active .navigation__icon--text-fallback {
  color: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1.active[data-menu-id=mega] {
  background: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items--level1 .navigation__item--level1.active[data-menu-id=mega] .navigation__icon.navigation__icon--root-color {
  background: #FFFFFF;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected .navigation__icon:not(.navigation__icon--custom) {
  background: #FFFFFF;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected .navigation__icon.navigation__icon--root-color {
  background: var(--menu-icon-color, #8C94B0);
}
.navigation .navigation__items--level1 .navigation__item--level1.selected .navigation__icon--custom {
  color: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items--level1 .navigation__item--level1.selected .navigation__icon--text-fallback {
  color: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:hover {
  background-color: #3B4158;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:active .navigation__icon:not(.navigation__icon--custom) {
  background: #767E9C;
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:active .navigation__icon.navigation__icon--root-color {
  background: var(--menu-icon-color, #8C94B0);
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:active .navigation__icon--custom {
  color: var(--menu-icon-color, #237CFF);
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected:active .navigation__icon--text-fallback {
  color: var(--menu-icon-color, #237CFF);
  opacity: 0.7;
}
.navigation .navigation__items--level1 .navigation__item--level1.selected.active .navigation__icon.navigation__icon--root-color {
  background: #FFFFFF;
}
.navigation .navigation__items--level1 .navigation__item--level1 .navigation__icon--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: #8C94B0;
}
.navigation .navigation__items--level1 .navigation__item--level1 .navigation__icon--custom > svg {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
}
.navigation .navigation__items--level1 .navigation__item--level1 .navigation__icon--text-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  border: 0.0625rem solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: #8C94B0;
}
.navigation .navigation__items--level1.active {
  display: block;
}
.navigation .navigation__items--level2 {
  display: none;
  width: 14.438rem;
}
.navigation .navigation__items--level2 .navigation__item--level2 {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  border-radius: 0.188rem;
  cursor: pointer;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:hover > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #A4ACC4;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:hover > .navigation__accordion__label > .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:active > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #4D536F;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__accordion__border:active > .navigation__accordion__label > .navigation__label {
  color: #4D536F;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link {
  padding: 0.25rem;
  padding-left: 2.125rem;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link .navigation__label {
  pointer-events: none;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link:hover .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level2 .navigation__item--level2 > .navigation__link:active .navigation__label {
  color: #4D536F;
}
.navigation .navigation__items--level2 .navigation__item--level2.active > .navigation__accordion__border {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level2 .navigation__item--level2.active > .navigation__accordion__border > .navigation__accordion__label {
  background-color: #3B4158;
}
.navigation .navigation__items--level2 .navigation__item--level2.active > .navigation__accordion__border > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #FFFFFF;
  transform: rotate(90deg);
}
.navigation .navigation__items--level2 .navigation__item--level2.active > .navigation__accordion__border > .navigation__accordion__label > .navigation__label {
  color: #FFFFFF;
}
.navigation .navigation__items--level2 .navigation__item--level2.active > .navigation__accordion__border:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border {
  background-color: #1C1E2B !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border .navigation__accordion__label {
  background-color: transparent !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #FFFFFF !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border .navigation__accordion__label > .navigation__label {
  color: #FFFFFF !important;
  font-weight: 700;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border:hover {
  background-color: #2B2F42 !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__accordion__border:hover .navigation__accordion__label {
  background-color: transparent !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__link {
  background-color: #1C1E2B !important;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__link .navigation__label {
  color: #FFFFFF !important;
  font-weight: 700;
}
.navigation .navigation__items--level2 .navigation__item--level2.selected > .navigation__link:hover {
  background-color: #2B2F42 !important;
}
.navigation .navigation__items--level2.active {
  display: block;
}
.navigation .navigation__items--level3 {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level3 .navigation__item--level3 {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  border-radius: 0.188rem;
  cursor: pointer;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:hover > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #A4ACC4;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:hover > .navigation__accordion__label > .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:active > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #4D536F;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__accordion__border:active > .navigation__accordion__label > .navigation__label {
  color: #4D536F;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link {
  padding: 0.25rem;
  padding-left: 3.125rem;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link .navigation__label {
  pointer-events: none;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link:hover .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level3 .navigation__item--level3 > .navigation__link:active .navigation__label {
  color: #4D536F;
}
.navigation .navigation__items--level3 .navigation__item--level3.active > .navigation__accordion__border {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level3 .navigation__item--level3.active > .navigation__accordion__border > .navigation__accordion__label {
  background-color: #3B4158;
}
.navigation .navigation__items--level3 .navigation__item--level3.active > .navigation__accordion__border > .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #FFFFFF;
  transform: rotate(90deg);
}
.navigation .navigation__items--level3 .navigation__item--level3.active > .navigation__accordion__border > .navigation__accordion__label > .navigation__label {
  color: #FFFFFF;
}
.navigation .navigation__items--level3 .navigation__item--level3.active > .navigation__accordion__border:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border {
  background-color: #1C1E2B !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border .navigation__accordion__label {
  background-color: transparent !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border .navigation__accordion__label [class*=ic-arrow-right] {
  background-color: #FFFFFF !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border .navigation__accordion__label > .navigation__label {
  color: #FFFFFF !important;
  font-weight: 700;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border:hover {
  background-color: #2B2F42 !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__accordion__border:hover .navigation__accordion__label {
  background-color: transparent !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__link {
  background-color: #1C1E2B !important;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__link .navigation__label {
  color: #FFFFFF !important;
  font-weight: 700;
}
.navigation .navigation__items--level3 .navigation__item--level3.selected > .navigation__link:hover {
  background-color: #2B2F42 !important;
}
.navigation .navigation__items--level3.active {
  display: block;
}
.navigation .navigation__items--level4 .navigation__item--level4 {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  border-radius: 0.188rem;
  cursor: pointer;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link {
  padding-left: 4.125rem;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link .navigation__label {
  pointer-events: none;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link:hover .navigation__label {
  color: #A4ACC4;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--level4 .navigation__item--level4 > .navigation__link:active .navigation__label {
  color: #4D536F;
}
.navigation .navigation__items--mega {
  display: none;
  min-width: calc(100vw - 2.5rem);
}
.navigation .navigation__items--mega .navigation__search__section {
  padding: 0.313rem 0;
  justify-content: center;
}
.navigation .navigation__items--mega .navigation__search__section .section__title {
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__search__section .section__description {
  color: #767E9C;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l {
  margin-left: 0.625rem;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > [class*=ic-] {
  background: #A4ACC4;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l:hover > [class*=ic-] {
  background: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l:active > [class*=ic-] {
  background: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l:has(> input[type=text]:focus) > [class*=ic-] {
  background: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > input[type=text] {
  padding-left: 2rem;
  color: #FFFFFF;
  background-color: #2B2F42;
  border-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > input[type=text]::placeholder {
  color: #767E9C;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > input[type=text]:hover {
  background-color: #3B4158;
  border-color: #3B4158;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > input[type=text]:focus {
  background-color: #0D0E14;
  border-color: #0066FF;
}
.navigation .navigation__items--mega .navigation__search__section .input-icon__l > input[type=text]:active {
  background-color: #0D0E14;
  border-color: #0066FF;
}
.navigation .navigation__items--mega .navigation__category__section {
  height: calc(100vh - 2.5rem);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(204px, 1fr));
  grid-auto-rows: min-content;
  gap: 1.25rem 1.5rem;
  padding: 1.25rem 2.5rem;
  scrollbar-width: none;
  overflow-y: auto;
}
.navigation .navigation__items--mega .navigation__category__section:has(.navigation__category--empty) {
  grid-template-columns: repeat(auto-fit, minmax(204px, 1fr));
  grid-auto-rows: auto;
}
.navigation .navigation__items--mega .navigation__category__section::-webkit-scrollbar {
  display: none;
}
.navigation .navigation__items--mega .navigation__category__section .category__title__label {
  font-weight: 700;
}
.navigation .navigation__items--mega .navigation__category__section .category__label .keyword {
  color: #FFFFFF;
  background-color: #237CFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 {
  font-size: 0.875rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 2.313rem;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.5rem;
  background-color: #2B2F42;
  border: 0.0625rem solid transparent;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info [class*=ic-] {
  flex: 0 0 auto;
  background: #237CFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info .menu-icon {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info .menu-icon--custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info .menu-icon--custom > svg {
  width: 1.5rem;
  height: 1.5rem;
  overflow: visible;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info .menu-icon--text-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid currentColor;
  border-radius: 50%;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--menu-icon-color, #237CFF);
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level1 .navigation__category__info .category__title__label {
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level2 {
  font-size: 0.875rem;
  padding-bottom: 0.75rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level2 > .category__title__label {
  display: inline-block;
  width: 100%;
  height: 1.938rem;
  color: #A4ACC4;
  padding: 0.375rem 0 0.375rem 0.75rem;
  border: 0.0625rem solid transparent;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level2 > .category__title__label:hover {
  background-color: #2B2F42;
  color: #A4ACC4;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 {
  height: 1.5rem;
  font-size: 0.75rem;
  background-color: transparent;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 .category__spacer {
  flex: 0 0 auto;
  width: calc(1rem + var(--data-space-stage, 0) * 0.25rem);
  height: 100%;
  border-right: 0.0625rem solid #3B4158;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section > .category__title__label {
  display: inline-block;
  padding-left: 1rem;
  vertical-align: middle;
  color: #A4ACC4;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section.selected {
  background-color: transparent;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section.selected .category__title__label {
  font-weight: 700;
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__title__section.selected:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link > .category__label__wrapper {
  min-width: 0;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link > .category__label__wrapper > .category__label {
  display: inline-block;
  vertical-align: middle;
  padding: 0.25rem 0 0.25rem 1rem;
  color: #A4ACC4;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link:active .category__label {
  color: #4D536F;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link.selected {
  background-color: transparent;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link.selected .category__label {
  font-weight: 700;
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level3 > .category__link.selected:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 {
  height: 1.5rem;
  font-size: 0.75rem;
  background-color: transparent;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4:active {
  background-color: #1C1E2B;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4.selected {
  background-color: transparent;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4.selected:hover {
  background-color: #2B2F42;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__spacer {
  flex: 0 0 auto;
  width: calc(1rem + var(--data-space-stage, 0) * 0.25rem);
  height: 100%;
  border-right: 0.0625rem solid;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link {
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 0.188rem;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link > .category__label__wrapper {
  min-width: 0;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link > .category__label__wrapper > .category__label {
  display: inline-block;
  vertical-align: middle;
  padding: 0.25rem 0rem 0.25rem 1rem;
  color: #A4ACC4;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link:hover .category__label {
  color: #A4ACC4;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link:active .category__label {
  color: #4D536F !important;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--level4 .category__link.selected .category__label {
  font-weight: 700;
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section.searching .category__label:has(.keyword) {
  font-weight: 700;
}
.navigation .navigation__items--mega .navigation__category__section.searching .navigation__category--level1:not(:has(.keyword)),
.navigation .navigation__items--mega .navigation__category__section.searching .navigation__category--level2:not(:has(.keyword)),
.navigation .navigation__items--mega .navigation__category__section.searching .navigation__category--level3:not(:has(.keyword)),
.navigation .navigation__items--mega .navigation__category__section.searching .navigation__category--level4:not(:has(.keyword)) {
  display: none;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  gap: 1.25rem;
  text-align: center;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--empty--message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  inline-size: clamp(18rem, 60vw, 45rem);
  min-width: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--empty--message > [class*=ic-] {
  background-color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--empty--title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: normal;
  line-height: 1.35;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
}
.navigation .navigation__items--mega .navigation__category__section .navigation__category--empty--subtitle {
  color: #767E9C;
}
.navigation .navigation__items--mega.active {
  display: block;
}

.left-panel {
  width: 13.75rem;
}
.left-panel .gnb .menu {
  position: fixed;
  overflow: auto;
  width: 13.75rem;
  height: calc(100vh - 2.875rem);
  z-index: 100;
  border-right: 0.0625rem solid #A4ACC4;
}
.left-panel .gnb .menu .menu-area .menu-name {
  display: inline-block;
  vertical-align: middle;
  margin: 0.25rem auto 0.0625rem 0.375rem;
  color: #3B4158;
  font-weight: 600;
  font-size: 0.875rem;
}
.left-panel .gnb .menu .menu-area .gnb-area {
  line-height: 1.25;
}
.left-panel .gnb .menu .menu-area .gnb-area:first-child {
  margin-top: 0.5rem;
}
.left-panel .gnb .menu .menu-area .gnb-area:last-child {
  margin-bottom: 0;
}
.left-panel .gnb .menu .menu-area .gnb-area .gnb-link {
  vertical-align: middle;
  margin: 0 0.375rem 0 0.375rem;
  padding: 0.375rem;
  border-radius: 0.25rem;
}
.left-panel .gnb .menu .menu-area .gnb-area .gnb-link .instance-count {
  position: absolute;
  right: 0.8125rem;
  border-radius: 1.25rem;
  padding: 0.125rem 0.625rem;
  margin-top: 0.25rem;
  background-color: #606885;
  color: #8C94B0;
  font-size: 0.688rem;
  font-weight: 500;
  line-height: inherit;
}
.left-panel .gnb .menu .menu-area .gnb-area .gnb-link .instance-count.active {
  background-color: #0066FF;
  color: #FFFFFF;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion > input[type=checkbox]:checked + .accordion__label {
  border-color: transparent;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label {
  border-color: transparent;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label .accordion__label-group {
  width: 85%;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label [class*=ic-] {
  background: #606885;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label [class*=ic-]:hover {
  background: #2B2F42;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label:hover {
  background-color: #F5F7F9;
}
.left-panel .gnb .menu .menu-area .gnb-area.accordion .accordion__label:hover [class*=ic-] {
  background: #2B2F42;
}
.left-panel .gnb .menu .menu-area .gnb-area .snb-area {
  margin: 0.25rem 0.375rem;
}
.left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link {
  display: flex;
  align-items: center;
  color: #606885;
  cursor: pointer;
  text-decoration: none;
  padding: 0.375rem 0.375rem 0.375rem 1.625rem;
  border-radius: 0.25rem;
}
.left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link .menu-name {
  font-size: calc(0.875rem - 0.0625rem);
}
.left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link:hover, .left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link.active {
  background-color: #F5F7F9;
}
.left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link:hover .ic-gnb-sub-dot, .left-panel .gnb .menu .menu-area .gnb-area .snb-area .snb-link.active .ic-gnb-sub-dot {
  background: #0052F7;
}
.left-panel .gnb .menu .menu-link-area {
  margin: 1rem 0.375rem 0 0.375rem;
  padding: 0 0.375rem;
}
.left-panel .gnb .menu .right {
  right: 0.375rem;
}

.nav-issue-badge {
  margin-left: 5px;
  flex-shrink: 0;
}
.nav-issue-badge:not(.nav-issue-badge--count) {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #DE3412;
  vertical-align: middle;
}
.nav-issue-badge--l1 {
  position: absolute;
  top: 5px;
  right: 5px;
  margin-left: 0;
  vertical-align: unset;
}
.nav-issue-badge--count {
  display: inline-flex;
  align-self: center;
}
.navigation__accordion__label > .nav-issue-badge--count {
  margin-left: 0;
}

/*
 * @file layout/_header.scss
 * @description header에서 사용되는 scss
 * @version 1.0
 */
.header {
  position: absolute;
  top: 0;
  left: 2.5rem;
  height: 2.5rem;
  width: calc(100% - 2.5rem);
  background-color: var(--header-bg-color);
  border-bottom: 0.063rem solid var(--h-bar-color-2);
}
.header .header__inner {
  height: 2.5rem;
}
.header .top__menu .top__menu__item {
  height: 2.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 0.25rem;
  border-left: 0.063rem solid var(--h-bar-color-2);
}

.header__document {
  position: fixed;
  top: 0;
  width: 100%;
  height: 2.5rem;
  background-color: var(--header-bg-color);
  border-bottom: 0.063rem solid var(--h-bar-color-2);
  z-index: 100;
}
.header__document .header__inner {
  height: 2.5rem;
}
.header__document .scroll__progress {
  position: fixed;
  width: 100%;
  background-color: transparent;
  z-index: 25;
}
.header__document .scroll__progress .progress__bar {
  height: 0.125rem;
  background-color: var(--line-color-active);
  width: 0;
}

.header__designer {
  position: fixed;
  top: 0;
  width: 100%;
  left: 0;
  height: 2.5rem;
  font-weight: 500;
  z-index: 100;
}
.header__designer .header__inner {
  height: 2.5rem;
}
.header__designer .logo {
  width: 12.5rem;
  padding: 0 0.75rem;
}
.header__designer .header__btn__list {
  width: 20rem;
}
.header__designer .header__btn__list [class*=btn__] {
  z-index: 250;
}

.top {
  display: flex;
  flex-direction: row;
  height: 3.4375rem;
  z-index: 100;
  border-bottom: 0.0625rem solid var(--color-gray-030);
}
.top .logo {
  width: 12.5rem;
  margin: 1rem 0.25rem 0.625rem 1rem;
}
.top .navigation_legacy {
  width: calc(100vw - 13.75rem);
  height: inherit;
}
.top .menu-area, .top .user-area {
  height: inherit;
}
.top .gnb {
  display: flex;
  flex-direction: row;
  margin: 0 1.5625rem;
  gap: 0.75rem;
}
.top .gnb-link {
  padding: 1.063rem 0.625rem;
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
}
.top .gnb-link.active {
  border-top: 0.25rem solid var(--color-gray-050);
  border-bottom: 0.25rem solid #0052F7;
  padding: 0.813rem 0.625rem;
  color: #0052F7;
}
.top .gnb-link.active [class*=gnb-] {
  background: #0052F7;
}
.top .gnb-link:not(.active):hover {
  border-top: 0.25rem solid var(--color-gray-050);
  border-bottom: 0.25rem solid var(--color-gray-030);
  padding: 0.813rem 0.625rem;
  color: var(--color-gray-070);
}
.top .gnb-link:not(.active):hover [class*=gnb-] {
  background: var(--color-gray-030);
}

.user {
  cursor: pointer;
  border-radius: 50%;
}
.user .i-user-profile {
  pointer-events: none;
}

.user__profile {
  height: 6.25rem;
  width: 16.75rem;
  align-items: center;
  padding: 1rem;
  background-color: var(--color-gray-003);
}

.user-info__inner {
  position: relative;
  display: inline-flex;
}
.user-info__inner .user-info__delegate-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 0.5rem;
  height: 0.5rem;
  background-color: #0052F7;
  border-radius: 50%;
  border: 0.09375rem solid var(--header-bg-color);
  pointer-events: none;
}

.delegate-principals__header {
  color: var(--color-gray-060) !important;
  cursor: default !important;
  pointer-events: none;
}

.delegate-principals__item {
  padding: 0.25rem 1rem;
}
.delegate-principals__item .delegate-principals__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.delegate-principals__item .delegate-principals__row > .flex__row {
  flex: 1;
  min-width: 0;
}
.delegate-principals__item .delegate-principals__row > .flex__row .text__ellipsis {
  font-size: 0.875rem;
}
.delegate-principals__item .delegate-principals__date {
  font-size: 0.75rem;
  color: var(--color-gray-060);
  margin-left: auto;
  padding-left: 0.5rem;
  flex-shrink: 0;
  white-space: nowrap;
}

/*
 * @file layout/_content.scss
 * @description content에서 사용되는 scss
 * @version 1.0
 */
.list .pinned {
  background-color: var(--color-blue-005) !important;
}

.field .field__label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--label-color);
  line-height: 1.3;
}
.field .date-picker {
  width: 100%;
}

.detail__label {
  color: var(--detail-label-color);
}

.detail__form .field .field__label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0.75rem 0 0.25rem 0;
}

.title-horizontal-bar {
  margin-top: 0.5rem;
  margin-bottom: 1.25rem;
}
.title-horizontal-bar .horizontal-bar {
  height: 0.125rem;
  margin: 0 0;
  background-color: var(--h-bar-color-3);
}

.title-vertical-bar .vertical-bar {
  width: 0rem;
  min-height: 1rem;
  margin: 0 0.5rem;
  border-right: 0.0625rem solid var(--h-bar-color-2);
  vertical-align: middle;
}

.modal__dialog--user .modal__dialog__header {
  font-size: 1rem;
  border-bottom: none !important;
}
.modal__dialog--user .modal__dialog__header.modal__title {
  line-height: 1.5;
}
.modal__dialog--user .modal__dialog__body {
  padding: 0.75rem 1rem;
}
.modal__dialog--user .modal__dialog__body .user__info .user-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}
.modal__dialog--user .modal__dialog__body .user__info .user-position {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--desc-color);
  align-content: center;
}
.modal__dialog--user .modal__dialog__body .user__info .user-organization {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--sub-color);
  margin-top: 0.375rem;
}
.modal__dialog--user .modal__dialog__footer {
  border: none !important;
}

.user__info .flex__row,
.user__info .flex__column {
  min-width: 0;
}
.user__info .user-name {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.user__info .user-organization {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user__info .field .field__label {
  flex-shrink: 0;
}
.user__info .field .text__ellipsis {
  min-width: 0;
}

.organization__info-value {
  max-width: 60%;
}

.component__preview {
  overflow-y: auto;
  height: 100%;
  margin: 0 0.75rem 0.75rem 0.75rem;
}

.dashboard {
  position: relative;
  height: 100%;
}
.dashboard__buttons {
  width: 100%;
}
.dashboard__buttons .title {
  flex: 1;
  justify-content: center;
}
.dashboard__buttons .save-info {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}
.dashboard__buttons .save-info__time {
  font-size: 0.75rem;
  color: var(--color-gray-050);
}

.preview__image {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
}

.i-profile-photo {
  border-radius: 50%;
  background-color: transparent;
}

.document__box {
  position: relative;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.188rem;
  background-color: var(--color-gray-000);
  overflow-x: hidden;
}
.document__box .document__btn {
  color: var(--color-gray-000) !important;
}
.document__box a:hover {
  background: var(--color-gray-003);
}
.document__box a:hover .document__btn {
  display: block;
}
.document__box__section {
  gap: 0.5rem;
  padding: 0.75rem;
}
.document__box__section .document__color {
  border-radius: 0.25rem;
  width: 2rem;
  height: 0.313rem;
  margin: 0;
}
.document__box__section .document__color.moving {
  animation-delay: 0s;
  animation-duration: 0.1s;
  animation-name: moving;
  animation-timing-function: ease-in-out forward;
  animation-iteration-count: 1;
  animation-direction: normal;
}
.document__box__section .document__content {
  flex: 1;
  gap: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 0.75rem;
}
.document__box__section .document__content__header {
  gap: 0.25rem;
}
.document__box__section .document__content__header .document__title {
  color: var(--color-gray-110);
  font-weight: 700;
  line-height: 130%;
}
.document__box__section .document__content__header .document__no {
  color: var(--color-gray-050);
  font-weight: 400;
  line-height: 130%;
}
.document__box__section .document__content__info {
  color: var(--color-gray-070);
  font-weight: 400;
  line-height: 130%;
  cursor: pointer;
  gap: 0.5rem;
}
.document__box__section .document__content__info .vertical-bar {
  width: 0.063rem;
  min-height: 1rem;
  margin: 0;
  border-right: 0.0625rem solid var(--color-gray-030);
  vertical-align: middle;
}
.document__box__section .document__content__info .vertical-bar {
  height: 1rem;
  align-self: center;
}
.document__box .document__btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: none;
}

.activity__box {
  position: relative;
  overflow-x: hidden;
}
.activity__box__section {
  padding: 0.75rem;
  line-height: 1.3;
}

.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__img, .document-group-container .document-content .document__group .group__img {
  border-bottom: 0.0625rem solid var(--color-gray-010);
  display: inline-flex;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0;
  margin: 0;
}

.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__title .group__label, .document-group-container .document-content .document__group .group__title .group__label {
  display: inline-flex;
  flex-direction: row;
  width: 100%;
}

.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__title .group__label--badge, .document-group-container .document-content .document__group .group__title .group__label--badge {
  border-radius: 6.188rem;
  background-color: var(--color-gray-010);
  text-align: center;
  line-height: 130%;
}

.document-group-container {
  display: flex;
  width: 100%;
  height: calc(100vh - 2.5rem - 3rem - 3.137rem - 1.5rem);
  overflow: auto;
}
.document-group-container:has(.searched__list) {
  overflow: hidden;
}
.document-group-container .document-content {
  --document-empty-text-color: var(--color-gray-070);
  width: 100%;
  min-width: 85.75rem;
  min-height: 46.25rem;
  display: flex;
  justify-content: center;
  align-content: center;
  grid-template-columns: none;
  padding: 0.75rem;
  overflow: hidden;
}
.document-group-container .document-content:has(.searched__list) {
  display: flex;
  flex-direction: column;
  justify-content: unset;
  align-items: center;
  gap: 0;
  min-height: unset;
}
.document-group-container .document-content.document__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.document-group-container .document-content.document__empty .empty__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--document-empty-text-color);
  line-height: 1.3;
}
.document-group-container .document-content.document__empty .empty__subtitle {
  color: var(--document-empty-text-color);
}
.document-group-container .document-content.document__empty .document__group--l.add__document {
  width: 450px;
  height: 450px;
}
.document-group-container .document-content.cols-1 {
  display: grid;
  grid-template-columns: repeat(1, 28.125rem);
  gap: 1.25rem;
}
.document-group-container .document-content.cols-2 {
  display: grid;
  grid-template-columns: repeat(2, 23.75rem);
  gap: 1.25rem;
}
.document-group-container .document-content.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 23.75rem);
  gap: 1.25rem;
}
.document-group-container .document-content.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 19.125rem);
  gap: 1.25rem;
}
.document-group-container .document-content.cols-5 {
  display: grid;
  grid-template-columns: repeat(5, 19.125rem);
  gap: 1.25rem;
}
.document-group-container .document-content.cols-6 {
  display: grid;
  grid-template-columns: repeat(3, 16.25rem);
  gap: 0.75rem;
}
.document-group-container .document-content.cols-7 {
  display: grid;
  grid-template-columns: repeat(4, 16.25rem);
  gap: 0.75rem;
}
.document-group-container .document-content.cols-8 {
  display: grid;
  grid-template-columns: repeat(4, 16.25rem);
  gap: 0.75rem;
}
.document-group-container .document-content.cols-9 {
  display: grid;
  grid-template-columns: repeat(5, 16.25rem);
  gap: 0.75rem;
}
.document-group-container .document-content.cols-10 {
  display: grid;
  grid-template-columns: repeat(5, 16.25rem);
  gap: 0.75rem;
}
.document-group-container .document-content .document__group {
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.375rem;
  position: relative;
  overflow: hidden;
}
.document-group-container .document-content .document__group:hover {
  cursor: pointer;
  background-color: var(--bg-color-hover);
  outline: 0.375rem solid var(--bg-color-hover);
}
.document-group-container .document-content .document__group .group__title {
  display: inline-block;
  width: 100%;
}
.document-group-container .document-content .document__group .group__title .group__label--text {
  max-width: calc(100% - 3.125rem);
  font-weight: 700;
  color: var(--color-gray-090);
}
.document-group-container .document-content .document__group .group__desc {
  width: 100%;
  color: var(--color-gray-050);
}
.document-group-container .document-content .document__group [class*=btn__ic] {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}
.document-group-container .document-content .document__group.add__document {
  border: 0.125rem dashed var(--color-gray-010);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.document-group-container .document-content .document__group.add__document .add__icon {
  cursor: pointer;
}
.document-group-container .document-content .document__group.add__document .add__title {
  color: var(--color-blue-050);
  cursor: pointer;
}
.document-group-container .document-content .document__group.document__group--xl {
  width: 28.125rem;
  height: 37.688rem;
}
.document-group-container .document-content .document__group.document__group--xl .group__img {
  width: 28.125rem;
  height: 28.125rem;
}
.document-group-container .document-content .document__group.document__group--xl .group__title {
  padding-top: 1.25rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--xl .group__title .group__label--badge {
  width: 1.875rem;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.188rem 0.625rem;
}
.document-group-container .document-content .document__group.document__group--xl .group__title .group__label--text {
  font-size: 1.5rem;
}
.document-group-container .document-content .document__group.document__group--xl .group__desc {
  font-size: 0.875rem;
  padding-top: 0.75rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--xl.add__document .add__icon .ic-document-add {
  width: 3.75rem;
  height: 3.75rem;
}
.document-group-container .document-content .document__group.document__group--xl.add__document .add__title {
  font-size: 1rem;
  font-weight: 700;
}
.document-group-container .document-content .document__group.document__group--l {
  width: 23.75rem;
  height: 32.688rem;
}
.document-group-container .document-content .document__group.document__group--l .group__img {
  width: 23.75rem;
  height: 23.75rem;
}
.document-group-container .document-content .document__group.document__group--l .group__title {
  padding-top: 1.25rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--l .group__title .group__label--badge {
  width: 1.875rem;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.188rem 0.625rem;
}
.document-group-container .document-content .document__group.document__group--l .group__title .group__label--text {
  font-size: 1.5rem;
}
.document-group-container .document-content .document__group.document__group--l .group__desc {
  font-size: 0.875rem;
  padding-top: 0.75rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--l.add__document .add__icon .ic-document-add {
  width: 3.75rem;
  height: 3.75rem;
}
.document-group-container .document-content .document__group.document__group--l.add__document .add__title {
  font-size: 1rem;
  font-weight: 700;
}
.document-group-container .document-content .document__group.document__group--m {
  width: 19.125rem;
  height: 26.875rem;
}
.document-group-container .document-content .document__group.document__group--m .group__img {
  width: 19.125rem;
  height: 19.125rem;
}
.document-group-container .document-content .document__group.document__group--m .group__title {
  padding-top: 1.25rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--m .group__title .group__label--badge {
  width: 1.875rem;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.188rem 0.625rem;
}
.document-group-container .document-content .document__group.document__group--m .group__title .group__label--text {
  font-size: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--m .group__desc {
  font-size: 0.75rem;
  padding-top: 0.5rem;
  padding-left: 1.25rem;
}
.document-group-container .document-content .document__group.document__group--m.add__document .add__icon .ic-document-add {
  width: 3.75rem;
  height: 3.75rem;
}
.document-group-container .document-content .document__group.document__group--m.add__document .add__title {
  font-size: 0.875rem;
  font-weight: 400;
}
.document-group-container .document-content .document__group.document__group--s {
  width: 16.25rem;
  height: 22.5rem;
}
.document-group-container .document-content .document__group.document__group--s .group__img {
  width: 16.25rem;
  height: 16.25rem;
}
.document-group-container .document-content .document__group.document__group--s .group__title {
  padding-top: 0.75rem;
  padding-left: 0.75rem;
}
.document-group-container .document-content .document__group.document__group--s .group__title .group__label--badge {
  width: 1.75rem;
  height: 1.25rem;
  font-size: 0.75rem;
  padding: 0.125rem 0.375rem;
}
.document-group-container .document-content .document__group.document__group--s .group__title .group__label--text {
  font-size: 1rem;
}
.document-group-container .document-content .document__group.document__group--s .group__desc {
  font-size: 0.75rem;
  padding-top: 0.5rem;
  padding-left: 0.75rem;
}
.document-group-container .document-content .document__group.document__group--s.add__document .add__icon .ic-document-add {
  width: 3.125rem;
  height: 3.125rem;
}
.document-group-container .document-content .document__group.document__group--s.add__document .add__title {
  font-size: 0.875rem;
  font-weight: 400;
}
.document-group-container .document-content .searched__list {
  border-top: 0.063rem solid var(--color-gray-010);
  border-bottom: 0.063rem solid var(--color-gray-010);
  width: 75rem;
  display: inline-block;
  background-color: var(--color-gray-003);
  overflow-y: auto;
}
.document-group-container .document-content .searched__list__result-tabs {
  width: 75rem;
}
.document-group-container .document-content .searched__list__result-tabs .tab h5 {
  pointer-events: none;
  color: var(--color-gray-070);
  font-size: 0.875rem;
  font-weight: 400;
}
.document-group-container .document-content .searched__list__result-tabs .tab.active h5 {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gray-090);
}
.document-group-container .document-content .searched__list__result-tabs .tab.active h5 .number {
  color: var(--color-blue-050);
}
.document-group-container .document-content .searched__list__result-title {
  width: 75rem;
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1.25rem 0;
}
.document-group-container .document-content .searched__list__result-title .number {
  color: var(--color-blue-050);
}
.document-group-container .document-content .searched__list__result-group {
  border-bottom: 0.063rem solid var(--color-gray-010);
  margin: 1.25rem;
}
.document-group-container .document-content .searched__list__result-group:last-child {
  border: none;
  margin-bottom: 0;
}
.document-group-container .document-content .searched__list__result-group__title {
  font-size: 1rem;
  font-weight: 700;
  padding-bottom: 0.75rem;
}
.document-group-container .document-content .searched__list__result-group__title .number {
  color: var(--color-blue-050);
}
.document-group-container .document-content .searched__list__result-group__item {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  font-size: 0.875rem;
  padding-bottom: 1.25rem;
}
.document-group-container .document-content .searched__list__result-group__item--title {
  display: inline-block;
  color: var(--color-gray-090);
  cursor: pointer;
  padding-bottom: 0.5rem;
}
.document-group-container .document-content .searched__list__result-group__item--title span:not(.keyword) {
  padding: 0.188rem 0.5rem;
}
.document-group-container .document-content .searched__list__result-group__item--desc {
  display: inline-block;
  width: 100%;
  cursor: inherit;
  color: var(--color-gray-070);
  font-style: italic;
  margin-left: 0.75rem;
  margin-top: 0.5rem;
  padding-left: 0.5rem;
  border-left: 0.125rem solid var(--color-gray-010);
}
.document-group-container .document-content .searched__list__result-group__item .keyword {
  background-color: var(--color-blue-010);
  color: var(--color-blue-050);
}
.document-group-container .document-content .searched__list.empty__list {
  height: 10.625rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}
.document-group-container .document-content .searched__list.empty__list .empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
.document-group-container .document-content .searched__list.empty__list .empty__icon .ic-search--l {
  background-color: var(--color-gray-090);
}
.document-group-container .document-content .searched__list.empty__list .empty__title {
  color: var(--color-gray-090);
  font-weight: 700;
  font-size: 1.25rem;
}
.document-group-container .document-content .searched__list.empty__list .empty__sub-title {
  color: var(--color-gray-050);
  font-size: 0.875rem;
}

.modal__dialog__body:has(.document-group-box) {
  padding: 0 !important;
}
.modal__dialog__body:has(.document-group-box) .document-group-box {
  --box-empty-text-color: var(--color-gray-070);
  width: 100%;
  height: 37.75rem;
  display: flex;
  overflow: hidden;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card {
  width: 28.125rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__img {
  width: 28.125rem;
  height: 28.125rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__title {
  padding-top: 1.25rem;
  padding-left: 1.25rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__title .group__label--badge {
  width: 1.875rem;
  height: 1.5rem;
  font-size: 0.875rem;
  padding: 0.188rem 0.625rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__title .group__label--text {
  max-width: 23.438rem;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-gray-090);
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-group-card .group__desc {
  font-size: 0.875rem;
  color: var(--color-gray-050);
  padding-top: 0.75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list {
  border-left: 0.0625rem solid var(--color-gray-010);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
  padding: 1.25rem 0 0 1.25rem;
  gap: 0.75rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card {
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.375rem;
  display: inline-block;
  width: 21.875rem;
  height: 11.25rem;
  padding: 1.25rem;
  background: var(--color-gray-003);
  cursor: pointer;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card:hover, .modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card:focus {
  background: var(--color-blue-000);
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card:active {
  background: var(--color-blue-005);
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--color {
  display: flex;
  align-items: center;
  width: 19.375rem;
  height: 0.313rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--color span {
  border-radius: 0.188rem;
  display: inline-block;
  width: 2rem;
  height: 0.313rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--title {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  width: 19.375rem;
  height: 1.625rem;
  margin: 0.5rem 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-090);
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--desc {
  width: 19.375rem;
  height: 3.375rem;
  line-height: 1.125rem;
  font-size: 0.875rem;
  color: var(--color-gray-050);
  margin-bottom: 0.5rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--dt {
  border-top: 0.0625rem solid var(--color-gray-010);
  display: inline-flex;
  align-items: center;
  width: 19.375rem;
  font-size: 0.75rem;
  color: var(--color-gray-050);
  padding-top: 0.5rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__card--dt span.ic-time-picker {
  background-color: var(--color-gray-050);
  margin-right: 0.25rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 21.938rem;
  height: 35.188rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__empty .empty__icon .ic-no-document {
  width: 7.5rem;
  height: 7.5rem;
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__empty .empty__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--box-empty-text-color);
}
.modal__dialog__body:has(.document-group-box) .document-group-box .document-card-list .document__empty .empty__subtitle {
  color: var(--box-empty-text-color);
}

.chart-content-view .chart-content-title {
  color: var(--color-gray-080);
  font-size: 1.25rem;
  font-weight: 700;
}

.asset-content .asset-list .asset-row {
  margin: 0.5rem;
  line-height: 1.6;
}
.asset-content .asset-list .no-data {
  margin: 0.5rem 0 0 0;
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.25rem;
  height: 3.75rem;
  justify-content: center;
  align-items: center;
  color: var(--color-gray-090);
}

.document-transfer-content .document-transfer-list {
  height: 21.5rem;
  overflow-y: auto;
}
.document-transfer-content .document-transfer-list .no-data {
  margin: 0.5rem 0 0 0;
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.25rem;
  height: 3.75rem;
  justify-content: center;
  align-items: center;
  color: var(--color-gray-090);
}

.user-vld-list .grid--noData .grid__cell {
  font-size: 0.875rem !important;
}
.user-vld-list .grid--noData .grid__cell .ic-no-data {
  mask-size: 6rem;
}

.zql-manual__wrapper {
  height: 42.5rem;
  overflow-y: auto;
}
.zql-manual__wrapper .zql-manual {
  font-size: 0.75rem;
  color: var(--color-gray-060);
  line-height: 1.2;
  padding: 0 1.25rem;
  /* -------------------------
     Code / Pre
     ------------------------- */
  /* inline code */
  /* -------------------------
     List (ul / li)
     ------------------------- */
}
.zql-manual__wrapper .zql-manual h4 {
  font-weight: 700;
  padding-top: 1.25rem;
  padding-bottom: 0.625rem;
}
.zql-manual__wrapper .zql-manual h4:not(:last-child) {
  border-bottom: 0.0625rem solid var(--color-gray-030);
}
.zql-manual__wrapper .zql-manual h5 {
  font-weight: 700;
  padding: 0.75rem 0;
}
.zql-manual__wrapper .zql-manual strong {
  font-weight: 600;
  color: var(--color-gray-090);
}
.zql-manual__wrapper .zql-manual .table {
  table-layout: fixed !important;
  width: 100%;
}
.zql-manual__wrapper .zql-manual .table th, .zql-manual__wrapper .zql-manual .table td {
  font-size: 0.75rem;
}
.zql-manual__wrapper .zql-manual .table td {
  white-space: normal !important;
  word-break: break-all;
}
.zql-manual__wrapper .zql-manual .table td code {
  line-height: 1.5;
}
.zql-manual__wrapper .zql-manual .table th:nth-child(1),
.zql-manual__wrapper .zql-manual .table td:nth-child(1) {
  width: 25%;
}
.zql-manual__wrapper .zql-manual .table th:nth-child(2),
.zql-manual__wrapper .zql-manual .table td:nth-child(2) {
  width: 25%;
}
.zql-manual__wrapper .zql-manual .table th:nth-child(3),
.zql-manual__wrapper .zql-manual .table td:nth-child(3) {
  width: 50%;
}
.zql-manual__wrapper .zql-manual .table.table--two-column th:nth-child(1),
.zql-manual__wrapper .zql-manual .table.table--two-column td:nth-child(1) {
  width: 30%;
}
.zql-manual__wrapper .zql-manual .table.table--two-column th:nth-child(2),
.zql-manual__wrapper .zql-manual .table.table--two-column td:nth-child(2) {
  width: 70%;
}
.zql-manual__wrapper .zql-manual pre {
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.375rem;
  background-color: var(--color-gray-005);
  padding: 0.75rem 0.875rem;
  overflow-x: auto;
  margin-bottom: 0.75rem;
}
.zql-manual__wrapper .zql-manual pre code {
  font-family: Consolas, Monaco, "Courier New", monospace;
  color: var(--color-gray-070);
  font-size: 0.75rem;
  line-height: 1.5;
}
.zql-manual__wrapper .zql-manual p code,
.zql-manual__wrapper .zql-manual li code {
  border-radius: 0.25rem;
  background-color: var(--color-gray-005);
  padding: 0.125rem 0.375rem;
}
.zql-manual__wrapper .zql-manual ul {
  padding-left: 1.25rem;
  margin: 0.625rem 0 1rem;
}
.zql-manual__wrapper .zql-manual ul li {
  margin-bottom: 0.375rem;
}

/*
 * @file layout/_configuration.scss
 * @description 관리자 > 환경설정 > 설정 정보 화면 전용 스타일
 * @version 1.0
 */
.config-card {
  background-color: var(--skeleton-bg-color);
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.375rem;
}
.config-card .config-card-checkbox__text {
  display: block;
  max-width: 7rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.config-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.25rem;
  background-color: var(--item-box-bg-color);
  border-bottom: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.375rem 0.375rem 0 0;
}
.config-card__header .field__label {
  margin: 0 !important;
}
.config-card__body {
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.login-preview {
  display: flex;
  width: 44rem;
  height: 31.25rem;
  border: 1px solid var(--color-gray-020);
  border-radius: 0.188rem;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 0.75rem;
}
.login-preview__left {
  flex: 0 0 55%;
  background-color: var(--color-gray-010);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-preview__illustration {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.login-preview__right {
  flex: 1;
  background: var(--color-gray-000);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3.125rem;
  gap: 1rem;
  border-left: 1px solid var(--color-gray-010);
}
.login-preview__right--default {
  background: #FFFFFF;
}
.login-preview__right--dark {
  background: #0D0E14;
}
.login-preview__tenant-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.login-preview__logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
.login-preview__form-area {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.login-preview__input {
  height: 1rem;
  background: var(--color-gray-015);
  border-radius: 3px;
  flex-shrink: 0;
}
.login-preview__btn {
  height: 1.25rem;
  background: var(--color-blue-050);
  border-radius: 3px;
  flex-shrink: 0;
  margin-top: 0.25rem;
}
.login-preview__badge {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-blue-050);
  color: var(--color-gray-000);
  font-size: 0.625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  line-height: 1;
}

.login-image-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.313rem;
}
.login-image-row__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--color-blue-050);
  color: var(--color-gray-000);
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1;
}
.login-image-row__label {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.login-image-row__buttons {
  display: flex;
  gap: 0.375rem;
}

.brand-image-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.brand-image-card {
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--color-gray-000);
}
.brand-image-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7rem;
  padding: 1.5rem;
  background-color: var(--color-gray-003);
  background-image: linear-gradient(45deg, var(--color-gray-010) 25%, transparent 25%), linear-gradient(-45deg, var(--color-gray-010) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-gray-010) 75%), linear-gradient(-45deg, transparent 75%, var(--color-gray-010) 75%);
  background-size: 0.75rem 0.75rem;
  background-position: 0 0, 0 0.375rem, 0.375rem -0.375rem, -0.375rem 0;
}
.brand-image-card__preview--default {
  background-color: #F5F7F9;
  background-image: linear-gradient(45deg, #DFE2EC 25%, transparent 25%), linear-gradient(-45deg, #DFE2EC 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #DFE2EC 75%), linear-gradient(-45deg, transparent 75%, #DFE2EC 75%);
}
.brand-image-card__preview--dark {
  background-color: #101219;
  background-image: linear-gradient(45deg, #1B1E2A 25%, transparent 25%), linear-gradient(-45deg, #1B1E2A 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #1B1E2A 75%), linear-gradient(-45deg, transparent 75%, #1B1E2A 75%);
}
.brand-image-card__img {
  display: block;
  max-height: 3.5rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.brand-image-card__footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  border-top: 0.0625rem solid var(--color-gray-015);
}
.brand-image-card__label {
  display: inline-flex;
  align-items: center;
  width: 100%;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-gray-090);
}
.brand-image-card__actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.icon-mgmt {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.icon-mgmt__section {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.icon-mgmt__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.5rem;
  border-bottom: 0.0625rem solid var(--color-gray-015);
}
.icon-mgmt__folder-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-gray-080);
}
.icon-mgmt__toolbar {
  display: flex;
  align-items: center;
}
.icon-mgmt__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: 0.625rem;
  max-height: 15.875rem;
  overflow-y: auto;
  padding-right: 0.25rem;
  padding-bottom: 0.25rem;
  scrollbar-width: none;
}
.icon-mgmt__grid::-webkit-scrollbar {
  display: none;
}
.icon-mgmt__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
  color: var(--color-gray-050);
  font-size: 0.875rem;
}

.icon-card {
  display: flex;
  flex-direction: column;
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.375rem;
  overflow: hidden;
  background: var(--color-gray-000);
}
.icon-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  background-color: var(--color-gray-003);
  background-image: linear-gradient(45deg, var(--color-gray-010) 25%, transparent 25%), linear-gradient(-45deg, var(--color-gray-010) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--color-gray-010) 75%), linear-gradient(-45deg, transparent 75%, var(--color-gray-010) 75%);
  background-size: 0.75rem 0.75rem;
  background-position: 0 0, 0 0.375rem, 0.375rem -0.375rem, -0.375rem 0;
}
.icon-card__img {
  display: block;
  max-height: 3rem;
  max-width: 80%;
  object-fit: contain;
}
.icon-card__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-top: 0.0625rem solid var(--color-gray-015);
}
.icon-card__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.625rem;
  color: var(--color-gray-070);
}

.config-global__notice {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  background-color: var(--color-blue-005);
  color: var(--color-blue-050);
  border: 0.0625rem solid var(--color-blue-015);
  border-radius: 0.563rem;
  line-height: 1.4;
}
.config-global__notice [class*=ic-] {
  flex-shrink: 0;
  background: var(--color-blue-050);
}

.config-choice-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.config-choice-cards .card-checkbox__item.config-choice-card {
  grid-template-columns: 1.25rem auto 1fr;
  height: auto;
  min-height: 4.75rem;
}
.config-choice-cards .config-choice-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  background: var(--color-blue-005);
  flex-shrink: 0;
}
.config-choice-cards .config-choice-card__icon [class*=ic-] {
  background: var(--color-blue-050);
}
.config-choice-cards .config-choice-card__img {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}
.config-choice-cards .config-choice-card.selected .config-choice-card__icon {
  background: var(--color-blue-015);
}

.config-role-cards {
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}
.config-role-cards .card-checkbox__item {
  column-gap: 0.5rem;
}

.config-selected-count {
  color: var(--color-gray-070);
  font-size: 0.75rem;
}

.config-type-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.config-type-tabs::-webkit-scrollbar {
  display: none;
}
.config-type-tabs .tab {
  min-width: auto;
  padding: 0.625rem 0.75rem;
  flex-shrink: 0;
  border-radius: 0;
}
.config-type-tabs .tab:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.config-type-tabs .config-type-tabs__count {
  display: inline-block;
  min-width: 1.25rem;
  margin-left: 0.375rem;
  padding: 0 0.375rem;
  border-radius: 0.625rem;
  background: var(--color-gray-010);
  color: var(--color-gray-070);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.25rem;
  vertical-align: middle;
}
.config-type-tabs .tab.active .config-type-tabs__count {
  background: var(--color-blue-015);
  color: var(--color-blue-050);
}

/*
 * @file layout/_cacheManagement.scss
 * @description 관리자 기능 > 운영 관리 > 캐시 관리 화면 전용 스타일
 * @version 1.0
 */
.cache-state--loaded, .cache-state--empty {
  display: inline-flex;
  align-items: center;
  user-select: none;
  white-space: nowrap;
  height: 1.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  border-radius: 62.4375rem;
}
.cache-state--loaded {
  background-color: #E3F9E5;
  color: var(--color-gray-090);
}
.cache-state--empty {
  background-color: var(--color-gray-010);
  color: var(--color-gray-070);
}

/*
 * @file layout/_encryption.scss
 * @description 관리자 기능 > 유틸리티 > 암호화 관리 화면 전용 스타일
 * @version 1.0
 */
.encryption-tabs .tab {
  min-width: auto;
  padding: 0.625rem 0.75rem;
  flex-shrink: 0;
  border-radius: 0;
}

.encryption__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.encryption__result {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: 0.6875rem 0.75rem;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--color-gray-090);
  background-color: var(--color-gray-003);
  word-break: break-all;
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.1875rem;
}
.encryption__result--empty {
  font-family: "Noto Sans", "맑은고딕", "Malgun Gothic", dotum, gulim, sans-serif;
  color: var(--color-gray-050);
}
.encryption__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  color: var(--color-gray-080);
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.25rem;
}
.encryption__notice.none {
  display: none;
}
.encryption__notice [class*=ic-] {
  flex: none;
  margin-top: 0.125rem;
  background: var(--color-gray-060);
}

/*
 * @file layout/_scheduler.scss
 * @description 스케줄러 등록/수정 화면
 * @version 1.0
 */
.scheduler__notice {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-gray-080);
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.25rem;
}
.scheduler__notice > [class*=ic-] {
  flex: none;
  margin-top: 0.125rem;
  background: var(--color-gray-060);
}
.scheduler__notice__body {
  flex: 1;
  min-width: 0;
}
.scheduler__notice__summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.scheduler__notice__toggle {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.75rem;
  color: var(--color-blue-050);
  cursor: pointer;
  text-decoration: underline;
}
.scheduler__notice__detail {
  margin-top: 0.25rem;
}
.scheduler__notice__common {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.75rem;
  color: var(--color-gray-060);
}
.scheduler__cycle {
  padding: 0.75rem;
  background-color: var(--color-gray-003);
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.25rem;
}
.scheduler__cycle__row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.scheduler__cycle__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.scheduler__cycle__field .field__label {
  margin: 0 0 0.25rem 0;
  font-size: 0.75rem;
  color: var(--color-gray-070);
}
.scheduler__cycle__suffix {
  display: flex;
  align-items: center;
  min-height: 1.875rem;
  font-size: 0.875rem;
  color: var(--color-gray-080);
  white-space: nowrap;
}
.scheduler__cycle__preview {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  font-size: 0.875rem;
  color: var(--color-blue-060);
  border-top: 0.0625rem solid var(--color-gray-015);
}
.scheduler__cycle__preview > [class*=ic-] {
  flex: none;
  margin-top: 0.125rem;
  background: var(--color-blue-050);
}
.scheduler__cycle__preview.is-empty {
  color: var(--color-gray-060);
}
.scheduler__cycle__preview.is-empty > [class*=ic-] {
  background: var(--color-gray-050);
}

/*
 * @file layout/_designer.scss
 * @description formDesigner + process 공통으로 사용되는 scss
 * @version 1.0
 */
:root {
  --data-column: 16;
  --data-row: 2;
  --data-align: flex-start;
}

.header__designer {
  background-color: #2B2F42;
  color: #FFFFFF;
}
.header__designer .btn__ic {
  background-color: transparent;
  color: #237CFF;
}
.header__designer .btn__ic [class*=ic-] {
  background: #237CFF;
  pointer-events: none;
}
.header__designer .btn__ic:hover {
  background-color: #3B4158;
  color: #237CFF;
}
.header__designer .btn__ic:hover [class*=ic-] {
  background: #237CFF;
}
.header__designer .btn__ic:focus {
  background-color: #1C1E2B;
  color: #003FEB;
}
.header__designer .btn__ic:focus [class*=ic-] {
  background: #003FEB;
}
.header__designer .btn__ic:enabled:active, .header__designer .btn__ic:enabled.active, .header__designer .btn__ic.active {
  background-color: #1C1E2B;
  color: #003FEB;
}
.header__designer .btn__ic:enabled:active [class*=ic-], .header__designer .btn__ic:enabled.active [class*=ic-], .header__designer .btn__ic.active [class*=ic-] {
  background: #003FEB;
  opacity: 0.7;
}
.header__designer .btn__ic:disabled, .header__designer .btn__ic.disabled {
  background-color: transparent;
  color: #A4ACC4;
}
.header__designer .btn__ic:disabled [class*=ic-], .header__designer .btn__ic.disabled [class*=ic-] {
  background: #A4ACC4;
}
.header__designer .context-menu__content {
  border: 0.0625rem solid #1C1E2B;
  background-color: #1C1E2B;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__] {
  border-color: #1C1E2B;
  background-color: #1C1E2B;
  color: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__] [class*=ic-] {
  background: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:hover {
  border-color: #2B2F42;
  background-color: #2B2F42;
  color: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:hover [class*=ic-] {
  background: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:focus {
  border-color: #2B2F42;
  background-color: #2B2F42;
  color: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:focus [class*=ic-] {
  background: #A4ACC4;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:enabled:active, .header__designer .context-menu__content .context-menu__item > [class*=btn__]:enabled.active {
  border-color: #1C1E2B;
  background-color: #1C1E2B;
  color: #4D536F;
}
.header__designer .context-menu__content .context-menu__item > [class*=btn__]:enabled:active [class*=ic-], .header__designer .context-menu__content .context-menu__item > [class*=btn__]:enabled.active [class*=ic-] {
  background: #4D536F;
}

.component__property {
  position: relative;
  padding: 0.75rem;
  overflow: hidden;
}

.group__property {
  margin-bottom: 1.25rem;
}
.group__property:last-of-type {
  margin-bottom: 0;
}

.label__property {
  width: 100%;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-gray-090);
  border-bottom: 0.0625rem solid var(--color-gray-010);
  margin: 0.75rem 0 0.25rem 0;
  padding: 0 0 0.75rem 0;
}

.property {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex-basis: calc((100% - (0.25rem * 15)) / 16
          * var(--data-column, 16)
          + (var(--data-column) - 1) * 0.25rem);
  margin: 0.5rem 0 0 0;
}
.property .property__label {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 1.5rem;
  font-size: 0.75rem;
  font-weight: 500;
}
.property .clipboard {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.property .clipboard input[type=text] {
  width: 100%;
}
.property .box-model__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 0.125rem;
}
.property .box-model__cell .box-model__dir {
  background-color: var(--icon-color, var(--color-gray-040));
  opacity: 0.55;
}
.property .box-model__cell > div {
  width: 100%;
}
.property .box-model__cell input[type=text] {
  width: 100%;
}
.property .default-type-radio {
  position: relative;
  display: block;
}
.property .default-type-radio .radio-property-group {
  width: 100%;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.25rem 0;
}
.property .default-type-radio .radio-property-group .radio-item input[type=text], .property .default-type-radio .radio-property-group .radio-item input[type=password], .property .default-type-radio .radio-property-group .radio-item input[type=number] {
  width: 2.813rem;
  margin-right: 0.3125rem;
  padding: 0 0.5rem;
}
.property .default-type-radio .radio-property-group .radio-item input[type=text]:not(:first-child), .property .default-type-radio .radio-property-group .radio-item input[type=password]:not(:first-child), .property .default-type-radio .radio-property-group .radio-item input[type=number]:not(:first-child) {
  margin-left: 0.3125rem;
}
.property .default-type-radio .radio-property-group .date-picker {
  flex: 1;
}
.property .default-type-radio .radio-property-group .date-picker .date-picker__input {
  width: inherit;
}

.property-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}
.property-group:first-child {
  padding-top: 0;
}
.property-group:last-child {
  padding-bottom: 0;
}
.property-group:not(:last-child) {
  border-bottom: 0.0625rem solid var(--color-gray-030);
}
.property-group .date-picker {
  width: 100%;
}

/* 폼 디자이너 & 프로세스 팝업 layout
 * 디자인 테마 고정
 * wrapper - header__designer : 상단
 *         - container__process, container__form : 메인 영역
 *           - palette__layer
 *             > palette__element : 엘리먼트 팔레트
 *             > palette__component : 컴포넌트 팔레트
 *
 *           - process__layer : 프로세스 메인
 *           - form__layer : 폼 메인
 *               - drawing-board : 실제 컴포넌트 &엘리먼트들이 그려지는 영역
 *
 *           - property__layer
 *             - panel : 세부속성
 */
.palette__layer {
  position: fixed;
  top: 2.5rem;
  bottom: 0;
  left: 0;
  border-right: 0.0625rem solid var(--color-gray-030);
  overflow: hidden;
  background-color: var(--color-gray-000);
}

.process-preview {
  width: 100%;
  min-height: 25rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.5rem;
  overflow: hidden;
  background-color: var(--color-gray-003);
}
.process-preview__frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.process-preview__map {
  position: relative;
  width: 100%;
}
.process-preview__img {
  display: block;
  width: 100%;
}
.process-preview__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.process-preview__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  color: var(--color-gray-050);
  font-size: 0.8125rem;
  pointer-events: none;
}
.process-preview__placeholder [class*=ic-] {
  display: inline-block;
  width: 3rem;
  height: 3rem;
  opacity: 0.4;
}
.process-preview__placeholder.is-hidden {
  display: none;
}

#mappingTbl tbody tr.is-selected {
  background-color: var(--color-blue-000);
}

.palette__element {
  width: 3.5rem;
}
.palette__element.hide {
  width: 0;
}
.palette__element .element-icon [class*=ic-] {
  width: 2rem;
  height: 2rem;
  -webkit-mask-size: 2rem;
  mask-size: 2rem;
}
.palette__element .element-icon.shape.event:not(.placeholder) [class*=ic-], .palette__element .element-icon.shape.event:not(.placeholder):hover [class*=ic-], .palette__element .element-icon.shape.event:not(.placeholder).active [class*=ic-] {
  background: #F763C1;
}
.palette__element .element-icon.shape.task:not(.placeholder) [class*=ic-], .palette__element .element-icon.shape.task:not(.placeholder):hover [class*=ic-], .palette__element .element-icon.shape.task:not(.placeholder).active [class*=ic-] {
  background: #47D1DE;
}
.palette__element .element-icon.shape.callActivity:not(.placeholder) [class*=ic-], .palette__element .element-icon.shape.callActivity:not(.placeholder):hover [class*=ic-], .palette__element .element-icon.shape.callActivity:not(.placeholder).active [class*=ic-] {
  background: #A95EEB;
}
.palette__element .element-icon.shape.gateway:not(.placeholder) [class*=ic-], .palette__element .element-icon.shape.gateway:not(.placeholder):hover [class*=ic-], .palette__element .element-icon.shape.gateway:not(.placeholder).active [class*=ic-] {
  background: #FFAC47;
}
.palette__element .element-icon.shape.group {
  margin-top: 0.75rem;
  position: relative;
}
.palette__element .element-icon.shape.group::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  height: 0.0625rem;
  background-color: var(--color-gray-020);
}
.palette__element .element-icon.connector {
  margin-top: 0.75rem;
  position: relative;
}
.palette__element .element-icon.connector::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  right: 0.5rem;
  left: 0.5rem;
  height: 0.0625rem;
  background-color: var(--color-gray-020);
}
.palette__element .element-icon.connector [class*=ic-] {
  background: var(--color-gray-060);
}
.palette__element .palette__tools {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 0.25rem;
}
.palette__element .palette__tools::before {
  content: "";
  display: block;
  width: calc(100% - 1rem);
  height: 0.0625rem;
  background-color: var(--color-gray-020);
  margin: 0.5rem auto 0.25rem;
}
.palette__component {
  width: 16.25rem;
}
.palette__component.hide__l {
  width: 0;
}
.palette__component .palette {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin: 0;
  padding: 0;
}
.palette__component .palette .palette__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 3rem;
  font-weight: 700;
  padding: 0.5rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.375rem;
  color: var(--color-gray-090);
  background-color: transparent;
  text-align: center;
  cursor: move;
  outline: none;
}
.palette__component .palette .palette__item [class*=ic-] {
  background: var(--color-gray-070);
}
.palette__component .palette .palette__item:hover {
  color: var(--color-gray-090);
  background-color: var(--color-blue-000);
  border-color: var(--color-gray-015);
}
.palette__component .palette .palette__item:hover [class*=ic-] {
  background: var(--color-gray-070);
}
.palette__component .palette .palette__item:focus {
  color: var(--color-gray-090);
  background-color: var(--color-blue-000);
  border-color: var(--color-blue-030);
  z-index: 25;
}
.palette__component .palette .palette__item:focus [class*=ic-] {
  background: var(--color-gray-070);
}
.palette__component .palette .palette__item:active {
  color: var(--color-gray-090);
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-050);
  z-index: 25;
}
.palette__component .palette .palette__item:active [class*=ic-] {
  background: var(--color-gray-070);
}
.palette__component .palette .palette__item.drag {
  color: var(--color-blue-050);
  background-color: var(--color-blue-005);
  border-color: var(--color-blue-050);
}
.palette__component .palette .palette__item.drag [class*=ic-] {
  background: var(--color-blue-050);
}
.palette__component .palette .palette__item.placeholder {
  color: var(--color-blue-050);
  border-color: var(--color-blue-050);
  background-color: var(--color-blue-005);
}
.palette__component .palette .palette__item.placeholder [class*=ic-] {
  background: var(--color-blue-050);
}

.process__layer {
  position: fixed;
  top: 2.5rem;
  right: 25rem;
  bottom: 0;
  left: 3.5rem;
  overflow: hidden;
}
.process__layer.wide {
  left: 0;
}
.process__layer .toggle--tab {
  position: absolute;
  top: 0.3125rem;
  padding: 0.25rem 0;
  background-color: var(--color-gray-030);
  border-radius: 0;
  border-top-right-radius: 0.3125rem;
  border-bottom-right-radius: 0.3125rem;
  z-index: 500;
}
.process__layer .toggle--tab .ic-arrow-double-right {
  transform: rotate(180deg);
  background: var(--color-gray-000);
}
.process__layer .toggle--tab.hide {
  transform: rotate(180deg);
  left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0.3125rem;
  border-bottom-left-radius: 0.3125rem;
}
.process__layer .drawing-board {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.process__layer .drawing-board .sim-panel {
  position: absolute;
  top: 0.75rem;
  right: 3.75rem;
  border: 0.0625rem solid var(--color-gray-030);
  box-shadow: 0 0.125rem 0.5rem 0 var(--color-gray-040);
  border-left: 0.1875rem solid #0066FF;
  z-index: 500;
  display: flex;
  flex-direction: column;
  width: 18rem;
  max-height: calc(100% - 6rem);
  overflow: hidden;
  padding: 0.75rem;
  border-radius: 0.375rem;
  background-color: var(--color-gray-000);
  font-size: 0.875rem;
}
.process__layer .drawing-board .sim-panel__header {
  border-bottom: 0.0625rem solid var(--color-gray-020);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
}
.process__layer .drawing-board .sim-panel__icon {
  flex: 0 0 auto;
  background-color: #0066FF;
}
.process__layer .drawing-board .sim-panel__title {
  color: var(--color-gray-090);
  font-size: 1.125rem;
  font-weight: 500;
}
.process__layer .drawing-board .sim-panel__close {
  flex: 0 0 auto;
  margin-left: auto;
}
.process__layer .drawing-board .sim-panel__close span {
  background-color: var(--color-gray-060);
}
.process__layer .drawing-board .sim-panel__close:hover span {
  background-color: #0066FF;
}
.process__layer .drawing-board .sim-panel__controls {
  border-bottom: 0.0625rem solid var(--color-gray-020);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.625rem;
  padding-bottom: 0.625rem;
}
.process__layer .drawing-board .sim-panel__controls .btn__ic--box--s {
  padding-block: 0.3125rem;
}
.process__layer .drawing-board .sim-panel__controls .ic-caret-right--xs {
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
.process__layer .drawing-board .sim-panel__sample-title {
  margin: 0.25rem 0;
  color: var(--color-gray-070);
  font-weight: 500;
}
.process__layer .drawing-board .sim-panel__sample-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.process__layer .drawing-board .sim-panel__sample-label {
  border: 0.0625rem solid var(--color-gray-020);
  width: 40%;
  padding: 0.25rem 0.5rem;
  overflow: hidden;
  background-color: var(--color-gray-003);
  color: var(--color-gray-080);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process__layer .drawing-board .sim-panel__sample-cell {
  border: 0.0625rem solid var(--color-gray-020);
  padding: 0;
}
.process__layer .drawing-board .sim-panel__sample-input {
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  border: none;
  background-color: transparent;
  font-size: 0.75rem;
}
.process__layer .drawing-board .sim-panel__sample:empty + .sim-panel__log {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.process__layer .drawing-board .sim-panel__awaiting:not(:empty) {
  margin: 0 0 0.5rem 0.4375rem;
  padding: 0.125rem 0.5rem 0.25rem 1.5rem;
  border-left: 0.125rem solid #0066FF;
  background-color: transparent;
}
.process__layer .drawing-board .sim-panel__awaiting-title {
  margin-bottom: 0.25rem;
  color: var(--color-gray-050);
  font-size: 0.625rem;
  font-weight: 400;
}
.process__layer .drawing-board .sim-panel__awaiting-note {
  margin-bottom: 0.25rem;
  color: var(--color-gray-050);
  font-size: 0.625rem;
}
.process__layer .drawing-board .sim-panel__choice {
  display: block;
  width: 100%;
  margin: 0.25rem 0;
}
.process__layer .drawing-board .sim-panel__log {
  border-top: 0.0625rem solid var(--color-gray-020);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin-top: 0.5rem;
  padding-top: 0.375rem;
}
.process__layer .drawing-board .sim-panel__log-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.25rem;
  border-radius: 0.25rem;
  color: var(--color-gray-080);
}
.process__layer .drawing-board .sim-panel__log-row::before {
  content: "";
  position: absolute;
  left: 0.46875rem;
  top: 0;
  bottom: 0;
  width: 0.0625rem;
  background-color: var(--color-gray-030);
  z-index: 0;
}
.process__layer .drawing-board .sim-panel__log-row:first-child::before {
  top: 50%;
}
.process__layer .drawing-board .sim-panel__log-row:last-child::before {
  bottom: 50%;
}
.process__layer .drawing-board .sim-panel__log-row.is-current::before {
  bottom: 50%;
}
.process__layer .drawing-board .sim-panel__log-row.is-current {
  background-color: var(--color-blue-000);
  color: var(--color-gray-090);
  font-weight: 600;
}
.process__layer .drawing-board .sim-panel__log-dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--color-gray-040);
}
.process__layer .drawing-board .sim-panel__log-dot.sim-cat-event {
  background-color: #F763C1;
}
.process__layer .drawing-board .sim-panel__log-dot.sim-cat-task {
  background-color: #47D1DE;
}
.process__layer .drawing-board .sim-panel__log-dot.sim-cat-gateway {
  background-color: #FFAC47;
}
.process__layer .drawing-board .sim-panel__log-dot.sim-cat-callActivity {
  background-color: #A95EEB;
}
.process__layer .drawing-board .sim-panel__log-order {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 0.5625rem;
  background-color: var(--color-gray-010);
  color: var(--color-gray-060);
  font-size: 0.625rem;
  font-weight: 500;
}
.process__layer .drawing-board .sim-panel__log-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.75rem;
}
.process__layer .drawing-board .sim-panel__summary:not(:empty) {
  border-top: 0.0625rem solid var(--color-gray-020);
  margin-top: 0.5rem;
  padding-top: 0.5rem;
}
.process__layer .drawing-board .sim-panel__summary-result {
  display: inline-block;
  padding: 0.125rem 0.625rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 0.75rem;
}
.process__layer .drawing-board .sim-panel__summary-result.success {
  color: #3CA22A;
  background-color: rgba(60, 162, 42, 0.12);
}
.process__layer .drawing-board .sim-panel__summary-result.failed {
  color: #0066FF;
  background-color: rgba(222, 52, 18, 0.12);
}
.process__layer .drawing-board .sim-panel__summary-count {
  margin-top: 0.5rem;
  padding-left: 0.625rem;
}
.process__layer .drawing-board .sim-panel__summary-count-row {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
}
.process__layer .drawing-board .sim-panel__summary-count-value {
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1;
}
.process__layer .drawing-board .sim-panel__summary-count-value.success {
  color: #3CA22A;
}
.process__layer .drawing-board .sim-panel__summary-count-value.failed {
  color: #0066FF;
}
.process__layer .drawing-board .sim-panel__summary-count-label {
  color: var(--color-gray-060);
  font-size: 0.75rem;
}
.process__layer .drawing-board .sim-panel__summary-progress {
  height: 0.25rem;
  border-radius: 0.125rem;
  overflow: hidden;
  background-color: var(--color-gray-010);
}
.process__layer .drawing-board .sim-panel__summary-progress-fill {
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-vivid-green-060);
  transition: width 0.4s ease-out;
}
.process__layer .drawing-board .sim-panel__summary.has-warning .sim-panel__summary-progress-fill {
  background-color: #0066FF;
}
.process__layer .drawing-board .sim-panel__summary-warn, .process__layer .drawing-board .sim-panel__summary-info {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding-left: 0.625rem;
  font-size: 0.75rem;
  line-height: 1.4;
}
.process__layer .drawing-board .sim-panel__summary-warn [class*=ic-], .process__layer .drawing-board .sim-panel__summary-info [class*=ic-] {
  flex: 0 0 auto;
  margin-top: 0.0625rem;
}
.process__layer .drawing-board .sim-panel__summary-warn {
  color: #0066FF;
}
.process__layer .drawing-board .sim-panel__summary-warn [class*=ic-] {
  background: #0066FF;
}
.process__layer .drawing-board .sim-panel__summary-info {
  color: var(--color-gray-070);
}
.process__layer .drawing-board .sim-panel__summary-info [class*=ic-] {
  background: var(--color-gray-050);
}

.container__form .form__layer {
  position: fixed;
  top: 2.5rem;
  right: 26.25rem;
  bottom: 0;
  left: 16.25rem;
  scrollbar-width: none;
  background-color: var(--color-gray-003);
  overflow-y: auto;
}
.container__form .form__layer::-webkit-scrollbar {
  display: none;
}
.container__form .form__layer.wide__l {
  left: 0;
}
.container__form .form__layer.wide__r {
  right: 0;
}
.container__form .form__layer .toggle--tab {
  position: fixed;
  width: 0.5rem;
  height: 100vh;
  padding: 0;
  border: 0.0625rem solid var(--color-gray-030);
  border-top: none;
  background-color: var(--color-gray-000);
  z-index: 500;
  border-radius: 0;
}
.container__form .form__layer .toggle--tab.tab__l {
  border-left: 0.0625rem solid var(--color-gray-000);
}
.container__form .form__layer .toggle--tab.tab__l.hide__l {
  left: 0;
}
.container__form .form__layer .toggle--tab.tab__r {
  border-right: 0.0625rem solid var(--color-gray-000);
  right: 26.25rem;
}
.container__form .form__layer .toggle--tab.tab__r.hide__r {
  right: 0;
}
.container__form .form__layer .toggle--tab .ic-more-h {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  height: 0.5rem;
  background: var(--color-gray-060);
}
.container__form .form__layer .save-comment {
  height: 1rem;
}

.drawing-board .component__context {
  min-width: 0;
}
.drawing-board .component__context.single {
  flex-basis: calc((100% - (0px * 15)) / 16
          * var(--data-column, 16)
          + (var(--data-column) - 1) * 0px);
}
.drawing-board .component__context > .context-menu {
  position: fixed;
  display: none;
  background-color: var(--color-gray-000);
  border: 0.0625rem dashed var(--color-gray-010);
  border-radius: 0.188rem;
  z-index: 25;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  transform: scale(0.9);
}
.drawing-board .component__context > .context-menu .context-group {
  display: flex;
  flex-direction: row;
  padding: 0.25rem;
  gap: 0.25rem;
}
.drawing-board .component__context > .context-menu .context-group .context-menu__item {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.drawing-board .component {
  position: relative;
}
.drawing-board .component .component__label {
  flex-basis: calc((100% - (0px * 15)) / 16
          * var(--data-column, 16)
          + (var(--data-column) - 1) * 0px);
  justify-content: var(--data-align);
  padding: 0.125rem 0 0.25rem 0;
}
.drawing-board .component .component__label .component__label--text {
  padding: 0.125rem 0;
  line-height: 1.3;
}
.drawing-board .component .component__label > .component__label--meta-badge {
  display: none;
}
.drawing-board .component .element {
  flex-basis: calc((100% - (0px * 15)) / 16
          * var(--data-column, 16)
          + (var(--data-column) - 1) * 0px);
}
.drawing-board .component.sortable-ghost {
  margin: 0;
}
.drawing-board .component__context[data-context-type=group] {
  border: 0.0625rem solid var(--skeleton-line-color);
  border-radius: 0.563rem;
  background-color: var(--skeleton-bg-color);
}
.drawing-board .component[data-component-type=group] {
  border-radius: 0.563rem;
}
.drawing-board .component[data-component-type=row] {
  display: flex;
  flex-direction: row;
  border-radius: 0.188rem;
}
.drawing-board .component[data-component-type=inputBoxText],
.drawing-board .component[data-component-type=inputBoxNumber],
.drawing-board .component[data-component-type=inputBoxPhone],
.drawing-board .component[data-component-type=inputBoxEmail],
.drawing-board .component[data-component-type=label],
.drawing-board .component[data-component-type=divider],
.drawing-board .component[data-component-type=textArea],
.drawing-board .component[data-component-type=singleSelect],
.drawing-board .component[data-component-type=organizationSearch],
.drawing-board .component[data-component-type=singleSelect],
.drawing-board .component[data-component-type=partnerSearch] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=levelSelect] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=levelSelect] .select__wrapper .select {
  min-width: 0;
}
.drawing-board .component[data-component-type=rating] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=rating] .readonly {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 25;
  background: transparent;
}
.drawing-board .component[data-component-type=year],
.drawing-board .component[data-component-type=yearMonth],
.drawing-board .component[data-component-type=date],
.drawing-board .component[data-component-type=dateTime],
.drawing-board .component[data-component-type=time] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=year] .date-picker,
.drawing-board .component[data-component-type=yearMonth] .date-picker,
.drawing-board .component[data-component-type=date] .date-picker,
.drawing-board .component[data-component-type=dateTime] .date-picker,
.drawing-board .component[data-component-type=time] .date-picker {
  width: 100%;
}
.drawing-board .component[data-component-type=fromTo] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=fromTo] .date-between {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  column-gap: 0.25rem;
  align-items: center;
}
.drawing-board .component[data-component-type=fromTo] .date-between__field {
  min-width: 0;
  display: flex;
  align-items: center;
}
.drawing-board .component[data-component-type=fromTo] .date-between__field .date-picker__box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.drawing-board .component[data-component-type=fromTo] .date-between__field .date-picker {
  width: 100%;
}
.drawing-board .component[data-component-type=fromTo] .date-between__field .date-picker__input {
  min-width: 0;
}
.drawing-board .component[data-component-type=fromTo] .date-between__sep {
  padding: 0 0.5rem;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.drawing-board .component[data-component-type=userSearch] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=userSearch] .tagify[readonly]:not(.tag-properties) {
  background: var(--bg-color-readonly);
  border: 0.063rem solid var(--line-color-readonly);
}
.drawing-board .component[data-component-type=textEditor] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=textEditor] .ql-wrapper-container .ql-container.ql-snow .ql-editor {
  height: calc(24px * var(--data-row));
}
.drawing-board .component[data-component-type=toggleSwitch] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
  align-content: center;
}
.drawing-board .component[data-component-type=radio] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=radio] .radio__wrapper {
  min-height: 1.875rem;
}
.drawing-board .component[data-component-type=checkBox] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=checkBox] .checkbox__wrapper {
  min-height: 1.875rem;
}
.drawing-board .component[data-component-type=image] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=image] .imagebox-placeholder {
  border: 0.0625rem solid var(--line-color);
  border-radius: 0.25rem;
  display: none;
  height: auto;
  padding: 0.75rem 0 0.75rem;
  justify-content: center;
  background-color: var(--bg-color);
  color: var(--color-gray-040);
  font-size: 0.875rem;
  font-weight: 400;
  text-align: center;
}
.drawing-board .component[data-component-type=image] .imagebox-placeholder [class*=ic-] {
  background-size: contain;
  width: 10rem;
  height: 7.75rem;
}
.drawing-board .component[data-component-type=image] .imagebox {
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
}
.drawing-board .component[data-component-type=image] .imagebox[data-path=""] {
  display: none;
}
.drawing-board .component[data-component-type=image] .imagebox[data-path=""] + .imagebox-placeholder {
  display: grid;
}
.drawing-board .component[data-component-type=fileUpload] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=fileUpload] .file-uploader--default {
  --uploader-no-data-bg-color: var(--color-gray-003);
  --uploader-no-data-border-color: var(--color-gray-015);
  min-height: 2.125rem;
  border: none;
  padding: 0;
}
.drawing-board .component[data-component-type=fileUpload] .file-uploader--default .file__wrapper {
  width: 100%;
}
.drawing-board .component[data-component-type=fileUpload] .file-uploader--default .file-uploader--noFile {
  width: 100%;
  min-height: 2.75rem;
  line-height: 2.75rem;
  color: var(--text-color-readonly);
  padding: 0.625rem 0.75rem;
  text-align: center;
  background-color: var(--uploader-no-data-bg-color);
  font-size: 0.875rem;
  border-radius: 0.188rem;
}
.drawing-board .component[data-component-type=fileDownload] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple {
  --downloader-title-color: var(--color-gray-090);
  --downloader-no-data-bg-color: var(--color-gray-003);
  --downloader-no-data-text-color: var(--color-gray-050);
  --downloader-file-name-text-color: var(--color-gray-090);
  --downloader-file-size-text-color: var(--color-gray-030);
  display: flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0.125rem 0;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  text-align: left;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group {
  width: 100%;
  min-height: auto;
  padding: 0;
  border: 0;
  background-color: transparent;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group .fd-group--detail {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: auto;
  margin-bottom: 0;
  margin-top: 0.625rem;
  padding: 0;
  font-size: 0.875rem;
  font-weight: 400;
  border: none;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group .fd-group--detail:first-child {
  margin-top: 0;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group .fd-group--detail .fd-group--detail--type {
  width: 1.25rem;
  height: 1.25rem;
  background-size: 1.25rem;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group .fd-group--detail--name {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-style: solid;
  text-decoration-thickness: auto;
  text-underline-offset: 0.125rem;
  padding: 0 0.5rem 0 0.25rem;
  color: var(--downloader-file-name-text-color);
  cursor: pointer;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group .fd-group--detail--size {
  padding: 0;
  color: var(--downloader-file-size-text-color);
  font-size: 0.75rem;
  margin-top: 0.25rem;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group--no-data {
  min-height: 2.75rem;
  line-height: 2.75rem;
  padding: 0.625rem 0.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--downloader-no-data-bg-color);
  border-radius: 0.188rem;
  cursor: default;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--simple .fd-group--no-data__label {
  color: var(--downloader-no-data-text-color);
  font-size: 0.875rem;
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--description:not(:empty) {
  display: block;
  color: var(--sub-color);
}
.drawing-board .component[data-component-type=fileDownload] .file-downloader--description:empty {
  display: none;
}
.drawing-board .component__context[data-context-type=datagrid] {
  border: none;
}
.drawing-board .component[data-component-type=dataTable] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}
.drawing-board .component[data-component-type=dataTable] .date-between {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  column-gap: 0.25rem;
  align-items: center;
}
.drawing-board .component[data-component-type=dataTable] .date-between .date-between__field {
  min-width: 0;
  display: flex;
  align-items: center;
}
.drawing-board .component[data-component-type=dataTable] .date-between .date-between__field .date-picker__box {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.drawing-board .component[data-component-type=dataTable] .date-between .date-between__field .date-picker {
  width: 100%;
}
.drawing-board .component[data-component-type=dataTable] .date-between .date-between__field .date-picker__input {
  min-width: 0;
}
.drawing-board .component[data-component-type=dataTable] .date-between .date-between__sep {
  padding: 0 0.5rem;
  line-height: 1;
  user-select: none;
  white-space: nowrap;
}
.drawing-board[data-display-mode=editable] .component__context[data-context-mode=hidden] {
  display: none !important;
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=form] {
  padding: 0;
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=group]:has(.highlight-readonly) {
  border-color: var(--color-vivid-green-070);
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=group]:has(.highlight-editable) {
  border-color: var(--color-vivid-green-070);
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=group]:has(.highlight-hidden) {
  border-color: var(--line-color-disabled);
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=group]:has(.highlight-hidden) [class*=ic-arrow-right] {
  background: var(--icon-color-disabled) !important;
}
.drawing-board[data-display-mode=editable] .component__context[data-context-type=group]:has(.highlight-hidden) .accordion__title {
  color: var(--text-color-disabled) !important;
}
.drawing-board[data-display-mode=readonly] .component__label > .component__label--meta-badge:not(.none) {
  display: inline-flex;
}
.drawing-board[data-display-mode=readonly] .component__context {
  border: 0.0625rem dashed var(--color-gray-010);
  border-radius: 0.188rem;
  cursor: pointer;
}
.drawing-board[data-display-mode=readonly] .component__context.selected {
  border-color: var(--color-blue-050) !important;
}
.drawing-board[data-display-mode=readonly] .component__context.selected > .context-menu {
  border-color: var(--color-blue-050) !important;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.drawing-board[data-display-mode=readonly] .component__context > .context-menu {
  display: block;
}
.drawing-board[data-display-mode=readonly] .component__context.disabled > .context-menu {
  display: none;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component {
  background: linear-gradient(-45deg, var(--color-gray-003) 25%, var(--color-gray-005) 0, var(--color-gray-005) 50%, var(--color-gray-003) 0, var(--color-gray-003) 75%, var(--color-gray-005) 0);
  background-size: 1.25rem 1.25rem;
  -webkit-background-size: 1.25rem 1.25rem;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component *:not([class*=ic-]):not([class*=context-menu]) {
  background-color: transparent;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component [class*=btn__] {
  box-shadow: inset 0 0 0 0.0625rem var(--color-gray-005);
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component .select__box, .drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component .dz-clickable,
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component button, .drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component input, .drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component .tag__input, .drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component textarea,
.drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component .radio, .drawing-board[data-display-mode=readonly] .component__context[data-context-mode=hidden] .component .checkbox {
  pointer-events: none;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=form].disabled {
  padding: 0.25rem 0.25rem 0.25rem 0.25rem;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=form].disabled .component[data-component-type=form] {
  min-height: auto;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=form] {
  border: 0.0625rem dashed var(--color-gray-010);
  border-radius: 0.563rem;
  background-color: var(--color-gray-000);
  padding: 0.25rem 0.25rem 2.5rem 0.25rem;
}
.drawing-board[data-display-mode=readonly] .component[data-component-type=form] {
  min-height: 56.25rem;
  height: auto;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=group] .accordion__label {
  pointer-events: none;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=group] > .context-menu {
  border-style: solid;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=row] {
  border: 0.0625rem solid var(--color-gray-010);
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=row] > .context-menu {
  border-style: solid;
}
.drawing-board[data-display-mode=readonly] .component[data-component-type=placeholder] {
  height: 3rem;
}
.drawing-board[data-display-mode=readonly] .component__context[data-context-type=textEditor] .ql-container .ql-editor {
  resize: none;
}
.drawing-board[data-display-mode=readonly] .component-drag-in {
  border: 0.0625rem dashed var(--color-blue-050);
  background-color: var(--color-blue-005);
}
.drawing-board[data-display-mode=readonly] .palette-drag-in {
  border: 0.0625rem dashed #237CFF;
  border-radius: 0.188rem;
  display: flex;
  width: 100%;
  min-height: 64px;
  padding: 4px;
  background-color: #B4D0FF;
  opacity: 0.5;
}
.drawing-board[data-display-mode=readonly] .palette-drag-in [class*=ic-] {
  display: none;
}
.drawing-board[data-display-mode=readonly] .component[data-component-type=row] .palette-drag-in {
  width: auto;
  flex: 1 1 0;
  min-width: 6rem;
  min-height: auto;
}
.drawing-board[data-display-mode=readonly] .context-menu .ic-swap--rotate-left {
  transform: rotate(-90deg);
}
.drawing-board[data-display-mode=readonly] .context-menu .ic-swap--rotate-right {
  transform: rotate(90deg);
}
.drawing-board[data-display-mode=print] {
  --text-color: var(--color-gray-110);
  --bg-color: var(--color-gray-000);
  --line-color: var(--color-gray-040);
  --line-color-readonly: var(--color-gray-000);
  --label-bg-color: var(--color-gray-010);
  --label-text-color: var(--color-gray-090);
}
.drawing-board[data-display-mode=print] .component__context[data-context-mode=hidden] {
  display: none !important;
}
.drawing-board[data-display-mode=print] .component__context[data-context-type=group] {
  border: none !important;
}
.drawing-board[data-display-mode=print] .component__context[data-context-type=group] .accordion__label {
  pointer-events: none;
}
.drawing-board[data-display-mode=print] .component[data-component-type=group] .accordion__content {
  border-bottom-right-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}
.drawing-board[data-display-mode=print] .component__context[data-context-type=row] {
  border: 0.0625rem solid var(--line-color);
  border-top: none;
  margin: 0 !important;
  overflow: hidden !important;
}
.drawing-board[data-display-mode=print] .component__context[data-context-type=row]:first-of-type {
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  border-top: 0.0625rem solid var(--line-color);
}
.drawing-board[data-display-mode=print] .component__context[data-context-type=row]:last-of-type {
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}
.drawing-board[data-display-mode=print] .component[data-component-type=row] {
  padding: 0 !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=row] .component__context:not(:last-child) {
  border-right: 0.0625rem solid var(--line-color);
}
.drawing-board[data-display-mode=print] .component[data-component-type=row]:empty {
  display: none;
}
.drawing-board[data-display-mode=print] .component {
  padding: 0 !important;
}
.drawing-board[data-display-mode=print] .component .element {
  padding: 0.125rem 0;
}
.drawing-board[data-display-mode=print] .component .element.vertical {
  border-top: 0.0625rem solid var(--line-color);
}
.drawing-board[data-display-mode=print] .component .element.horizontal {
  border-left: 0.0625rem solid var(--line-color);
}
.drawing-board[data-display-mode=print] .component .element input {
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
}
.drawing-board[data-display-mode=print] .component .element .input__wrapper input, .drawing-board[data-display-mode=print] .component .element .input-icon__l input, .drawing-board[data-display-mode=print] .component .element .input-icon__r input, .drawing-board[data-display-mode=print] .component .element .input-icon__both input {
  padding: 0.313rem 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component .element button, .drawing-board[data-display-mode=print] .component .element [class*=ic-] {
  display: none !important;
}
.drawing-board[data-display-mode=print] .component .element textarea {
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
}
.drawing-board[data-display-mode=print] .component .element .select__wrapper > * {
  display: flex;
  align-items: center;
  width: auto !important;
}
.drawing-board[data-display-mode=print] .component .element .select__wrapper > *:not(:last-child)::after {
  content: "-";
  display: inline-block;
  margin: 0 0.5rem;
  color: var(--text-color);
}
.drawing-board[data-display-mode=print] .component .element .select__box {
  color: var(--text-color) !important;
  background-color: var(--bg-color) !important;
}
.drawing-board[data-display-mode=print] .component .element .table__box {
  --line-color: var(--color-gray-040);
  --header-text-color: var(--color-gray-090);
  --header-bg-color: var(--color-gray-010);
  --body-text-color: var(--color-gray-110);
  --empty-text-color: var(--color-gray-110);
  --row-height: 2.25rem;
}
.drawing-board[data-display-mode=print] .component .element .table__box .table tbody td {
  padding: 0 0.5rem;
}
.drawing-board[data-display-mode=print] .component .element .btn__toggle__switch__label {
  color: var(--text-color) !important;
}
.drawing-board[data-display-mode=print] .component .element .ql-container.ql-snow .ql-editor {
  padding: 0.313rem 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component__label {
  background-color: var(--label-bg-color) !important;
  padding: 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component__label .component__label--text {
  color: var(--label-text-color) !important;
  font-weight: 700 !important;
}
.drawing-board[data-display-mode=print] .component__label.none ~ .element {
  border: none !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=radio] .radio__wrapper {
  padding: 0.313rem 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=checkBox] .checkbox__wrapper {
  padding: 0.313rem 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=fileUpload] .file-uploader--simple {
  --dropzone-file-name-text-color: var(--color-gray-110);
  --dropzone-no-data-color: var(--color-gray-110);
  min-height: 2.125rem;
  border: none !important;
  padding: 0 !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=fileUpload] .file-uploader--simple .file-uploader--noFile {
  min-height: 2.125rem;
  line-height: 2.125rem;
  padding: 0 0.5rem !important;
  border: none !important;
  font-size: 0.875rem;
}
.drawing-board[data-display-mode=print] .component[data-component-type=toggleSwitch] .btn__toggle__switch {
  padding: 0 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=rating] .rating__wrapper {
  padding: 0.313rem 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=ci] .element {
  padding: 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element {
  padding: 0.5rem !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element {
  border: none !important;
  padding: 0.125rem 0 !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .input__wrapper input, .drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .input-icon__l input, .drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .input-icon__r input, .drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .input-icon__both input, .drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .date-picker input {
  padding: 0.313rem 0 !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .select__box {
  padding: 0.313rem 0 0.313rem 0 !important;
}
.drawing-board[data-display-mode=print] .component[data-component-type=dataTable] .element .table__box .element .ql-container.ql-snow .ql-editor {
  padding: 0.313rem 0 !important;
}

.property__layer {
  position: fixed;
  top: 2.5rem;
  right: 0;
  border-left: 0.0625rem solid var(--color-gray-030);
  height: 100%;
  background-color: var(--color-gray-000);
}

.property__process {
  width: 28.125rem;
  border-left: 0.0625rem solid var(--color-gray-030);
  box-shadow: 0 0 0.125rem 0 var(--color-gray-030);
}
.property__process .process-properties-header {
  padding: 1.25rem 1.563rem;
  color: var(--color-gray-060);
  font-size: 1.125rem;
  font-weight: 700;
}
.property__process .process-properties {
  height: calc(100% - 70px - 46px);
}
.property__process .process-properties .properties-group-title {
  margin: 1.5rem 1.563rem 0.5rem 1.563rem;
  padding: 0 0 0.5rem 0.625rem;
  border-left: 0.25rem solid var(--color-blue-030);
  border-bottom: 0.0625rem solid var(--color-gray-040);
  color: var(--color-gray-070);
  font-size: 0.875rem;
  font-weight: 700;
}
.property__process .process-properties .properties {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 0.375rem 1.563rem;
}
.property__process .process-properties .properties-title {
  display: inline-block;
  width: 100%;
  color: var(--color-gray-050);
  font-size: 0.875rem;
}
.property__process .process-properties .properties .btn__toggle__switch {
  align-self: center;
  align-items: center;
}
.property__process .process-properties .properties .auto-approval__hint {
  width: 100%;
  margin-top: 0.25rem;
  color: var(--color-gray-050);
  font-size: 0.75rem;
  line-height: 1.4;
}
.property__process .process-properties .properties.last {
  border-bottom: 0.0625rem solid var(--color-gray-030);
  padding-bottom: 1.875rem;
}
.property__process .process-properties .properties .copy,
.property__process .process-properties .properties .tagify:has(.tagify__input) {
  width: 88% !important;
}
.property__process .process-properties .properties .file-select-group .file {
  width: 81% !important;
  margin-right: 0.3125rem;
}
.property__process .process-properties .properties .default-approvers__wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.property__process .process-properties .properties .default-approvers__summary {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  min-height: 1.875rem;
  line-height: 1.375rem;
  background: var(--bg-color);
  border: 0.063rem solid var(--line-color);
  border-radius: 0.25rem;
  color: var(--color-gray-060);
}
.property__process .process-properties .properties .candidate-table,
.property__process .process-properties .properties .script-data {
  margin-top: 0.9375rem;
}
.property__process .process-properties .properties .candidate-table button,
.property__process .process-properties .properties .script-data button {
  padding: 0;
}
.property__process .process-properties .properties .candidate-table tr th, .property__process .process-properties .properties .candidate-table tr td,
.property__process .process-properties .properties .script-data tr th,
.property__process .process-properties .properties .script-data tr td {
  padding: 0 0.625rem;
  border-color: var(--color-gray-040);
  text-align: center;
  vertical-align: middle;
}
.property__process .process-properties .process-info-main {
  margin: 1.25rem 1.563rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-hero {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border-radius: 0.625rem;
  background: linear-gradient(135deg, #0066FF 0%, #003FEB 100%);
  color: var(--color-gray-000);
  box-shadow: 0 0.25rem 0.75rem 0 rgba(0, 102, 255, 0.25);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-hero__label {
  font-size: 0.875rem;
  font-weight: 500;
  opacity: 0.9;
  letter-spacing: 0.025rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-hero__value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card {
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 0.5rem;
  padding: 0.75rem;
  border: 0.0625rem solid var(--color-gray-015);
  border-radius: 0.5rem;
  background-color: var(--color-gray-000);
  transition: all 0.18s ease;
  position: relative;
  overflow: hidden;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0.1875rem;
  background-color: var(--color-gray-030);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card__icon {
  width: 1.25rem;
  height: 1.25rem;
  -webkit-mask-size: 1.25rem 1.25rem;
  mask-size: 1.25rem 1.25rem;
  background: var(--color-gray-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-gray-070);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card__value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-gray-090);
  line-height: 1;
  min-width: 1.25rem;
  text-align: right;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card.is-empty {
  opacity: 0.5;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card.is-empty .process-info-card__value {
  color: var(--color-gray-040);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card:not(.is-empty) {
  box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.04);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=event]::before {
  background-color: #F763C1;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=event] .process-info-card__icon {
  background: #F763C1;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=task]::before {
  background-color: #47D1DE;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=task] .process-info-card__icon {
  background: #47D1DE;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=gateway]::before {
  background-color: #FFAC47;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=gateway] .process-info-card__icon {
  background: #FFAC47;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=callActivity]::before {
  background-color: #A95EEB;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=callActivity] .process-info-card__icon {
  background: #A95EEB;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=connector]::before {
  background-color: var(--color-gray-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=connector] .process-info-card__icon {
  background: var(--color-gray-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=artifact]::before {
  background-color: var(--color-vivid-green-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card[data-category=artifact] .process-info-card__icon {
  background: var(--color-vivid-green-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card.is-empty::before {
  background-color: var(--color-gray-030) !important;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-card.is-empty .process-info-card__icon {
  background: var(--color-gray-040) !important;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-subtitle {
  margin: 0 0 0.5rem 0;
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 700;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta {
  margin-top: 1.5rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta .process-info-metalist {
  margin: 0;
  padding: 0;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta .process-info-metalist__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
  border-bottom: 0.0625rem solid var(--color-gray-010);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta .process-info-metalist__row:last-child {
  border-bottom: none;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta .process-info-metalist__row dt {
  color: var(--color-gray-060);
  font-size: 0.75rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-meta .process-info-metalist__row dd {
  margin: 0;
  color: var(--color-gray-090);
  font-size: 0.75rem;
  text-align: right;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation {
  margin-top: 1.5rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
  font-size: 0.75rem;
  border-bottom: 0.0625rem solid var(--color-gray-010);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__item:last-child {
  border-bottom: none;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__item.is-clickable {
  cursor: pointer;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__item.is-clickable:hover {
  background-color: #FFF8E9;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist__text {
  line-height: 1.3;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-ok .process-info-checklist__icon {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  mask-image: url("../../assets/media/icons/common/icon_check_circle.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background: #1B8824;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-ok .process-info-checklist__text {
  color: var(--color-gray-060);
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-warn .process-info-checklist__icon {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_error.svg");
  mask-image: url("../../assets/media/icons/common/icon_error.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background: #FF850A;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-warn .process-info-checklist__text {
  color: var(--color-gray-090);
  font-weight: 500;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-info .process-info-checklist__icon {
  width: 1rem;
  height: 1rem;
  -webkit-mask-image: url("../../assets/media/icons/common/icon_info.svg");
  mask-image: url("../../assets/media/icons/common/icon_info.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 1rem;
  mask-size: 1rem;
  background: #0066FF;
}
.property__process .process-properties .process-info-main .process-info-dashboard .process-info-validation .process-info-checklist .is-info .process-info-checklist__text {
  color: var(--color-gray-080);
}
.property__form {
  width: 26.25rem;
}
.property__form.hide__r {
  width: 0;
}
.property__form.hide__r > * {
  display: none;
}
.property__form .property__inner {
  height: calc(100vh - 2.5rem);
  position: relative;
  padding: 0.75rem;
}
.property__form .group__property {
  --collapse-text-color-gray: var(--color-gray-090);
}
.property__form .group__property > .collapse__label {
  height: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
  border-bottom: 0.0625rem solid var(--color-gray-010);
}

.component .element .fileDownload .ic-download {
  background: var(--color-gray-050);
}
.component .element .fileDownload .file-text {
  font-size: 0.75rem;
  font-weight: 400;
}
.component .element .file-uploader--simple {
  border-left: 0.0625rem solid var(--color-gray-030);
}
.component .element .modal-button {
  display: inline-grid;
}
.component--preview {
  position: relative;
}
.component--preview .component-area {
  padding: 8px;
}
.component--preview .element {
  pointer-events: auto;
}
.component--preview .group__list__row .element {
  min-height: 3.125rem;
}

.process-status {
  width: 60rem;
  height: 2rem;
}
.process-status__item {
  min-width: 5rem;
  margin: 0 0.3125rem 0 0;
  padding: 0.5rem 0.5rem;
  border: 0.125rem solid var(--color-gray-040);
  border-radius: 0.125rem;
  text-align: center;
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--color-gray-090);
  background-color: var(--color-gray-030);
}
.process-status--running {
  background-color: var(--color-vivid-green-005);
  border: 0.125rem solid var(--color-vivid-green-060);
}
.process-status .ic-arrow-right {
  margin: 0.3125rem 0.3125rem 0.3125rem 0;
  background: var(--color-gray-040);
}

/*
 * @file layout/_designer.scss
 * @description 프로세스에서만 사용되는 scss
 * @version 1.0
 */
.element-icon {
  border: 0.0625rem solid var(--color-gray-030);
  border-radius: 0.375rem;
  overflow: visible;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  margin: 0.25rem 0.25rem 0 0.25rem;
  padding: 0;
  background-color: var(--color-gray-000);
  color: var(--color-gray-060);
  font-size: 0.875rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  opacity: 1;
  user-select: none;
  white-space: nowrap;
  cursor: pointer;
}
.element-icon:disabled, .element-icon.disabled {
  cursor: default;
}
.element-icon:focus {
  border-color: #0052F7;
  background-color: var(--color-gray-000);
  outline: 0;
  box-shadow: 0 0 0.125rem #0052F7;
}
.element-icon:focus .element-icon-text {
  color: var(--color-gray-060);
}
.element-icon:focus [class*=ic-] {
  background: var(--color-gray-050);
}
.element-icon:hover {
  border-color: #237CFF;
  background-color: #B4D0FF;
  outline: 0;
}
.element-icon:hover .element-icon-text {
  color: var(--color-gray-080);
}
.element-icon:hover [class*=ic-] {
  background: #0066FF;
}
.element-icon.active {
  border-color: var(--color-gray-030);
  background-color: var(--color-gray-000);
  z-index: 25;
  box-shadow: 0 0 0.125rem var(--color-gray-030);
}
.element-icon.active .element-icon-text {
  color: var(--color-gray-080);
  font-weight: 700;
}
.element-icon.active [class*=ic-] {
  background: #0066FF;
}
.element-icon.placeholder {
  border-color: var(--color-gray-030);
  background-color: var(--color-gray-020);
}
.element-icon.placeholder .element-icon-text {
  color: var(--color-gray-040);
}
.element-icon.placeholder [class*=ic-] {
  background: var(--color-gray-040);
}
.element-icon.connector, .element-icon.move-icon, .element-icon.zoom-icon, .element-icon.reset-zoom-icon {
  border: 0.0625rem solid var(--color-gray-030);
  background-color: var(--color-gray-000);
  color: var(--color-gray-080);
}
.element-icon.connector [class*=ic-], .element-icon.move-icon [class*=ic-], .element-icon.zoom-icon [class*=ic-], .element-icon.reset-zoom-icon [class*=ic-] {
  background: var(--color-gray-080);
}
.element-icon.connector .element-icon-text, .element-icon.move-icon .element-icon-text, .element-icon.zoom-icon .element-icon-text, .element-icon.reset-zoom-icon .element-icon-text {
  color: var(--color-gray-080);
}
.element-icon.connector:focus, .element-icon.move-icon:focus, .element-icon.zoom-icon:focus, .element-icon.reset-zoom-icon:focus {
  border-color: #0052F7;
  background-color: var(--color-gray-000);
  color: var(--color-gray-080);
  outline: 0;
  box-shadow: 0 0 0.125rem #0052F7;
}
.element-icon.connector:focus [class*=ic-], .element-icon.move-icon:focus [class*=ic-], .element-icon.zoom-icon:focus [class*=ic-], .element-icon.reset-zoom-icon:focus [class*=ic-] {
  background: var(--color-gray-080);
}
.element-icon.connector:focus .element-icon-text, .element-icon.move-icon:focus .element-icon-text, .element-icon.zoom-icon:focus .element-icon-text, .element-icon.reset-zoom-icon:focus .element-icon-text {
  color: var(--color-gray-080);
}
.element-icon.connector:hover, .element-icon.move-icon:hover, .element-icon.zoom-icon:hover, .element-icon.reset-zoom-icon:hover {
  border-color: var(--color-gray-030);
  background-color: #B4D0FF;
  color: var(--color-gray-080);
  outline: 0;
}
.element-icon.connector:hover [class*=ic-], .element-icon.move-icon:hover [class*=ic-], .element-icon.zoom-icon:hover [class*=ic-], .element-icon.reset-zoom-icon:hover [class*=ic-] {
  background: var(--color-gray-080);
}
.element-icon.connector:hover .element-icon-text, .element-icon.move-icon:hover .element-icon-text, .element-icon.zoom-icon:hover .element-icon-text, .element-icon.reset-zoom-icon:hover .element-icon-text {
  color: var(--color-gray-080);
}
.element-icon.connector:enabled:active, .element-icon.connector:enabled.active, .element-icon.move-icon:enabled:active, .element-icon.move-icon:enabled.active, .element-icon.zoom-icon:enabled:active, .element-icon.zoom-icon:enabled.active, .element-icon.reset-zoom-icon:enabled:active, .element-icon.reset-zoom-icon:enabled.active {
  color: #003FEB;
  background-color: #7AB0FF;
  border-color: #237CFF;
  z-index: 25;
}
.element-icon.connector:enabled:active [class*=ic-], .element-icon.connector:enabled.active [class*=ic-], .element-icon.move-icon:enabled:active [class*=ic-], .element-icon.move-icon:enabled.active [class*=ic-], .element-icon.zoom-icon:enabled:active [class*=ic-], .element-icon.zoom-icon:enabled.active [class*=ic-], .element-icon.reset-zoom-icon:enabled:active [class*=ic-], .element-icon.reset-zoom-icon:enabled.active [class*=ic-] {
  background: #003FEB;
}
.element-icon.connector:enabled:active .element-icon-text, .element-icon.connector:enabled.active .element-icon-text, .element-icon.move-icon:enabled:active .element-icon-text, .element-icon.move-icon:enabled.active .element-icon-text, .element-icon.zoom-icon:enabled:active .element-icon-text, .element-icon.zoom-icon:enabled.active .element-icon-text, .element-icon.reset-zoom-icon:enabled:active .element-icon-text, .element-icon.reset-zoom-icon:enabled.active .element-icon-text {
  color: #003FEB;
}
.element-icon.connector.selected:not(:disabled), .element-icon.connector.selected:not(.disabled), .element-icon.move-icon.selected:not(:disabled), .element-icon.move-icon.selected:not(.disabled), .element-icon.zoom-icon.selected:not(:disabled), .element-icon.zoom-icon.selected:not(.disabled), .element-icon.reset-zoom-icon.selected:not(:disabled), .element-icon.reset-zoom-icon.selected:not(.disabled) {
  border-color: #0066FF;
  background-color: var(--color-gray-000);
  color: #0066FF;
  z-index: 25;
}
.element-icon.connector.selected:not(:disabled) [class*=ic-], .element-icon.connector.selected:not(.disabled) [class*=ic-], .element-icon.move-icon.selected:not(:disabled) [class*=ic-], .element-icon.move-icon.selected:not(.disabled) [class*=ic-], .element-icon.zoom-icon.selected:not(:disabled) [class*=ic-], .element-icon.zoom-icon.selected:not(.disabled) [class*=ic-], .element-icon.reset-zoom-icon.selected:not(:disabled) [class*=ic-], .element-icon.reset-zoom-icon.selected:not(.disabled) [class*=ic-] {
  background: #0066FF;
}
.element-icon.connector.selected:not(:disabled) .element-icon-text, .element-icon.connector.selected:not(.disabled) .element-icon-text, .element-icon.move-icon.selected:not(:disabled) .element-icon-text, .element-icon.move-icon.selected:not(.disabled) .element-icon-text, .element-icon.zoom-icon.selected:not(:disabled) .element-icon-text, .element-icon.zoom-icon.selected:not(.disabled) .element-icon-text, .element-icon.reset-zoom-icon.selected:not(:disabled) .element-icon-text, .element-icon.reset-zoom-icon.selected:not(.disabled) .element-icon-text {
  color: #0066FF;
}
.element-icon.connector:disabled, .element-icon.connector.disabled, .element-icon.move-icon:disabled, .element-icon.move-icon.disabled, .element-icon.zoom-icon:disabled, .element-icon.zoom-icon.disabled, .element-icon.reset-zoom-icon:disabled, .element-icon.reset-zoom-icon.disabled {
  border-color: var(--color-gray-030);
  background-color: var(--color-gray-020);
  color: var(--color-gray-040);
  cursor: default;
}
.element-icon.connector:disabled [class*=ic-], .element-icon.connector.disabled [class*=ic-], .element-icon.move-icon:disabled [class*=ic-], .element-icon.move-icon.disabled [class*=ic-], .element-icon.zoom-icon:disabled [class*=ic-], .element-icon.zoom-icon.disabled [class*=ic-], .element-icon.reset-zoom-icon:disabled [class*=ic-], .element-icon.reset-zoom-icon.disabled [class*=ic-] {
  background: var(--color-gray-040);
}
.element-icon.connector:disabled .element-icon-text, .element-icon.connector.disabled .element-icon-text, .element-icon.move-icon:disabled .element-icon-text, .element-icon.move-icon.disabled .element-icon-text, .element-icon.zoom-icon:disabled .element-icon-text, .element-icon.zoom-icon.disabled .element-icon-text, .element-icon.reset-zoom-icon:disabled .element-icon-text, .element-icon.reset-zoom-icon.disabled .element-icon-text {
  color: var(--color-gray-040);
}
.element-icon .element-icon-text {
  display: none;
}
.element-icon [class*=ic-] {
  display: inline-block;
  flex-shrink: 0;
  background: var(--color-gray-050);
}

.btn__ic.button-candidate-add {
  margin-left: 0.3125rem;
}
.btn__ic.button-candidate-add .ic-plus {
  background: var(--color-gray-050);
}
.btn__ic.button-attach-file .ic-folder {
  background: var(--color-gray-050);
}
.btn__ic.approval-step-add {
  float: right;
}
.btn__ic.approval-step-add .ic-plus {
  background: var(--color-gray-050);
}

.container__process.process-simulating .palette__element {
  pointer-events: none;
}
.container__process.process-simulating .palette__element::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--color-gray-000);
  opacity: 0.55;
  pointer-events: none;
}
.container__process.process-simulating .palette__element .element-icon.connector.selected,
.container__process.process-simulating .palette__element .element-icon.move-icon.selected,
.container__process.process-simulating .palette__element .element-icon.zoom-icon.selected {
  border-color: var(--pd-line-2);
  background-color: var(--pd-surface-2);
}
.container__process.process-simulating .palette__element .element-icon.connector.selected [class*=ic-],
.container__process.process-simulating .palette__element .element-icon.move-icon.selected [class*=ic-],
.container__process.process-simulating .palette__element .element-icon.zoom-icon.selected [class*=ic-] {
  background: var(--pd-text-3);
}
.container__process textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.container__process label {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
}
.container__process input:not([type=checkbox]),
.container__process textarea,
.container__process table,
.container__process select {
  width: 100%;
}
.container__process .select {
  width: 100%;
}

.condition-value__widget .select__options .checkbox {
  font-size: inherit;
}

:root {
  --pd-navy: #152238;
  --pd-navy-2: #1E2E4A;
  --pd-navy-line: #2A3B5A;
  --pd-navy-text: #E8EDF5;
  --pd-blue: #1F5BFF;
  --pd-blue-soft: #E8EFFF;
  --pd-ink: #1B2432;
  --pd-muted: #3C4A60;
  --pd-text-2: #5B6778;
  --pd-text-3: #B3BCC9;
  --pd-surface: #FFFFFF;
  --pd-surface-2: #FBFCFE;
  --pd-line: #E6EAF0;
  --pd-line-2: #DDE3EC;
  --pd-band: #EEF2F8;
  --pd-rail: #F3F5F9;
  --pd-canvas-bg: #F8F9FB;
  --pd-grid: #D8DEE8;
  --pd-node-border: #B9C3D3;
  --pd-edge: #55627A;
  --pd-label-pill: #EEF2F8;
  --pd-gateway-fill: #FFF6EE;
  --pd-ok: #1FA463;
  --pd-ok-bg: #F4FBF7;
  --pd-ok-text: #1A7F4B;
  --pd-ok-line: #8CD5AD;
  --pd-warn: #E8A317;
  --pd-warn-bg: #FFFBF2;
  --pd-warn-text: #8A5A00;
  --pd-warn-line: #F0C36B;
  --pd-cat-event: #F0508C;
  --pd-cat-task: #12A6C9;
  --pd-cat-call-activity: #7A5AF8;
  --pd-cat-gateway: #F58A2E;
  --pd-cat-artifact: #8B95A5;
  --pd-shadow-rgb: 20, 30, 60;
}

html[data-theme=dark] {
  --pd-navy: #2A2E3F;
  --pd-navy-2: #3A3F54;
  --pd-navy-line: #4A506A;
  --pd-navy-text: #DFE2EA;
  --pd-blue: #5C8CFF;
  --pd-blue-soft: #1B2A4A;
  --pd-ink: #DFE2EA;
  --pd-muted: #BFC5D4;
  --pd-text-2: #A0A7BF;
  --pd-text-3: #5B627F;
  --pd-surface: #0D0E14;
  --pd-surface-2: #101219;
  --pd-line: #232634;
  --pd-line-2: #2A2E3F;
  --pd-band: #1B1E2A;
  --pd-rail: #14161F;
  --pd-canvas-bg: #0D0E14;
  --pd-grid: #2A2E3F;
  --pd-node-border: #3A3F54;
  --pd-edge: #838BAA;
  --pd-label-pill: #232634;
  --pd-gateway-fill: #2B2216;
  --pd-ok: #2DB870;
  --pd-ok-bg: #10281C;
  --pd-ok-text: #4CCB86;
  --pd-ok-line: #2E6B49;
  --pd-warn: #F0B23A;
  --pd-warn-bg: #2B2410;
  --pd-warn-text: #F0C36B;
  --pd-warn-line: #6B5321;
  --pd-cat-event: #F56FA0;
  --pd-cat-task: #2BB9DA;
  --pd-cat-call-activity: #9A80FF;
  --pd-cat-gateway: #F79A4F;
  --pd-cat-artifact: #9AA4B5;
  --pd-shadow-rgb: 0, 0, 0;
}

.property__process .process-properties-header {
  display: none;
}
.property__process .process-properties {
  height: calc(100% - 2.5rem);
}
.property__process .wb-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}
.property__process .wb-tabs {
  display: flex;
  gap: 0.125rem;
  margin: 0.75rem 1rem 0;
  padding: 0.1875rem;
  border-radius: 0.5rem;
  background-color: var(--pd-band);
}
.property__process .wb-tab {
  flex: 1 1 0;
  padding: 0.375rem 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--pd-text-2);
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.property__process .wb-tab:not(:disabled):not(.is-on):hover {
  color: var(--pd-ink);
}
.property__process .wb-tab.is-on {
  background-color: var(--pd-navy);
  color: var(--pd-surface);
  font-weight: 700;
  box-shadow: 0 0.0625rem 0.25rem rgba(var(--pd-shadow-rgb), 0.2);
}
.property__process .wb-tab:disabled {
  color: var(--pd-text-3);
  cursor: default;
}
.property__process .wb-tab:focus-visible {
  outline: 0.125rem solid var(--pd-blue);
  outline-offset: -0.125rem;
}
.property__process .wb-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.375rem;
}
.property__process .wb-title__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pd-ink);
  font-size: 0.875rem;
  font-weight: 700;
}
.property__process .wb-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0 1rem 0.625rem;
  border-bottom: 0.0625rem solid var(--pd-line);
}
.property__process .wb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  border: 0.0625rem solid var(--pd-line-2);
  border-radius: 0.75rem;
  background-color: var(--pd-surface);
  color: var(--pd-text-2);
  font-size: 0.6875rem;
  line-height: 1.3;
}
.property__process .wb-chip--warn {
  border-color: var(--pd-warn-line);
  color: var(--pd-warn-text);
  background-color: var(--pd-warn-bg);
}
.property__process .wb-chip--ok {
  border-color: var(--pd-ok-line);
  color: var(--pd-ok-text);
  background-color: var(--pd-ok-bg);
}
.property__process .wb-chip--type {
  flex: 0 0 auto;
  border-color: transparent;
  color: var(--pd-surface);
  font-weight: 500;
  background-color: var(--pd-cat-artifact);
}
.property__process .wb-chip--type[data-category=event] {
  background-color: var(--pd-cat-event);
}
.property__process .wb-chip--type[data-category=task] {
  background-color: var(--pd-cat-task);
}
.property__process .wb-chip--type[data-category=callActivity] {
  background-color: var(--pd-cat-call-activity);
}
.property__process .wb-chip--type[data-category=gateway] {
  background-color: var(--pd-cat-gateway);
}
.property__process .wb-chip--type[data-category=connector] {
  background-color: var(--pd-edge);
}
.property__process .wb-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.property__process .wb-panel .properties-group-title {
  margin: 0.375rem 0 0;
  padding: 0.3125rem 1rem;
  border: 0;
  border-top: 0.0625rem solid var(--pd-line);
  border-bottom: 0.0625rem solid var(--pd-line);
  background-color: var(--pd-band);
  color: var(--pd-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.property__process .wb-panel .properties {
  padding: 0.4375rem 1rem;
  border-bottom: 0.0625rem solid var(--pd-line);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.property__process .wb-panel .properties.last {
  padding-bottom: 0.4375rem;
  border-bottom-color: var(--pd-line);
}
.property__process .wb-panel .properties:focus-within {
  background-color: var(--pd-surface);
  box-shadow: inset 0.1875rem 0 0 var(--pd-blue);
}
.property__process .wb-panel .properties .properties-title {
  color: var(--pd-text-2);
  font-size: 0.71875rem;
}
.property__process .wb-panel .process-info-main {
  margin: 0.75rem 1rem;
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-hero {
  padding: 0.75rem 1rem;
  margin-bottom: 0.625rem;
  border-radius: 0.375rem;
  background: var(--pd-navy);
  box-shadow: none;
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-hero__label {
  font-size: 0.75rem;
  opacity: 0.8;
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-hero__value {
  font-size: 1.5rem;
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-cards {
  gap: 0.375rem;
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-card {
  padding: 0.5rem 0.625rem;
  border-radius: 0.25rem;
  border-color: var(--pd-line-2);
}
.property__process .wb-panel .process-info-main .process-info-dashboard .process-info-subtitle {
  margin-top: 0.875rem;
  color: var(--pd-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.header__designer .btn__ic {
  border-radius: 0.375rem;
  background-color: #3B4158;
}
.header__designer .btn__ic [class*=ic-] {
  background: #C1C7D9;
}
.header__designer .btn__ic:hover [class*=ic-] {
  background: #FFFFFF;
}
.header__designer .btn__ic:focus:not(:focus-visible) {
  outline: 0;
  background-color: #3B4158;
}
.header__designer .btn__ic:focus:not(:focus-visible) [class*=ic-] {
  background: #C1C7D9;
}
.header__designer .btn__ic:focus-visible {
  outline: 0.125rem solid var(--pd-blue);
  outline-offset: 0.0625rem;
}
.header__designer .btn__ic.active, .header__designer .btn__ic.active:focus:not(:focus-visible) {
  background-color: var(--pd-ok);
}
.header__designer .btn__ic.active [class*=ic-], .header__designer .btn__ic.active:hover [class*=ic-], .header__designer .btn__ic.active:focus:not(:focus-visible) [class*=ic-], .header__designer .btn__ic.active:focus:not(:focus-visible):hover [class*=ic-] {
  background: #FFFFFF;
}
.header__designer .btn__ic:disabled, .header__designer .btn__ic.disabled {
  background-color: #3B4158;
  cursor: not-allowed;
}
.header__designer .btn__ic:disabled [class*=ic-], .header__designer .btn__ic.disabled [class*=ic-] {
  background: #767E9C;
}
.header__designer .header__btn__list {
  width: auto;
  min-width: 20rem;
}
.header__designer .pd-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.header__designer .pd-toolbar-divider {
  display: inline-block;
  width: 0.0625rem;
  height: 1.125rem;
  margin: 0 0.25rem;
  background-color: #4D536F;
}
.header__designer .pd-toolbar-btn {
  display: inline-flex;
}
.header__designer .pd-toolbar-btn.is-disabled {
  cursor: not-allowed;
}
.header__designer .pd-toolbar-btn .btn__ic:disabled {
  pointer-events: none;
}
.header__designer .pd-toolbar-seg {
  display: inline-flex;
}
.header__designer .pd-toolbar-seg .btn__ic {
  border-radius: 0;
}
.header__designer .pd-toolbar-seg .pd-toolbar-btn:first-child .btn__ic {
  border-radius: 0.375rem 0 0 0.375rem;
}
.header__designer .pd-toolbar-seg .pd-toolbar-btn:last-child .btn__ic {
  border-radius: 0 0.375rem 0.375rem 0;
  border-left: 0.0625rem solid #2B2F42;
}
.header__designer .designer-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
  min-width: 0;
}
.header__designer .designer-title {
  max-width: 28rem;
  overflow: hidden;
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header__designer #designerName {
  font-family: "IBM Plex Mono", "Consolas", "D2Coding", monospace;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
.header__designer .designer-heading #designerName {
  color: #A4ACC4;
  font-family: inherit;
  font-size: 0.625rem;
  letter-spacing: normal;
  line-height: 1rem;
}
.header__designer .designer-meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  white-space: nowrap;
}
.header__designer .designer-meta > * {
  display: inline-flex;
  align-items: center;
  height: 1rem;
  font-size: 0.625rem;
  line-height: 1rem;
}
.header__designer .designer-heading .fd-save-status {
  display: inline-flex;
  align-items: center;
  margin-right: 0;
  font-size: inherit;
  line-height: inherit;
}
.header__designer .fd-save-status__sep {
  margin-right: 0.375rem;
  color: #767E9C;
  font-weight: 400;
}
.header__designer .fd-save-status.is-dirty {
  color: var(--pd-warn);
}

.palette__element {
  background-color: var(--pd-rail);
  border-right: 0.0625rem solid var(--pd-line-2);
}
.palette__element .element-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0.25rem 0.5rem 0;
  border-radius: 0.375rem;
  border-color: var(--pd-line-2);
  background-color: var(--pd-surface);
}
.palette__element .element-icon:hover {
  border-color: var(--pd-text-3);
  background-color: var(--pd-surface-2);
}
.palette__element .element-icon [class*=ic-] {
  width: 1.5rem;
  height: 1.5rem;
  -webkit-mask-size: 1.5rem;
  mask-size: 1.5rem;
}
.palette__element .element-icon.connector.selected,
.palette__element .element-icon.move-icon.selected,
.palette__element .element-icon.zoom-icon.selected {
  border-color: var(--pd-navy);
  background-color: var(--pd-navy);
}
.palette__element .element-icon.connector.selected [class*=ic-], .palette__element .element-icon.connector.selected:hover [class*=ic-],
.palette__element .element-icon.move-icon.selected [class*=ic-],
.palette__element .element-icon.move-icon.selected:hover [class*=ic-],
.palette__element .element-icon.zoom-icon.selected [class*=ic-],
.palette__element .element-icon.zoom-icon.selected:hover [class*=ic-] {
  background: var(--pd-surface);
}
.palette__element .element-icon.shape.group::before,
.palette__element .element-icon.connector::before {
  background-color: var(--pd-line-2);
}

.process__layer .drawing-board .sim-panel {
  border-left-width: 0.0625rem;
  border-color: var(--pd-line-2);
  box-shadow: 0 0.375rem 1.125rem 0 rgba(var(--pd-shadow-rgb), 0.12);
}
.process__layer .drawing-board .sim-panel__header {
  margin: -0.75rem -0.75rem 0.5rem;
  padding: 0.5625rem 0.75rem;
  border-bottom: 0;
  border-radius: 0.375rem 0.375rem 0 0;
  background-color: var(--pd-navy);
}
.process__layer .drawing-board .sim-panel__icon {
  background-color: var(--pd-surface);
}
.process__layer .drawing-board .sim-panel__title {
  color: var(--pd-surface);
  font-size: 0.875rem;
  font-weight: 700;
}
.process__layer .drawing-board .sim-panel__close span {
  background-color: rgba(255, 255, 255, 0.7);
}
.process__layer .drawing-board .sim-panel__close:hover span {
  background-color: var(--pd-surface);
}
.process__layer .drawing-board .sim-panel__awaiting {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.625rem;
  border-left: 0;
  border-top: 0.0625rem solid var(--pd-line);
  border-bottom: 0.0625rem solid var(--pd-line);
  background-color: var(--pd-ok-bg);
}
.process__layer .drawing-board .sim-panel__awaiting-title {
  color: var(--pd-ok-text);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.process__layer .drawing-board .sim-panel__summary-progress-fill {
  background-color: var(--pd-ok);
}
.process__layer .drawing-board .sim-panel__log-order {
  font-variant-numeric: tabular-nums;
}

.process__layer .drawing-board .sim-panel__controls .btn__ic--box--s {
  flex: 1 1 0;
  justify-content: center;
  gap: 0.25rem;
  border: 0.0625rem solid var(--pd-line-2);
  border-radius: 0.25rem;
  background-color: var(--pd-surface);
  color: var(--pd-muted);
}
.process__layer .drawing-board .sim-panel__controls .btn__ic--box--s:disabled {
  color: var(--pd-text-3);
}
.process__layer .drawing-board .sim-panel__controls .btn__ic--box--s:not(:disabled):hover {
  border-color: var(--pd-text-3);
  background-color: var(--pd-surface-2);
}
.process__layer .drawing-board .sim-panel__sample-title {
  color: var(--pd-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.process__layer .drawing-board .sim-panel__log {
  border-top-color: var(--pd-line);
}
.process__layer .drawing-board .sim-panel__log-row {
  gap: 0.5rem;
  padding: 0.25rem 0.25rem;
}
.process__layer .drawing-board .sim-panel__log-row::before {
  display: none;
}
.process__layer .drawing-board .sim-panel__log-row::after {
  content: "✓";
  margin-left: auto;
  color: var(--pd-ok);
  font-size: 0.75rem;
  font-weight: 700;
}
.process__layer .drawing-board .sim-panel__log-row.is-current {
  color: var(--pd-ink);
  font-weight: 700;
  background-color: transparent;
}
.process__layer .drawing-board .sim-panel__log-row.is-current::after {
  content: "●";
  font-size: 0.5rem;
}
.process__layer .drawing-board .sim-panel__log-dot {
  display: none;
}
.process__layer .drawing-board .sim-panel__log-order {
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  background-color: var(--pd-band);
  color: var(--pd-text-2);
  font-size: 0.625rem;
  line-height: 1.125rem;
  text-align: center;
}
.process__layer .drawing-board .sim-panel__summary:not(:empty) {
  border-top-color: var(--pd-line);
}
.process__layer .drawing-board .sim-panel__summary-count-label {
  color: var(--pd-text-2);
}
.process__layer .drawing-board .sim-panel__summary-count-value {
  color: var(--pd-ink);
  font-variant-numeric: tabular-nums;
}

.process__layer .drawing-board .sim-panel__awaiting {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.375rem;
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__awaiting-title,
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__awaiting-note {
  flex: 1 0 100%;
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__choice.btn__ic--box--s {
  border: 0;
  border-radius: 0.25rem;
  padding: 0.1875rem 0.625rem;
  background-color: var(--pd-navy-2);
  color: var(--pd-navy-text);
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__choice.btn__ic--box--s:hover {
  background-color: var(--pd-navy-line);
  color: var(--pd-navy-text);
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__choice.btn__ic--box--s:focus-visible {
  outline: 0.125rem solid var(--pd-blue);
  outline-offset: 0.0625rem;
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__choice.btn__ic--box--s:first-of-type {
  background-color: var(--pd-ok);
  color: #FFFFFF;
}
.process__layer .drawing-board .sim-panel__awaiting .sim-panel__choice.btn__ic--box--s:first-of-type:hover {
  background-color: var(--pd-ok-text);
  color: #FFFFFF;
}

.header__designer .btn__ic:enabled.active, .header__designer .btn__ic:enabled.active:focus, .header__designer .btn__ic:enabled.active:hover {
  background-color: var(--pd-ok);
  color: #FFFFFF;
  opacity: 1;
}
.header__designer .btn__ic:enabled.active [class*=ic-], .header__designer .btn__ic:enabled.active:focus [class*=ic-], .header__designer .btn__ic:enabled.active:hover [class*=ic-] {
  background: #FFFFFF;
}

.process__layer .drawing-board .sim-panel__awaiting:not(:empty) {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.625rem;
  border: 0;
  border-radius: 0.25rem;
  background-color: var(--pd-ok-bg);
}
.process__layer .drawing-board .sim-panel__log {
  overflow-x: hidden;
}
.process__layer .drawing-board .sim-panel__log-row.is-current {
  background-color: var(--pd-ok-bg);
}
.process__layer .drawing-board .sim-panel__summary.has-warning .sim-panel__summary-progress-fill {
  background-color: var(--pd-warn);
}
.process__layer .drawing-board .sim-panel__summary-result.failed, .process__layer .drawing-board .sim-panel__summary-count-value.failed {
  color: var(--pd-warn-text);
}
.process__layer .drawing-board .sim-panel__summary-warn {
  color: var(--pd-warn-text);
}
.process__layer .drawing-board .sim-panel__summary-warn [class*=ic-] {
  background: var(--pd-warn);
}

.property__process .wb-panel .addon-buttons__wrap {
  display: inline-flex;
  align-items: stretch;
  gap: 0.375rem;
  vertical-align: top;
}
.property__process .wb-panel .addon-buttons__wrap .addon-buttons__chips {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 1.875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 0.0625rem solid var(--pd-line-2);
  border-radius: 0.25rem;
  background-color: var(--pd-surface-2);
}
.property__process .wb-panel .addon-buttons__wrap .addon-buttons__empty {
  color: var(--pd-text-3);
  font-size: 0.75rem;
}
.property__process .wb-panel .addon-buttons__wrap .addon-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.property__process .wb-panel .addon-buttons__wrap .addon-buttons__settings {
  flex: 0 0 auto;
}
.property__process .wb-panel .addon-buttons__wrap.readonly .addon-buttons__chips {
  background-color: var(--pd-band);
}

/* ──────────────────────────────────────────────
   폼 디자이너 React 팔레트 · 드래그 앤 드롭 (fd-*)
   ────────────────────────────────────────────── */
.fd-palette-search {
  margin-top: 0.625rem;
}
.fd-palette-search input {
  width: 100%;
  height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--pd-line-2);
  border-radius: 0.4375rem;
  background-color: var(--pd-surface);
  color: var(--pd-ink);
  font-size: 0.75rem;
}
.fd-palette-search input:focus {
  border-color: var(--pd-blue);
  outline: none;
}
.fd-palette-search input::placeholder {
  color: var(--pd-text-3);
}

.fd-palette-empty {
  grid-column: 1/-1;
  flex: 1 0 100%;
  width: 100%;
  padding: 0.75rem 0.5rem;
  color: var(--pd-text-3);
  font-size: 0.75rem;
  text-align: center;
}

body.fd-dragging {
  user-select: none;
  cursor: grabbing;
}

.fd-drag-ghost {
  position: fixed;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1.5px solid var(--pd-blue);
  border-radius: 0.5rem;
  background-color: var(--pd-surface);
  color: var(--pd-blue);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -120%) rotate(-3deg);
  box-shadow: 0 8px 22px rgba(31, 91, 255, 0.28);
}
.fd-drag-ghost > span[class^=ic-] {
  flex: none;
  background-color: var(--pd-blue);
}

.fd-drop-ind {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  --fd-ind-color: var(--pd-blue);
}
.fd-drop-ind--template {
  --fd-ind-color: var(--pd-cat-call-activity);
}
.fd-drop-ind--invalid {
  --fd-ind-color: var(--pd-warn);
}
.fd-drop-ind .fd-drop-ind__line {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background-color: var(--fd-ind-color);
  box-shadow: 0 0 8px var(--fd-ind-color);
}
.fd-drop-ind .fd-drop-ind__chip {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  margin-top: -0.375rem;
  padding: 0.1875rem 0.6875rem;
  border-radius: 1.25rem;
  background-color: var(--fd-ind-color);
  color: #FFFFFF;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}
.fd-drop-ind--v .fd-drop-ind__chip {
  top: -0.25rem;
}
.fd-drop-ind--h .fd-drop-ind__chip {
  top: -0.25rem;
}

.fd-move-src {
  opacity: 0.35;
}

#reactProcessCanvas {
  isolation: isolate;
}
#reactProcessCanvas .react-flow__pane.draggable,
#reactProcessCanvas .react-flow__node.draggable,
#reactProcessCanvas .react-flow__nodesselection-rect {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23FFFFFF' stroke='%231B2432' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.2 14.5L7.2 7.3A1.4 1.4 0 0 1 10 7.3L10 5.9A1.4 1.4 0 0 1 12.8 5.9L12.8 6.3A1.4 1.4 0 0 1 15.6 6.3L15.6 7.9A1.4 1.4 0 0 1 18.4 7.9L18.4 13.6C18.4 17.1 16.1 19.5 12.9 19.5C10.3 19.5 8.6 18.4 7.5 16.5L4.7 12.6A1.35 1.35 0 0 1 6.9 11.0Z'/%3E%3Cpath fill='none' d='M10 8v3.2M12.8 6.6v4.6M15.6 8.4v3.2'/%3E%3C/g%3E%3C/svg%3E") 12 11, grab;
}
#reactProcessCanvas .react-flow__pane.dragging,
#reactProcessCanvas .react-flow__node.draggable.dragging {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cg fill='%23FFFFFF' stroke='%231B2432' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 14.6L7 12A1.4 1.4 0 0 1 9.8 12L9.8 11.6A1.4 1.4 0 0 1 12.6 11.6L12.6 11.8A1.4 1.4 0 0 1 15.4 11.8L15.4 12.4A1.4 1.4 0 0 1 18.2 12.4L18.2 14.6C18.2 17.7 16.1 19.7 13 19.7C9.9 19.7 7 17.9 7 14.6Z'/%3E%3Cpath fill='none' d='M9.8 12.2v1.4M12.6 11.9v1.6M15.4 12.5v1.3'/%3E%3Crect x='6.7' y='13.6' width='5' height='2.7' rx='1.35'/%3E%3C/g%3E%3C/svg%3E") 12 13, grabbing;
}

.drawing-board.react-designer .component__context > .context-menu {
  display: none !important;
}

.drawing-board.react-designer[data-display-mode] .component__context[data-context-type=form] {
  padding-bottom: 0.75rem;
}
.drawing-board.react-designer[data-display-mode] .component[data-component-type=form] {
  min-height: 12rem;
}

.fd-toolbar {
  position: fixed;
  z-index: 998;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  border-radius: 0.4375rem;
  background-color: var(--pd-navy);
  box-shadow: 0 4px 14px rgba(13, 21, 36, 0.35);
  white-space: nowrap;
}
.fd-toolbar.fd-toolbar--above {
  transform: translateY(-100%);
}
.fd-toolbar .fd-toolbar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.3125rem;
  border: none;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
}
.fd-toolbar .fd-toolbar__btn span[class^=ic-] {
  background-color: var(--pd-navy-text);
}
.fd-toolbar .fd-toolbar__btn:hover {
  background-color: rgba(255, 255, 255, 0.14);
}
.fd-toolbar .fd-toolbar__btn.on {
  background-color: var(--pd-blue);
}
.fd-toolbar .fd-toolbar__btn:focus-visible {
  outline: 2px solid var(--pd-blue);
  outline-offset: 1px;
}
.fd-toolbar .fd-toolbar__glyph {
  color: var(--pd-navy-text);
  font-size: 0.75rem;
  line-height: 1;
}
.fd-toolbar .fd-toolbar__sep {
  width: 1px;
  height: 0.875rem;
  background-color: rgba(255, 255, 255, 0.18);
  margin: 0 3px;
}
.fd-toolbar .fd-toolbar__chip {
  font-size: 0.625rem;
  color: var(--pd-text-3);
  padding: 0 6px;
}
.fd-toolbar .ic-swap--rotate-left {
  transform: rotate(-90deg);
}
.fd-toolbar .ic-swap--rotate-right {
  transform: rotate(90deg);
}
.fd-toolbar::after {
  content: "";
  position: absolute;
  left: 0.875rem;
  border: 0.3125rem solid transparent;
}
.fd-toolbar.fd-toolbar--above::after {
  top: 100%;
  border-top-color: var(--pd-navy);
}
.fd-toolbar:not(.fd-toolbar--above)::after {
  bottom: 100%;
  border-bottom-color: var(--pd-navy);
}

.fd-resize-handle {
  position: fixed;
  z-index: 997;
  width: 14px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-resize-handle .bar {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background-color: transparent;
  transition: background-color 0.12s ease;
}
.fd-resize-handle:hover .bar {
  background-color: var(--pd-blue);
}

.fd-resize-tip {
  position: fixed;
  z-index: 1000;
  transform: translate(-50%, -100%);
  background-color: var(--pd-navy);
  color: var(--pd-navy-text);
  font-size: 0.625rem;
  padding: 2px 8px;
  border-radius: 0.3125rem;
  pointer-events: none;
  white-space: nowrap;
}

.fd-label-input {
  position: fixed;
  z-index: 1000;
  border: none;
  outline: none;
  border-bottom: 2px solid var(--pd-blue);
  border-radius: 3px 3px 0 0;
  padding: 0 4px;
  background-color: var(--pd-blue-soft);
  color: var(--pd-ink);
}

.drawing-board.react-designer .component__context[data-context-type=group] .accordion__label .accordion__title {
  pointer-events: auto;
  cursor: text;
}

.fd-quick {
  margin: 0.625rem 0.625rem 0.25rem;
  padding: 0.5rem 0.8125rem 0.8125rem;
  border: 1px solid var(--pd-line-2);
  border-radius: 0.625rem;
  background-color: var(--pd-surface);
}
.fd-quick .fd-quick__title {
  margin-bottom: 0.125rem;
  color: var(--pd-blue);
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.fd-quick > .property {
  width: 100%;
  flex-basis: auto;
}

.fd-group-count {
  margin-left: auto;
  padding: 0 0.4375rem;
  border-radius: 1.25rem;
  background-color: var(--pd-band);
  color: var(--pd-text-2);
  font-size: 0.625rem;
  line-height: 1.6;
}

#reactComponentPalette.fd-palette-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 2.5rem);
  padding: 0.75rem 0.75rem 0;
}
#reactComponentPalette.fd-palette-root .fd-palette-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 0.75rem;
}
#reactComponentPalette.fd-palette-root .fd-palette-list::-webkit-scrollbar {
  display: none;
}

.fd-palette-tabs {
  display: flex;
  gap: 0.125rem;
  margin-bottom: 0.5rem;
  padding: 0.1875rem;
  border-radius: 0.5rem;
  background-color: var(--pd-band);
}

.fd-palette-tab {
  flex: 1 1 0;
  padding: 0.375rem 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--pd-text-2);
  font-size: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.fd-palette-tab:not(.is-on):hover {
  color: var(--pd-ink);
}
.fd-palette-tab.is-on {
  background-color: var(--pd-navy);
  color: var(--pd-surface);
  font-weight: 700;
}
.fd-palette-tab:focus-visible {
  outline: 0.125rem solid var(--pd-blue);
  outline-offset: -0.125rem;
}

#reactComponentPalette .palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.375rem;
}
#reactComponentPalette .palette__item {
  width: auto;
  min-width: 0;
  height: auto;
  flex-direction: column;
  justify-content: center;
  gap: 0.1875rem;
  padding: 0.5rem 0.375rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 500;
}
#reactComponentPalette .palette__item > span[class^=ic-],
#reactComponentPalette .palette__item > span[class*=" ic-"] {
  width: 1.125rem;
  height: 1.125rem;
  -webkit-mask-size: contain;
  mask-size: contain;
  background-color: var(--pd-blue);
}
#reactComponentPalette .palette__item > .text__ellipsis {
  margin-left: 0;
  max-width: 100%;
}
#reactComponentPalette .palette__item:focus-visible {
  outline: none;
  border-color: var(--pd-blue);
  box-shadow: 0 0 0 0.0625rem var(--pd-blue) inset;
}

.fd-palette-filter {
  margin-top: 0;
}
.fd-palette-filter:empty {
  display: none;
}

#reactProcessCanvas .pd-handle {
  border: 0.125rem solid var(--pd-blue);
  background: var(--pd-surface);
}
#reactProcessCanvas .pd-handle--out {
  background: var(--pd-blue);
}
#reactProcessCanvas .pd-handle.connectingfrom {
  box-shadow: 0 0 0 0.25rem rgba(31, 91, 255, 0.25);
}
#reactProcessCanvas .pd-handle.valid {
  border-color: var(--pd-ok);
  background: var(--pd-ok);
  box-shadow: 0 0 0 0.25rem rgba(31, 164, 99, 0.25);
}
#reactProcessCanvas .react-flow__connection.valid .react-flow__connection-path {
  stroke: var(--pd-ok);
}
#reactProcessCanvas .react-flow__connection.invalid .react-flow__connection-path {
  stroke: var(--color-red-050);
  stroke-dasharray: 4 3;
}

.pd-addon-table .col-check {
  width: 3%;
}
.pd-addon-table .col-name {
  width: 11%;
}
.pd-addon-table .col-id {
  width: 9%;
}
.pd-addon-table .col-exec {
  width: 34%;
}
.pd-addon-table .col-type {
  width: 12%;
}
.pd-addon-table .col-value {
  width: 22%;
}
.pd-addon-table .col-color {
  width: 14%;
}
.pd-addon-table .col-order-group {
  width: 11%;
}
.pd-addon-table .col-align {
  width: 6%;
}
.pd-addon-table .col-order {
  width: 5%;
}
.pd-addon-table .col-opinion-group {
  width: 12%;
}
.pd-addon-table .col-comment,
.pd-addon-table .col-required,
.pd-addon-table .col-use {
  width: 6%;
}
.pd-addon-table .col-value__select {
  width: 100%;
}
.pd-addon-table .col-value__input {
  width: 86%;
}

.pd-mapping-table .col-check {
  width: 10%;
}
.pd-mapping-table .col-main {
  width: 90%;
}

.pd-approver-table .col-move {
  width: 4rem;
}
.pd-approver-table .col-order {
  width: 15%;
}
.pd-approver-table .col-remove {
  width: 2.5rem;
}

.pd-approver-actions {
  gap: 0.5rem;
}

.drawing-board.react-designer .component__context.selected {
  border-style: solid;
  box-shadow: 0 0 0 1px var(--pd-blue) inset;
  background-color: var(--pd-blue-soft);
}

#panel.react-designer {
  padding: 0.25rem 0.625rem 0.625rem;
}
#panel.react-designer > .group__property {
  margin-bottom: 0.5rem;
  border: 1px solid var(--pd-line);
  border-radius: 0.5625rem;
  background-color: var(--pd-surface);
  overflow: hidden;
}
#panel.react-designer > .group__property:last-of-type {
  margin-bottom: 0;
}
#panel.react-designer > .group__property > .collapse__label {
  height: auto;
  margin-bottom: 0;
  padding: 0.5625rem 0.8125rem;
  border-bottom: 1px solid transparent;
  font-size: 0.8125rem;
}
#panel.react-designer > .group__property > input[type=checkbox]:checked + .collapse__label {
  border-bottom-color: var(--pd-line);
}
#panel.react-designer > .group__property > input[type=checkbox]:checked ~ .collapse__content {
  padding: 0.25rem 0.8125rem 0.75rem;
}
#panel.react-designer .label__property {
  font-size: 0.8125rem;
  margin: 0.5rem 0 0.125rem 0;
  padding: 0 0 0.5rem 0;
}

.fd-row-handle {
  position: fixed;
  z-index: 996;
  width: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: grab;
}
.fd-row-handle .bar {
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--pd-blue);
  opacity: 0.35;
  transition: opacity 0.12s ease;
}
.fd-row-handle:hover .bar {
  opacity: 1;
}

.fd-save-status {
  margin-right: 0.375rem;
  color: #8C94B0;
  font-size: 0.75rem;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.fd-save-status.is-flash {
  color: var(--pd-ok);
  font-weight: 700;
}

.fd-panel-tip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.5rem 0.75rem;
  border-top: 0.0625rem solid var(--pd-line);
  background-color: var(--pd-surface-2);
  color: var(--pd-text-2);
  font-size: 0.6875rem;
  line-height: 1.5;
}

.property__layer.property__form:has(.fd-panel-tip) .property__inner {
  padding-bottom: 2.75rem;
}

.fd-canvas-hint {
  position: fixed;
  z-index: 2;
  transform: translateX(-50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  text-align: center;
}
.fd-canvas-hint b {
  color: var(--pd-muted);
  font-size: 0.875rem;
}
.fd-canvas-hint span {
  color: var(--pd-text-3);
  font-size: 0.75rem;
}

.fd-canvas-help {
  max-width: 60rem;
  margin: 1rem auto 0.75rem;
}
.fd-canvas-help .fd-canvas-help__group {
  margin: 0.5rem 0 0.25rem;
  color: var(--pd-blue);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.fd-canvas-help .fd-canvas-help__list {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.fd-canvas-help .fd-canvas-help__list li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--pd-text-2);
}
.fd-canvas-help .fd-canvas-help__gesture {
  flex: none;
  padding: 0.0625rem 0.4375rem;
  border-radius: 0.25rem;
  background-color: var(--pd-band);
  color: var(--pd-ink);
  font-size: 0.6875rem;
  font-weight: 500;
}

#reactQuickProps .property .property__label,
#reactQuickProps .property .property__label__text,
#reactQuickProps .property .btn__toggle__switch__label,
#panel.react-designer .property .property__label,
#panel.react-designer .property .property__label__text,
#panel.react-designer .property .btn__toggle__switch__label {
  font-size: 0.75rem;
}
#reactQuickProps .property input[type=text],
#reactQuickProps .property input[type=number],
#panel.react-designer .property input[type=text],
#panel.react-designer .property input[type=number] {
  height: 2rem;
  font-size: 0.8125rem;
}
#reactQuickProps .property textarea,
#reactQuickProps .property select,
#panel.react-designer .property textarea,
#panel.react-designer .property select {
  font-size: 0.8125rem;
}
#reactQuickProps .property .select__box,
#panel.react-designer .property .select__box {
  min-height: 2rem;
  font-size: 0.8125rem;
}

.detail__inner #reactComponentPalette.fd-palette-root {
  height: auto;
  flex: 1;
  min-height: 0;
  padding: 0.625rem 0.75rem 0;
}

.fd-panel-host {
  position: relative;
}
.fd-panel-host:has(.fd-panel-tip) .property__inner {
  padding-bottom: 2.75rem;
}

/*
 * @file layout/_document.scss
 * @description document에서 사용되는 scss
 * @version 1.0
 */
:root {
  --approval-line-color: var(--color-gray-040);
  --approval-bg-title: var(--color-gray-010);
  --approval-bg-header: var(--color-gray-005);
  --approval-bg-cell: var(--color-gray-000);
}

.document__layer .stepper__layer {
  height: 92px;
  padding: 0 !important;
}
.document__layer .form__layer {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0.5rem;
  scrollbar-width: none;
}
.document__layer .form__layer::-webkit-scrollbar {
  display: none;
}

.panel__layer {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 27.25rem;
  padding: 0.5rem;
  overflow-y: auto;
}
.panel__layer .info__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.75rem;
  color: var(--text-color);
}
.panel__layer .info__inner .document-labeling {
  cursor: pointer;
}
.panel__layer .info__inner .document-labeling.active .document-labeling-icon {
  fill: #0066FF;
  stroke: #0052F7;
}
.panel__layer .info__inner .document-star {
  cursor: pointer;
}
.panel__layer .info__inner .document-star.active .document-star-icon {
  fill: #FADF2D;
  stroke: #D7BC20;
}
.panel__layer .info__inner .info__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-color);
}
.panel__layer .info__inner .info__detail {
  display: flex;
  flex-direction: row;
}
.panel__layer .info__inner .info__detail .field__label {
  width: 5.75rem;
}
.panel__layer .info__inner .info__detail .document-assignee {
  max-width: 18.75rem;
  padding: 0.375rem;
}
.panel__layer .info__inner .info__detail .document-assignee:hover {
  background: var(--color-gray-003);
  border-radius: 0.875rem;
}
.panel__layer .info__inner .info__detail .document-assignee .assignee {
  line-height: 1;
}
.panel__layer .info__inner .info__detail .document-assignee .assignee-organization {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-gray-070);
  line-height: 1;
}
.panel__layer .info__inner .info__detail .document-assignee .assignee-type-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-blue-050);
  line-height: 1;
}
.panel__layer .info__inner .horizontal-bar {
  margin: 0;
}
.panel__layer .history__inner, .panel__layer .reference__inner {
  padding: 0.75rem;
}
.panel__layer .history__inner .panel__empty, .panel__layer .reference__inner .panel__empty {
  width: 100%;
  height: 2.625rem;
  gap: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: flex;
  justify-content: center;
  background-color: var(--bg-color-readonly);
}
.panel__layer .history__inner .panel__empty .text, .panel__layer .reference__inner .panel__empty .text {
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--text-color-readonly);
}
.panel__layer .history__inner .user__box, .panel__layer .reference__inner .user__box {
  position: relative;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.188rem;
  background-color: var(--color-gray-000);
  overflow-x: hidden;
}
.panel__layer .history__inner .user__box .delete__btn, .panel__layer .reference__inner .user__box .delete__btn {
  color: var(--color-gray-000) !important;
}
.panel__layer .history__inner .user__box a:hover, .panel__layer .reference__inner .user__box a:hover {
  background: var(--color-gray-003);
}
.panel__layer .history__inner .user__box a:hover .delete__btn, .panel__layer .reference__inner .user__box a:hover .delete__btn {
  display: block;
}
.panel__layer .history__inner .user__box__section, .panel__layer .reference__inner .user__box__section {
  gap: 0.5rem;
  padding: 0.75rem;
}
.panel__layer .history__inner .user__box__section .user__content, .panel__layer .reference__inner .user__box__section .user__content {
  flex: 1;
  gap: 8px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  font-size: 0.75rem;
}
.panel__layer .history__inner .user__box__section .user__content__info, .panel__layer .reference__inner .user__box__section .user__content__info {
  font-size: 0.75rem;
}
.panel__layer .history__inner .user__box__section .user__content__info .date-time, .panel__layer .reference__inner .user__box__section .user__content__info .date-time {
  color: var(--color-gray-050);
}
.panel__layer .history__inner .user__box .delete__btn, .panel__layer .reference__inner .user__box .delete__btn {
  position: absolute;
  top: 0.625rem;
  right: 0.5rem;
  display: none;
}

.anchor__layer {
  top: 10rem;
}

.container__print {
  height: inherit;
  overflow-y: auto;
}
.container__print * {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}
.container__print .document__section {
  justify-self: center;
}
.container__print .print {
  justify-self: center;
  padding: 0.75rem 0;
}
.container__print .print__approval {
  justify-self: center;
  border-top: 0.0625rem solid var(--approval-line-color);
  border-left: 0.0625rem solid var(--approval-line-color);
  border-radius: 0.188rem;
  overflow: hidden;
  display: block;
  width: 60rem !important;
}
.container__print .print__approval__table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border: none;
  font-size: 0.75rem;
  text-align: center;
  table-layout: auto;
}
.container__print .print__approval__table th,
.container__print .print__approval__table td {
  border-right: 0.0625rem solid var(--approval-line-color);
  border-bottom: 0.0625rem solid var(--approval-line-color);
  padding: 0.375rem 0.75rem;
  color: var(--text-color);
  vertical-align: middle;
  overflow-wrap: break-word;
  word-break: normal;
}
.container__print .print__approval__col--step {
  width: 14%;
}
.container__print .print__approval__col--type {
  width: 13%;
}
.container__print .print__approval__col--position {
  width: 9%;
}
.container__print .print__approval__col--approver {
  width: 15%;
}
.container__print .print__approval__col--comment {
  width: 16%;
}
.container__print .print__approval__col--result {
  width: 20%;
}
.container__print .print__approval__col--date {
  width: 13%;
}
.container__print .print__approval__title {
  background-color: var(--approval-bg-title);
  font-weight: 700;
}
.container__print .print__approval__label {
  vertical-align: middle;
  background-color: var(--approval-bg-header);
  font-weight: 700;
  white-space: normal;
  text-align: center;
}
.container__print .print__approval__cell {
  background-color: var(--approval-bg-cell);
  text-align: left;
}
.container__print .print__approval__cell--comment {
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.container__print .print__approval__task {
  background-color: var(--approval-bg-header);
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  white-space: normal;
}
.container__print .print__footer {
  justify-self: center;
  padding-bottom: 2.5rem;
}

@page {
  size: A4;
  margin: 0;
}
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  html, body {
    width: 210mm;
    height: 297mm;
    margin: 0;
    padding: 0;
  }

  .wrapper,
.popup,
.container__print {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .document__section,
.document__layer,
.form__layer,
.drawing-board {
    display: block !important;
    break-inside: avoid;
    /* 페이지가 중간에 나누어지지 않도록 */
    page-break-inside: avoid;
    /* 페이지가 중간에 나누어지지 않도록 */
  }
  .document__section .component[data-component-type=form],
.document__layer .component[data-component-type=form],
.form__layer .component[data-component-type=form],
.drawing-board .component[data-component-type=form] {
    width: 100% !important;
    max-width: 190mm;
    margin: 0 auto;
  }
  .document__section .component[data-component-type=row],
.document__layer .component[data-component-type=row],
.form__layer .component[data-component-type=row],
.drawing-board .component[data-component-type=row] {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .container__print .print__approval {
    width: 100% !important;
    max-width: 190mm;
    margin: 0 auto;
  }
  .container__print .print__approval__table {
    width: 100% !important;
  }

  .print__footer {
    max-width: 190mm;
    position: static !important;
    margin-top: 10mm;
  }
}
/*
 * @file layout/_auth.scss
 * @description 로그인 or 회원가입 등 인증 관련 scss
 * @version 1.0
 */
.container__auth {
  max-width: 120rem;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  margin: 0;
  max-width: none;
}
.container__auth .login {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--layout-bg-gradient-color1), var(--layout-bg-gradient-color1)), linear-gradient(180deg, var(--layout-bg-gradient-color1) 0%, var(--layout-bg-gradient-color2) 100%);
  padding: 1.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .login {
    padding: 0;
  }
}
.container__auth .login .login__content {
  display: flex;
  flex-direction: row;
  max-width: 62.5rem;
  width: 100%;
  height: 40.625rem;
  border-radius: 0.563rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .container__auth .login .login__content {
    border-radius: 0;
    height: 100%;
    max-width: none;
  }
}
.container__auth .login .login__left {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--section-bg-color);
}
@media screen and (max-width: 767px) {
  .container__auth .login .login__left {
    display: none;
  }
}
.container__auth .login .login__left img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.container__auth .login .login__right {
  flex: 1 0 auto;
  display: flex;
  width: 31.25rem;
  flex-direction: column;
  justify-content: center;
  background: var(--section-bg-color);
  padding: 0 6.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .login .login__right {
    padding: 0 3.125rem;
  }
}
@media screen and (max-width: 480px) {
  .container__auth .login .login__right {
    padding: 0 1.563rem;
  }
}
.container__auth .login .login__right .login__tenant_logo {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 9.063rem;
  margin-bottom: 1.25rem;
}
.container__auth .login .login__right .login__tenant_logo img {
  max-width: 100%;
  max-height: 100%;
}
.container__auth .login .login__right .login__logo {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}
.container__auth .login .login__right .login__options {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  /* 첫 번째를 제외한 버튼 앞에 선 추가 */
}
.container__auth .login .login__right .login__options:has(> *) {
  margin-top: 0.75rem;
}
.container__auth .login .login__right .login__options a {
  position: relative;
  padding: 0 0.938rem;
}
.container__auth .login .login__right .login__options a:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  width: 0.063rem;
  height: 1rem;
  background-color: var(--h-bar-color-1);
  margin-right: 0.938rem;
}
.container__auth .login .login__right .login__divider {
  position: relative;
  text-align: center;
  margin: 1.25rem 0;
}
.container__auth .login .login__right .login__divider::before, .container__auth .login .login__right .login__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 3rem);
  height: 0.063rem;
  background-color: var(--h-bar-color-1);
}
.container__auth .login .login__right .login__divider::before {
  left: 0;
}
.container__auth .login .login__right .login__divider::after {
  right: 0;
}
.container__auth .login__lang {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.container__auth .login__lang a {
  position: relative;
  padding: 0 0.75rem;
  color: var(--copyright-color);
  font-size: 0.625rem;
  text-decoration: none;
}
.container__auth .login__lang a.active {
  color: var(--text-color);
  font-weight: 700;
}
.container__auth .login__lang a:not(:first-child)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  content: "";
  width: 0.063rem;
  height: 0.75rem;
  background-color: var(--h-bar-color-1);
}
.container__auth .signup {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--layout-bg-gradient-color1), var(--layout-bg-gradient-color1)), linear-gradient(180deg, var(--layout-bg-gradient-color1) 0%, var(--layout-bg-gradient-color2) 100%);
  padding: 1.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .signup {
    padding: 0;
  }
}
.container__auth .signup .signup__content {
  display: flex;
  flex-direction: row;
  max-width: 62.5rem;
  width: 100%;
  height: 40.625rem;
  border-radius: 0.563rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .container__auth .signup .signup__content {
    border-radius: 0;
    height: 100%;
    max-width: none;
  }
}
.container__auth .signup .signup__left {
  flex: 1 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: var(--section-bg-color);
}
@media screen and (max-width: 767px) {
  .container__auth .signup .signup__left {
    display: none;
  }
}
.container__auth .signup .signup__left img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.container__auth .signup .signup__right {
  flex: 1 0 auto;
  display: flex;
  width: 31.25rem;
  flex-direction: column;
  justify-content: center;
  background: var(--section-bg-color);
  padding: 0 6.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .signup .signup__right {
    padding: 0 3.125rem;
  }
}
@media screen and (max-width: 480px) {
  .container__auth .signup .signup__right {
    padding: 0 1.563rem;
  }
}
.container__auth .signup .signup__right .signup__logo {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}
.container__auth .find-id,
.container__auth .find-password {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--layout-bg-gradient-color1), var(--layout-bg-gradient-color1)), linear-gradient(180deg, var(--layout-bg-gradient-color1) 0%, var(--layout-bg-gradient-color2) 100%);
  padding: 1.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .find-id,
.container__auth .find-password {
    padding: 0;
  }
}
.container__auth .find-id__content,
.container__auth .find-password__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 31.25rem;
  width: 100%;
  height: 40.625rem;
  border-radius: 0.563rem;
  overflow: hidden;
  background: var(--section-bg-color);
  padding: 0 6.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .find-id__content,
.container__auth .find-password__content {
    border-radius: 0;
    height: 100%;
    max-width: none;
    padding: 0 3.125rem;
  }
}
@media screen and (max-width: 480px) {
  .container__auth .find-id__content,
.container__auth .find-password__content {
    padding: 0 1.563rem;
  }
}
.container__auth .find-id__content .find__logo,
.container__auth .find-password__content .find__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.container__auth .signup-done,
.container__auth .send-done {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, var(--layout-bg-gradient-color1), var(--layout-bg-gradient-color1)), linear-gradient(180deg, var(--layout-bg-gradient-color1) 0%, var(--layout-bg-gradient-color2) 100%);
  padding: 1.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .signup-done,
.container__auth .send-done {
    padding: 0;
  }
}
.container__auth .signup-done__content,
.container__auth .send-done__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 31.25rem;
  width: 100%;
  height: 40.625rem;
  border-radius: 0.563rem;
  overflow: hidden;
  background: var(--section-bg-color);
  padding: 0 6.25rem;
}
@media screen and (max-width: 767px) {
  .container__auth .signup-done__content,
.container__auth .send-done__content {
    border-radius: 0;
    height: 100%;
    max-width: none;
    padding: 0 3.125rem;
  }
}
@media screen and (max-width: 480px) {
  .container__auth .signup-done__content,
.container__auth .send-done__content {
    padding: 0 1.563rem;
  }
}
.container__auth .signup-done__content .find__logo,
.container__auth .send-done__content .find__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2.5rem;
}
.container__auth .signup-done__content .email__box,
.container__auth .send-done__content .email__box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 58px;
  border-radius: 0.563rem;
  background-color: var(--bg-color);
  padding: 1.25rem;
}
.container__auth .copyright {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  color: var(--copyright-color);
  font-size: 0.625rem;
  font-weight: 400;
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  .container__auth .copyright {
    bottom: 1rem;
  }
}

.auth-form {
  width: 31.25rem;
  height: 40.625rem;
  margin: auto;
  transform: translateY(-1.875rem);
  background: var(--section-bg-color);
  border-radius: 0.563rem;
}
.auth-form .container {
  padding: 2rem;
}
.auth-form .container .auth-img {
  width: 6.75rem;
  height: 6.75rem;
}
.auth-form .container .auth-guidance {
  color: var(--message-color);
  font-size: 0.875rem;
  line-height: 130%;
}
.auth-form .container .input-icon__r {
  width: 18.75rem;
}
.auth-form .container .auth-btn {
  width: 18.75rem;
  max-width: 100%;
}
.auth-form .container .auth-btn .btn__text--box {
  width: 100%;
}

.modal--password-update-notice label {
  line-height: 1.375rem;
}
.modal--password-update-notice .password__notice label {
  line-height: 0.875rem;
}
.modal--password-update-notice .password__notice label span {
  display: inline-block;
}

/*
 * @file layout/_portal.scss
 * @description portal에서 사용되는 scss
 * @version 1.0
 *
 * 테마를 사용하지 않음
 */
.container__portal {
  max-width: 120rem;
  margin: 0 auto;
  width: 100%;
  height: 100vh;
  margin: 0;
  max-width: none;
  display: flex;
}

.browser-guide__content .browser-box {
  width: 22.5rem;
  height: 22.5rem;
}

.vertical-split-left .i-logo-white {
  position: relative;
  top: 5rem;
  left: 5rem;
}
.vertical-split-left .i-logo {
  position: relative;
  top: -59.1875rem;
  margin: 5rem 0 0 5rem;
}
.vertical-split-left.session-background {
  background-image: url("../media/images/session/img_session_main.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-color: var(--color-blue-000);
}
.vertical-split-left.error-background {
  background-image: url("../media/images/error/img_error_caution.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-color: var(--color-blue-000);
}
.vertical-split-left.email-certificate-check-background {
  background-image: url("../media/images/email/img_email_certificate_check.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-color: var(--color-blue-000);
}
.vertical-split-left.email-certificate-complete-background {
  background-image: url("../media/images/email/img_email_certificate_complete.svg");
  background-size: auto;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-color: var(--color-blue-000);
}

.vertical-split-left,
.vertical-split-right {
  width: 50%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vertical-split-left .error-form,
.vertical-split-right .error-form {
  width: 38.75rem;
}
.vertical-split-left .error-form .error-code,
.vertical-split-right .error-form .error-code {
  font-weight: 900;
  font-size: 3.75rem;
  color: var(--color-gray-090);
  line-height: 100%;
}
.vertical-split-left .error-form .error-title,
.vertical-split-right .error-form .error-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-gray-090);
  line-height: 130%;
}
.vertical-split-left .error-form .error-message,
.vertical-split-right .error-form .error-message {
  color: var(--color-blue-050);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 130%;
  max-width: 100%;
  width: 100%;
  min-width: 0;
}
.vertical-split-left .error-form .error-message span,
.vertical-split-right .error-form .error-message span {
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 130%;
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vertical-split-left .error-form .error-guidance,
.vertical-split-right .error-form .error-guidance {
  color: var(--color-gray-070);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 130%;
}
.vertical-split-left .error-form .error-contact,
.vertical-split-right .error-form .error-contact {
  width: 18.75rem;
  max-width: 100%;
  background: var(--color-gray-005);
  border-radius: 0.563rem;
}
.vertical-split-left .error-form .error-btn,
.vertical-split-right .error-form .error-btn {
  width: 18.75rem;
  max-width: 100%;
}
.vertical-split-left .error-form .error-btn .btn__text--box,
.vertical-split-right .error-form .error-btn .btn__text--box {
  width: 100%;
}
.vertical-split-left .session-form,
.vertical-split-right .session-form {
  width: 38.75rem;
}
.vertical-split-left .session-form .session-title,
.vertical-split-right .session-form .session-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-gray-090);
  line-height: 130%;
}
.vertical-split-left .session-form .session-title .count,
.vertical-split-right .session-form .session-title .count {
  color: #0066FF;
}
.vertical-split-left .session-form .session-btn,
.vertical-split-right .session-form .session-btn {
  width: 18.75rem;
  max-width: 100%;
}
.vertical-split-left .session-form .session-btn .btn__text--box,
.vertical-split-right .session-form .session-btn .btn__text--box {
  width: 100%;
}
.vertical-split-left .email-certificate-form,
.vertical-split-right .email-certificate-form {
  width: 38.75rem;
}
.vertical-split-left .email-certificate-form .email-certificate-title,
.vertical-split-right .email-certificate-form .email-certificate-title {
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-gray-090);
  line-height: 130%;
}
.vertical-split-left .email-certificate-form .email-certificate-guidance,
.vertical-split-right .email-certificate-form .email-certificate-guidance {
  color: var(--color-gray-070);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 130%;
}
.vertical-split-left .email-certificate-form .email-certificate-btn,
.vertical-split-right .email-certificate-form .email-certificate-btn {
  width: 18.75rem;
  max-width: 100%;
}
.vertical-split-left .email-certificate-form .email-certificate-btn .btn__text--box,
.vertical-split-right .email-certificate-form .email-certificate-btn .btn__text--box {
  width: 100%;
}

@media screen and (max-width: 767px) {
  .vertical-split-left {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .vertical-split-right {
    width: 100%;
  }
}

.portal-container label {
  display: inline-block;
  margin: 1rem 0 0.5rem 0;
}
.portal-container summary {
  cursor: pointer;
}
.portal-container summary:focus {
  outline: none;
}
.portal-container .tbl__body {
  display: block;
}
.portal-container .tbl__body tr {
  display: table;
  width: 100%;
  min-height: 2.688rem;
  table-layout: fixed;
}
.portal-container .tbl.card-table tr {
  height: 2.5rem;
}

/*
 * portal-container - header : 상단
 *                  - main : 메인 (스크롤바)
 *                         - main-banner : 배너, 인사말
 *                         - main-header : 메인 상단 (FAQ, 자료실, 공지사항 메인 상단)
 *                         - main-search : 검색 영역
 *                         - main-content : 내용, 검색 결과 영역
 */
.portal-container {
  max-width: 120rem;
  margin: 0 auto;
  overflow: auto;
  width: 100vw;
  height: 100vh;
}
.portal-container .header {
  position: fixed;
  top: 0;
  width: 100%;
  align-items: center;
  max-width: 120rem;
  height: 3.125rem;
  padding: 0 1.25rem;
  background-color: #0066FF;
  color: var(--color-gray-000);
  font-size: 1.125rem;
  font-weight: 500;
}
.portal-container .header .ci {
  padding-top: 0.625rem;
}
.portal-container .header .name {
  padding: 0 0.9375rem;
  font-size: 1.125rem;
}
.portal-container .header + .container__portal {
  height: calc(100vh - 3.125rem);
  margin-top: 3.125rem;
  /* 헤더 높이만큼 아래 */
}
.portal-container .main {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: auto;
  max-width: 120rem;
  margin: 0 auto;
}
.portal-container .main .main-content {
  height: 100%;
  overflow: auto;
}
.portal-container .main .main-content .main-header {
  border-bottom: 0.0625rem solid var(--color-gray-030);
  padding: 0 13.75rem 0 13.75rem;
  background-color: var(--color-gray-050);
}
.portal-container .main .main-content .main-header .page-title {
  padding: 2.5rem 0;
}
.portal-container .main .main-content .main-header .page-search .search__form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: end;
  column-gap: 0.25rem;
  margin: auto 0;
}
.portal-container .main .main-content .main-header .page-search .text__message {
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--color-gray-060);
}
.portal-container .main .main-content .list-content {
  padding: 1.5rem 13.75rem 0 13.75rem;
}
.portal-container .main .main-content .list-content .tbl {
  position: relative;
  border: none;
}
.portal-container .main .main-content .list-content + .pagination {
  padding: 0 13.75rem 1.875rem 13.75rem;
}
.portal-container .main .main-content .main-accordion {
  margin: 3.375rem 13.75rem 0 13.75rem;
}

/*
 * @file layout/_report.scss
 * @description report에서 사용되는 scss
 * @version 1.0
 */
.report-wrapper {
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  right: calc((100vw - 120rem) / 2);
  left: calc((100vw - 120rem) / 2);
  max-width: 120rem;
  margin: 0.5cm auto;
  overflow-y: auto;
}
.report-wrapper::-webkit-scrollbar {
  display: none;
}

.report {
  margin: 1cm auto;
}
.report .report-main .report-main-header {
  line-height: 1.2;
  margin: 0 0 10mm 0;
  font-size: 2.25rem;
  font-weight: bold;
}
.report .report-main .report-area .drawing-board {
  width: 45.625rem;
  margin: 0 auto;
}
.report .report-main .report-area .drawing-board .chart-content {
  margin: 0 0 1.25rem 0;
}
.report .report-main .report-area .drawing-board .chart-content .chart {
  padding: 0.75rem 0 0 0;
}
.report .report-main .report-area .form {
  box-shadow: none;
}
.report .report-main .report-area .form input, .report .report-main .report-area .form textarea, .report .report-main .report-area .form button, .report .report-main .report-area .form select,
.report .report-main .report-area .form .dropzone, .report .report-main .report-area .form .ql-toolbar,
.report .report-main .report-area .form label.radio, .report .report-main .report-area .form label.checkbox {
  pointer-events: none;
}

.chart-content {
  padding: 0.9375rem 2.5rem;
  background-color: var(--color-gray-050);
}

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
  }

  .report {
    width: initial;
    min-height: initial;
    margin: 0;
    padding: 0mm 20mm;
    border: initial;
    border-radius: initial;
    background: initial;
    box-shadow: initial;
    page-break-after: always;
  }
  .report .report-main-header {
    margin: 0 0 10mm 0;
  }
  .report .form {
    box-shadow: none;
  }
}
/*
 * Patch execution page styles.
 */
.patch-workspace {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  width: min(73.75rem, 100%);
  height: 100%;
  min-height: 0;
}

.patch-progress-column {
  flex: 0 0 16.25rem;
  min-width: 0;
  align-self: flex-start;
}

.patch-content-column {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  align-self: stretch;
  min-height: 0;
}

.patch-action-bar {
  flex: 0 0 auto;
}

.patch-content-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#patchScrollLayer {
  overflow: hidden;
}

#patchStepperLayer {
  background: var(--color-gray-000);
  border: 0.0625rem solid var(--color-gray-010);
}

.patch-progress {
  width: 100%;
  padding: 0.875rem 0.375rem 1.125rem;
}

.patch-progress__track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.patch-progress__track::before {
  content: "";
  position: absolute;
  top: 2rem;
  bottom: 2rem;
  left: 1.375rem;
  width: 0.125rem;
  background: var(--color-gray-010);
  display: none;
}

.patch-progress__bar {
  position: absolute;
  top: 2rem;
  left: 1.375rem;
  width: 0.125rem;
  height: var(--data-progress, 0%);
  max-height: calc(100% - 4rem);
  background: #229E4B;
  transition: height 300ms ease;
  display: none;
}

.patch-progress__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-rows: 2rem auto;
  align-items: start;
  column-gap: 0.75rem;
  width: 100%;
  min-height: 4.5rem;
  padding: 0.5rem 0.5rem 0.75rem;
  border-radius: 0.5rem;
  min-width: 0;
  color: #9EA1A7;
  cursor: pointer;
  font-size: 0.9375rem;
  font-weight: 500;
}

.patch-progress__step::after {
  content: "";
  position: absolute;
  top: 3.125rem;
  bottom: 0.125rem;
  left: 1.4375rem;
  width: 0.125rem;
  background: var(--color-gray-010);
  z-index: 1;
}

.patch-progress__step:last-child::after {
  display: none;
}

.patch-progress__step:hover {
  background: transparent;
}

.patch-progress__step:hover::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 3.25rem;
  border-radius: 0.5rem;
  background: var(--color-blue-000);
  z-index: 0;
}

.patch-progress__marker {
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  grid-row: 1/span 2;
  grid-column: 1;
  width: 2rem;
  height: 2rem;
  margin-left: 0;
  margin-top: 0;
  border: 0.0625rem solid #E6E7EA;
  border-radius: 50%;
  background: #E6E7EA;
  color: #9EA1A7;
  font-size: 0.9375rem;
  font-weight: 700;
}

.patch-progress__label {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  flex: 1 1 auto;
  max-width: 100%;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.patch-progress__message {
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  min-width: 0;
  max-width: 100%;
  color: #777D87;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.125rem;
}

.patch-progress__step--done,
.patch-progress__step--active {
  color: #22252D;
  font-weight: 700;
}

.patch-progress__step--active {
  background: transparent;
}

.patch-progress__step--done .patch-progress__marker {
  border-color: #229E4B;
  background: #229E4B;
  color: var(--color-gray-000);
  font-size: 0;
}

.patch-progress__step--done::after {
  background: #229E4B;
}

.patch-progress__step--done .patch-progress__marker::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-gray-000);
  mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
}

.patch-progress__step--active .patch-progress__marker {
  border-color: #1F5FDB;
  background: #1F5FDB;
  color: var(--color-gray-000);
  box-shadow: 0 0 0 0.125rem var(--color-gray-000), 0 0 0 0.1875rem #1F5FDB;
}

.patch-progress__step--failed .patch-progress__marker {
  border-color: #F04452;
  background: #F04452;
  color: var(--color-gray-000);
  font-size: 0;
  box-shadow: none;
}

.patch-progress__step--failed .patch-progress__marker::after {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: var(--color-gray-000);
  mask: url("/assets/media/icons/common/icon_close.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_close.svg") no-repeat center/contain;
}

.patch-progress__step .badge {
  display: none;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-left: 0 !important;
  max-width: 100%;
}

.patch-description {
  display: block;
  min-height: 3.75rem;
  max-height: 6rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.25rem;
  padding-top: 0.5rem;
}

.patch-description-cell {
  vertical-align: top;
}

.patch-note-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.patch-note-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(43, 47, 66, 0.35);
}

.patch-note-modal__dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  width: min(52.5rem, 100vw - 3rem);
  max-height: calc(100vh - 5rem);
  transform: translate(-50%, -50%);
  background: var(--color-gray-000);
}

.patch-note-modal__header {
  display: flex;
  align-items: center;
  padding: 0.875rem 1rem;
  border-bottom: 0.0625rem solid var(--color-gray-010);
}

.patch-note-modal__title {
  margin: 0;
  color: var(--color-gray-090);
  font-size: 1rem;
  font-weight: 700;
}

.patch-note-modal__content {
  margin: 0;
  padding: 1rem;
  max-height: min(38.75rem, 100vh - 13.75rem);
  overflow: auto;
  color: var(--color-gray-090);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}

.patch-markdown-viewer {
  max-height: min(38.75rem, 100vh - 13.75rem);
  overflow: auto;
  padding: 1.125rem 1.25rem;
  color: var(--color-gray-090);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.patch-markdown-viewer h1,
.patch-markdown-viewer h2,
.patch-markdown-viewer h3 {
  margin: 1.125rem 0 0.625rem;
  color: var(--color-gray-090);
  font-weight: 700;
}

.patch-markdown-viewer h1 {
  font-size: 1.25rem;
}

.patch-markdown-viewer h2 {
  font-size: 1.0625rem;
}

.patch-markdown-viewer h3 {
  font-size: 0.9375rem;
}

.patch-markdown-viewer p {
  margin: 0.375rem 0;
}

.patch-markdown-viewer ul {
  margin: 0.375rem 0 0.625rem 1.25rem;
  padding: 0;
}

.patch-markdown-viewer pre {
  margin: 0.625rem 0;
  padding: 0.75rem;
  overflow: auto;
  border: 0.0625rem solid var(--color-gray-010);
  background: #F8F9FC;
  font-family: Consolas, Monaco, monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

.patch-markdown-viewer table {
  width: 100%;
  margin: 0.625rem 0;
  border-collapse: collapse;
}

.patch-markdown-viewer th,
.patch-markdown-viewer td {
  padding: 0.5rem 0.625rem;
  border: 0.0625rem solid var(--color-gray-010);
  text-align: left;
  vertical-align: top;
}

.patch-markdown-viewer th {
  background: #F8F9FC;
  font-weight: 700;
}

.patch-backup-log-modal {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.patch-backup-log-modal__title {
  margin: 0 0 0.5rem;
  color: var(--color-gray-090);
  font-size: 0.9375rem;
  font-weight: 700;
}

.patch-backup-log-modal__scroll {
  max-height: 22.5rem;
  overflow: auto;
}

.patch-manifest-modal__content {
  min-height: 13.75rem;
  width: 100%;
  padding: 0.75rem;
  resize: none;
  color: var(--color-gray-090);
  font-family: Consolas, Monaco, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre;
}

.patch-file-view-button .ic-file-json {
  background-image: url("/assets/media/icons/fileUploader/icon_document_json.svg") !important;
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

.patch-file-view-button .ic-file-etc {
  background-image: url("/assets/media/icons/fileUploader/icon_document_etc.svg") !important;
  background-size: 1.875rem;
  background-repeat: no-repeat;
  background-position: center;
}

.patch-apply-progress {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 0.75rem 0.25rem 0.25rem;
}

.patch-apply-progress__bar {
  position: relative;
  width: 100%;
  height: 0.875rem;
  overflow: hidden;
  border-radius: 0.4375rem;
  background: var(--color-gray-010);
}

.patch-apply-progress__value {
  width: 0;
  height: 100%;
  border-radius: 0.4375rem;
  background: #00A656;
  transition: width 120ms linear;
}

.patch-apply-progress__percent {
  text-align: center;
  color: var(--color-gray-090);
  font-size: 0.8125rem;
  font-weight: 700;
}

.patch-apply-progress__message {
  min-height: 1.25rem;
  text-align: center;
  color: var(--color-gray-070);
  font-size: 0.8125rem;
  opacity: 1;
  transition: opacity 240ms ease;
}

.patch-apply-progress__message.is-changing {
  opacity: 0;
}

.patch-state-banner {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 4rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid #B8E2C9;
  border-radius: 0.25rem;
  background: #F5FFF9;
}

.patch-state-banner--blue {
  border-color: #B8D4FF;
  background: #F6FAFF;
}

.patch-state-banner__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.375rem;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 50%;
  color: var(--color-gray-000);
  background: #229E4B;
}

.patch-state-banner__icon > span {
  display: none;
}

.patch-state-banner__icon::after {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--color-gray-000);
  mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
}

.patch-state-banner--blue .patch-state-banner__icon {
  background: #229E4B;
}

.patch-state-banner__title {
  display: block;
  color: #15803D;
  font-size: 0.875rem;
  font-weight: 700;
}

.patch-state-banner--blue .patch-state-banner__title {
  color: #225CC7;
}

.patch-state-banner--red {
  border-color: #F5C7C7;
  background: #FFFAFA;
}

.patch-state-banner--red .patch-state-banner__icon {
  background: #F04452;
}

.patch-state-banner--red .patch-state-banner__icon::after {
  mask: url("/assets/media/icons/common/icon_error.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_error.svg") no-repeat center/contain;
}

.patch-state-banner--red .patch-state-banner__title {
  color: #DE3412;
}

.patch-state-banner__meta {
  display: block;
  margin-top: 0.375rem;
  color: var(--color-gray-090);
  font-size: 0.8125rem;
  font-weight: 700;
}

.patch-state-banner__text {
  display: block;
  margin-top: 0.25rem;
  color: var(--color-gray-090);
  font-size: 0.8125rem;
}

.patch-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1.125rem;
}

.patch-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
}

.patch-summary-groups {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: 0.875rem;
}

.patch-summary-group {
  padding: 0.75rem 0.875rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.375rem;
}

.patch-summary-group__title {
  margin-bottom: 0.625rem;
  color: var(--color-gray-070);
  font-size: 0.75rem;
  font-weight: 700;
}

.patch-summary-group__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.875rem;
}

.patch-summary-group--db .patch-summary-group__cards {
  grid-template-columns: minmax(0, 1fr);
}

.patch-summary-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-height: 5.125rem;
  padding: 1rem;
  border: 0.0625rem solid #D6E4FF;
  border-radius: 0.25rem;
  background: #FBFDFF;
}

.patch-summary-card--button {
  cursor: pointer;
}

.patch-summary-card--button:hover {
  border-color: #8BA7E8;
  background: #F7FAFF;
}

.patch-summary-card--green {
  border-color: #CDEBD8;
  background: #FBFFFC;
}

.patch-summary-card--yellow {
  border-color: #F5D99C;
  background: #FFFDF7;
}

.patch-summary-card--purple {
  border-color: #DFCFF6;
  background: #FEFBFF;
}

.patch-summary-card--red {
  border-color: #F5C7C7;
  background: #FFFAFA;
}

.patch-summary-card--gray {
  border-color: var(--color-gray-010);
  background: var(--color-gray-000);
}

.patch-summary-card--primary {
  border-color: #D6E8FF;
  background: #F5FBFF;
}

.patch-summary-card--primary .patch-summary-card__label {
  color: var(--color-blue-050);
  /*font-weight: 500;*/
}

.patch-summary-card--primary .patch-summary-card__icon {
  background: #E7F3FF;
  color: var(--color-blue-050);
}

.patch-summary-card--success {
  border-color: #DDEFE1;
  background: #F7FCF8;
}

.patch-summary-card--success .patch-summary-card__label {
  color: var(--color-vivid-green-060);
  /*font-weight: 500;*/
}

.patch-summary-card--success .patch-summary-card__icon {
  background: #EBF7EE;
  color: var(--color-vivid-green-060);
}

.patch-summary-card--warning {
  border-color: #FFEBD0;
  background: #FFFCF7;
}

.patch-summary-card--warning .patch-summary-card__label {
  color: #FF850A;
  /*font-weight: 500;*/
}

.patch-summary-card--warning .patch-summary-card__icon {
  background: #FFF3DE;
  color: #FF850A;
}

.patch-summary-card--danger {
  border-color: #FADDD8;
  background: #FFF8F6;
}

.patch-summary-card--danger .patch-summary-card__label {
  color: #DE3412;
  /*font-weight: 500;*/
}

.patch-summary-card--danger .patch-summary-card__icon {
  background: #FCEAE7;
  color: #DE3412;
}

.patch-summary-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 2.875rem;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: 50%;
  background: #EAF2FF;
  color: #225CC7;
}

.patch-summary-card__icon > span {
  display: inline-block;
  background: currentColor;
}

.patch-summary-card__label {
  color: var(--color-gray-070);
  font-size: 0.8125rem;
}

.patch-summary-card__value {
  margin-top: 0.375rem;
  color: #111827;
  font-size: 1.5rem;
  line-height: 1;
}

.patch-summary-card__unit {
  margin-left: 0.25rem;
  color: var(--color-gray-070);
  font-size: 0.8125rem;
  font-weight: 400;
  vertical-align: baseline;
}

.patch-summary-card__value--text {
  font-size: 0.8125rem;
  line-height: 1.125rem;
}

.patch-note-lines {
  color: var(--color-gray-070);
  font-size: 0.8125rem;
  line-height: 1.6;
}

.patch-required-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.patch-required-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.625rem 0.75rem;
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.25rem;
  background: var(--color-gray-000);
}

.patch-required-item__status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #E8F6EC;
  color: var(--color-vivid-green-060);
}

.patch-required-item__status::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_check.svg") no-repeat center/contain;
}

.patch-required-item--invalid .patch-required-item__status {
  background: #FCEAE7;
  color: #DE3412;
}

.patch-required-item--invalid .patch-required-item__status::after {
  content: "";
  width: 0.875rem;
  height: 0.875rem;
  background-color: currentColor;
  mask: url("/assets/media/icons/common/icon_close.svg") no-repeat center/contain;
  -webkit-mask: url("/assets/media/icons/common/icon_close.svg") no-repeat center/contain;
}

.patch-required-item__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.25rem;
}

.patch-required-item__title {
  color: var(--color-gray-090);
  font-size: 0.8125rem;
  font-weight: 500;
}

.patch-required-item__message {
  color: var(--color-gray-070);
  font-size: 0.75rem;
}

.patch-required-item__actions {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  gap: 0.25rem;
}

.patch-basic-card {
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: 0.875rem 1rem;
  border: 0.0625rem solid #eee;
  border-radius: 0.25rem;
  background: #fafafa;
}

.patch-basic-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  gap: 0.375rem;
}

.patch-basic-card__name {
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 500;
}

.patch-basic-card__description {
  display: block;
  color: var(--color-gray-070);
  font-size: 0.75rem;
  line-height: 1.125rem;
}

.patch-batch-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.patch-batch-card {
  border: 0.0625rem solid var(--color-gray-010);
  border-radius: 0.375rem;
  background: var(--color-gray-000);
  overflow: hidden;
}

.patch-batch-card--skip {
  opacity: 0.6;
}
.patch-batch-card--skip .patch-batch-card__header {
  border-bottom: none;
  padding: 0.5rem 0.875rem;
  background: var(--color-gray-005);
}
.patch-batch-card--skip .patch-batch-card__title {
  font-weight: 400;
  color: var(--color-gray-060);
}

.patch-batch-card__header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  background: var(--color-gray-000);
  border-bottom: 0.0625rem solid var(--color-gray-010);
}

.patch-batch-card__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-gray-090);
  font-size: 0.875rem;
  font-weight: 700;
}

.patch-batch-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.875rem;
}

.patch-batch-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.patch-result-message {
  overflow-y: auto;
  max-height: 18.75rem;
  resize: vertical;
}

html[data-theme=default] .slider {
  --range-bg-color: var(--color-gray-020);
  --range-fill-color: #0066FF;
  --thumb-color: var(--color-gray-000);
  --thumb-color-hover: #0066FF;
  --thumb-color-focus: #B4D0FF;
  --thumb-color-active: #7AB0FF;
  --thumb-color-disabled: var(--color-gray-020);
  --thumb-line-color: var(--color-gray-030);
  --thumb-line-color-hover: #237CFF;
  --thumb-line-color-focus: #0066FF;
  --thumb-line-color-active: #0066FF;
  --thumb-line-color-disabled: var(--color-gray-030);
}
html[data-theme=default] .slider__range:disabled {
  --range-fill-color: var(--color-gray-030);
}
html[data-theme=dark] {
  --color-gray-000: #0D0E14;
  --color-gray-003: #101219;
  --color-gray-005: #14161F;
  --color-gray-010: #1B1E2A;
  --color-gray-015: #232634;
  --color-gray-020: #2A2E3F;
  --color-gray-030: #3A3F54;
  --color-gray-040: #4A506A;
  --color-gray-050: #5B627F;
  --color-gray-060: #6E7694;
  --color-gray-070: #838BAA;
  --color-gray-080: #A0A7BF;
  --color-gray-090: #BFC5D4;
  --color-gray-100: #DFE2EA;
  --color-gray-110: #FFFFFF;
  --color-blue-000: #1C2142;
  --color-blue-005: #202855;
  --color-blue-010: #212E68;
  --color-blue-015: #21347B;
  --color-blue-020: #1F3A8E;
  --color-blue-030: #1E45A9;
  --color-blue-040: #1D54C3;
  --color-blue-050: #1B66DE;
  --color-blue-060: #1B7DF9;
  --color-blue-070: #3B91FA;
  --color-blue-080: #5EA7FB;
  --color-blue-090: #84BEFC;
  --color-blue-100: #ABD5FD;
  --color-blue-110: #D2E9FE;
  --color-red-005: #271412;
  --color-red-010: #3B1914;
  --color-red-020: #5D2822;
  --color-red-030: #7E332B;
  --color-red-040: #AC4237;
  --color-red-050: #DF5644;
  --color-red-060: #EB6D5C;
  --color-red-070: #F48777;
  --color-red-080: #FAA598;
  --color-red-090: #FDCAC4;
  --color-orange-005: #251A12;
  --color-orange-010: #382319;
  --color-orange-020: #59341E;
  --color-orange-030: #7A4725;
  --color-orange-040: #A8612D;
  --color-orange-050: #E68A3A;
  --color-orange-060: #EE9C52;
  --color-orange-070: #F3B36F;
  --color-orange-080: #F8CA95;
  --color-orange-090: #FCE2C0;
  --color-vivid-green-005: #102014;
  --color-vivid-green-010: #14301A;
  --color-vivid-green-020: #1D4424;
  --color-vivid-green-030: #26602F;
  --color-vivid-green-040: #327D3B;
  --color-vivid-green-050: #4AB55C;
  --color-vivid-green-060: #64C178;
  --color-vivid-green-070: #7FD08E;
  --color-vivid-green-080: #A9E3B3;
  --color-vivid-green-090: #D0F0D6;
  --color-cyan-005: #0D2022;
  --color-cyan-010: #123033;
  --color-cyan-020: #16454A;
  --color-cyan-030: #1B6269;
  --color-cyan-040: #21818A;
  --color-cyan-050: #2FB7C4;
  --color-cyan-060: #47C5D1;
  --color-cyan-070: #6ED5DE;
  --color-cyan-080: #A2E8EE;
  --color-cyan-090: #D2F6F8;
  --color-yellow-005: #FEFDEB;
  --color-yellow-010: #FEFBD4;
  --color-yellow-020: #FEF6AB;
  --color-yellow-030: #FDF080;
  --color-yellow-040: #FBE961;
  --color-yellow-050: #FADF2D;
  --color-yellow-060: #D7BC20;
  --color-yellow-070: #B39A16;
  --color-yellow-080: #907A0E;
  --color-yellow-090: #776308;
  --color-green-010: #D8EEDD;
  --color-green-030: #7EC88E;
  --color-green-050: #228738;
  --color-green-070: #285D33;
  --color-green-090: #19391F;
  --color-system-blue-005: #E0F3FF;
  --color-system-blue-010: #D6EDFC;
  --color-system-blue-020: #AFD9F9;
  --color-system-blue-030: #7FBBF1;
  --color-system-blue-040: #5A9CE2;
  --color-system-blue-050: #2F81E9;
  --color-system-blue-060: #2559A8;
  --color-system-blue-070: #19428D;
  --color-system-blue-080: #102E71;
  --color-system-blue-090: #091F5E;
  --color-violet-005: #FBF0FE;
  --color-violet-010: #F6DFFE;
  --color-violet-020: #EAC0FD;
  --color-violet-030: #D89FF9;
  --color-violet-040: #C585F3;
  --color-violet-050: #A95EEB;
  --color-violet-060: #8444CA;
  --color-violet-070: #632FA9;
  --color-violet-080: #451D88;
  --color-violet-090: #301270;
  --color-pink-005: #FEF1F4;
  --color-pink-010: #FEE0E7;
  --color-pink-020: #FEC1D5;
  --color-pink-030: #FCA1C9;
  --color-pink-040: #FA89C6;
  --color-pink-050: #F763C1;
  --color-pink-060: #D448AF;
  --color-pink-070: #B1319C;
  --color-pink-080: #8F1F87;
  --color-pink-090: #731376;
  --color-indigo-005: #F1F5FE;
  --color-indigo-010: #E1E9FE;
  --color-indigo-020: #C3D2FE;
  --color-indigo-030: #A4BAFC;
  --color-indigo-040: #8DA5FA;
  --color-indigo-050: #6885F7;
  --color-indigo-060: #4C64D4;
  --color-indigo-070: #3448B1;
  --color-indigo-080: #21308F;
  --color-indigo-090: #131F76;
  --semantic-primary-base: #1B66DE;
  --semantic-primary-font: #FFFFFF;
  --semantic-primary-mix-base: black;
  --semantic-primary-overlay: 255, 255, 255;
  --semantic-error-base: #DF5644;
  --semantic-error-font: #FFFFFF;
  --semantic-error-mix-base: black;
  --semantic-error-overlay: 255, 255, 255;
  --elevation-color-1: rgba(74, 80, 106, 0.2);
  --elevation-color-2: rgba(74, 80, 106, 0.3);
  --elevation-color-3: rgba(74, 80, 106, 0.3);
  --elevation-color-4: rgba(74, 80, 106, 0.3);
  --text-color-placeholder: #2A2E3F;
  --bg-color: #1B1E2A;
  --bg-color-focus: #14161F;
  --bg-color-active: #14161F;
  --bg-color-readonly: #1B1E2A;
  --bg-color-disabled: #1B1E2A;
  --bg-color-error: #14161F;
  --line-color: #1B1E2A;
  --line-color-readonly: #1B1E2A;
  --line-color-disabled: #1B1E2A;
  --h-bar-color-1: #232634;
  --h-bar-color-2: #2A2E3F;
  --h-bar-color-3: #A0A7BF;
  --badge-fill-bg-gray: rgba(91, 98, 127, 0.2);
  --badge-fill-bg-blue: rgba(27, 102, 222, 0.2);
  --badge-fill-bg-orange: rgba(230, 138, 58, 0.2);
  --badge-fill-bg-green: rgba(74, 181, 92, 0.2);
  --badge-fill-bg-red: rgba(223, 86, 68, 0.2);
  --badge-fill-bg-cyan: rgba(47, 183, 196, 0.2);
  --badge-priority-bg-low: rgba(27, 102, 222, 0.2);
  --badge-priority-bg-medium: rgba(74, 181, 92, 0.2);
  --badge-priority-bg-high: rgba(223, 86, 68, 0.2);
  --badge-status-bg-saved: rgba(74, 181, 92, 0.2);
  --badge-status-bg-unsaved: rgba(223, 86, 68, 0.2);
  --badge-status-bg-pending: rgba(230, 138, 58, 0.2);
  --badge-status-bg-applied: rgba(74, 181, 92, 0.2);
  --stepper-bar-overlay: 0, 0, 0;
  --stepper-bar-standby-pattern: #14161F;
  --stepper-bar-standby-overlay: #14161F;
  --chart-bg-color: #1B1E2A;
  --container-bg-color: #1B1E2A;
  --header-bg-color: #232634;
  --content-bg-color: #232634;
  --content-line-color: #2A2E3F;
  --skeleton-bg-color: #232634;
  --skeleton-line-color: #2A2E3F;
  --grid-bg-color: #232634;
  --grid-header-bg-color: #1B1E2A;
  --grid-line-color: #2A2E3F;
}
html[data-theme=dark] .modal {
  --modal-backdrop-bg-color: rgba(20, 22, 31, 0.7);
}