@import "~scss/_mixins";

.button { 
	display: inline-flex; border: 0px; font-weight: 500; text-decoration: none; text-align: center;
	height: 40px; padding: 0px 16px; border-radius: 8px; transition: $transitionAllCommon;
	vertical-align: middle; position: relative; overflow: hidden; align-items: center; justify-content: center; 
	@include text-common; cursor: default; -webkit-app-region: no-drag;
}

.button > .loaderWrapper { 
	position: absolute !important; ; z-index: 1; width: 100% !important; ; height: 100% !important; ; border-radius: inherit !important; 
	background: none !important; 
}
.button.isLoading {
	.txt, .icon { display: none; }
}

.button.accent { background: var(--color-system-accent-100); color: var(--color-bg-primary); }
.button.accent:not(.disabled):hover, .button.accent:not(.disabled).hover { background: var(--color-system-accent-125); }
.button.accent {
	.loaderWrapper {
		.dots {
			.dot { border-color: var(--color-bg-primary); animation-name: dots-accent; }
		}
	}
}

.button.pink { background: #ff6a7b; color: var(--color-text-inversion); }
.button.pink:not(.disabled):hover { background: #e5374b; }

.button.black { background: var(--color-control-accent); color: var(--color-bg-primary); }
.button.black.disabled { opacity: 1; background-color: var(--color-shape-secondary); }
.button.black:not(.disabled):hover, .button.black:not(.disabled).hover { background: #41403d; }
.button.black {
	.arrow { background-image: url('~img/arrow/button/white.svg'); }

	.loaderWrapper {
		.dot { border-color: #fff; animation-name: dots-dark; }
	}
}

.button.red { color: var(--color-red); border: solid 1px var(--color-shape-primary); }
.button.red:not(.disabled):hover,
.button.red:not(.disabled).hover { background: var(--color-bg-red); border-color: #fcd1c3; }

.button.dark { background: var(--color-shape-highlight-light); color: var(--color-bg-primary); }
.button.dark:not(.disabled):hover,
.button.dark:not(.disabled).hover { background: rgba(0,0,0,0.4); }

.button.blank { background: none; border: solid 1px var(--color-shape-primary); font-weight: 400; }
.button.blank:not(.disabled) {
	&:hover, &.hover, &.active { background: var(--color-shape-highlight-medium); }
}

.button.c48 { @include text-paragraph; height: 48px; border-radius: 8px; padding: 0px 16px; }
.button.c36 { @include text-common; height: 36px; border-radius: 6px; padding: 0px 12px; }
.button.c32 { @include text-small; height: 32px; border-radius: 6px; padding: 0px 10px; }
.button.c28 { @include text-common; height: 28px; border-radius: 6px; padding: 0px 10px; }
.button.c16 { @include text-9; height: 16px; border-radius: 4px; padding: 0px 4px; }

input.button { line-height: 1; }

.button {
	.icon { margin-right: 6px; }
	.arrow { display: inline-block; width: 8px; height: 8px; margin: 0px 0px 0px 4px; }
}

.button.simple { 
	height: auto; padding: 0px; color: var(--color-control-active); font-weight: bold; line-height: 1.43; letter-spacing: 0.1px; 
	border: unset; border-radius: unset; 
}
.button.simple:hover, .button.simple.hover { color: var(--color-text-primary) !important; background: none !important; }

.button.payment { height: 22px; border-radius: 11px; @include text-small; }