@use "mixins/mixins";
@use "./common/var";

@include mixins.b(rate) {
	height: var.$rate-height;
	line-height: 1;

	&:focus,
	&:active {
		outline-width: 0;
	}

	@include mixins.e(item) {
		display: inline-block;
		position: relative;
		font-size: 0;
		vertical-align: middle;
	}

	@include mixins.e(icon) {
		position: relative;
		display: inline-block;
		font-size: var.$rate-icon-size;
		margin-right: var.$rate-icon-margin;
		color: var.$rate-icon-color;
		transition: 0.3s;
		&.hover {
			transform: scale(1.15);
		}

		.path2 {
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	@include mixins.e(decimal) {
		position: absolute;
		top: 0;
		left: 0;
		display: inline-block;
		overflow: hidden;
	}

	@include mixins.e(text) {
		font-size: var.$rate-font-size;
		vertical-align: middle;
	}
}