.container { width: 100%; height: 100%; position: relative; } .wrapper { width: 100%; height: 100vh; display: flex; justify-content: safe center; align-items: center; flex-direction: column; padding: 2rem; overflow-y: auto; } .error_message { font-size: 2rem; text-align: center; user-select: text; margin-bottom: 3.2rem; } .error_detail_container { display: flex; flex-direction: column; align-items: end; gap: 1rem; } .error_stack_container { max-height: 10rem; width: 100%; overflow-y: scroll; padding: 1rem; background-color: var(--dark_950_color); border-radius: 0.4rem; } .error_stack { font-size: 1rem; user-select: text; } .copy_error_message_button { // background-color: var(--dark_800_color); padding: 0.8rem 1rem; font-size: 1.4rem; display: flex; gap: 1rem; justify-content: center; align-items: center; border-radius: 0.4rem; background-color: var(--dark_825_color); &:hover { background-color: var(--dark_800_color); } &:active { background-color: var(--dark_850_color); } } .copy_svg { width: 1.4rem; color: var(--dark_500_color); } .check_mark_svg { width: 1.4rem; color: var(--primary_300_color); } .close_button_wrapper { position: absolute; top: 0; left: 100%; transform: translate(-50%, -50%) rotate(45deg); display: flex; justify-content: center; align-items: end; width: 68px; aspect-ratio: 1 / 1; background-color: var(--error_bc_color); & .x_mark_svg { color: var(--dark_200_color); } &:hover { & .x_mark_svg { transform: rotate(45deg); } } &:active { background-color: var(--error_bc_active_color); } transition: all 0.1s ease; } .close_button { // width: 100%; // height: 100%; } .x_mark_svg { width: 24px; transform: rotate(-45deg); color: var(--dark_700_color); transition: transform 0.3s ease; }