@import "~scss/_mixins";

.toast {
    position: fixed; left: 0px; top: 0px; border-radius: 8px; background: var(--color-control-accent); padding: 11px 16px; text-transform: none;
    @include text-common; color: var(--color-bg-primary); display: none; z-index: 2000; white-space: nowrap; transition-duration: 0.25s;
	transition-property: opacity, transform; transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); max-width: 50%;
}

.toast {
	.inner { display: flex; justify-content: space-between; gap: 0px 8px; }
}
.toast {
	.inner {
		.icon { width: 20px; height: 20px; }
		.icon.notice { background: url('~img/icon/toast/notice.svg'); }

		.message { display: flex; gap: 0px 4px; max-width: 100%; }
		.message {
			.chunk { @include text-overflow-nw; display: flex; align-items: center; gap: 0px 4px; }
			.chunk {
				.name { max-width: 140px; @include text-overflow-nw; }
			}

			span { @include text-overflow-nw; }

			b { font-weight: 500; }
		}

		.buttons { display: flex; gap: 0px 12px; margin-left: 32px; }
		.buttons {
			.button { 
				@include text-common; font-weight: 500; line-height: 20px; border: 0 solid; height: auto; padding: 0; background: none; color: var(--color-bg-primary); 
			}
			.button:hover { background-color: transparent; }
			.button:hover {
				.txt { text-decoration: underline; }
			}
		}
	}
}
