@import "../mixins.scss";

.jet-ui_upload-button {
	cursor: pointer;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: $button-padding;
	font-size: $button-font-size;
	line-height: $button-line-height;
	font-weight: 500;
	color: $button-color-text;
	text-decoration: none;
	border: none;
	border-radius: $radius;
	box-sizing: border-box;
	background-color: $button-color-bg;
	box-shadow: 0px 4px 4px rgba(35, 40, 45, 0.24);
	transition: $transition;
	outline: none;

	&:hover {
		color: $button-color-text-hover;
		background-color: $button-color-bg-hover;
		box-shadow: none;
	}

	&--disabled,
	&--disabled:hover {
		cursor: not-allowed;
		background-color: $button-color-bg-disable;
		box-shadow: none;
	}

	&.state-loading,
	&.state-loaded {
		color: $button-color-text-hover;
		background-color: $button-color-bg-hover;
		box-shadow: none;
	}

	svg {
		margin-top: -2px;
		margin-right: 6px;

		path {
			fill: $button-color-text-hover;
		}
	}

	&.state-loading {
		svg {
			animation: rotation 3s infinite linear;
		}
	}
}

@keyframes rotation {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(359deg);
	}
}
