@import "../../style/animation.scss";
@import "../../style/border.scss";
@import "../../style/colors.scss";
@import "../../style/media.scss";

.Item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.Item-buttons {
	display: flex;
	align-items: center;
	transition: opacity $short-duration, visibility $short-duration;
}

.Item-buttons-hidden {
	@extend .Item-buttons;

	opacity: 0;
	visibility: hidden;

	@include smartphone {
		opacity: 1;
		visibility: visible;
	}
}

.Item-button {
	color: $black;
	font-size: 1.5em;
	display: flex;
	margin-right: 0.1em;
	transition: color $instant-duration, transform $instant-duration;
	cursor: pointer;

	&:last-child {
		margin-right: 0;
	}

	&:hover {
		color: $red;
		transform: scale(1.5, 1.5);
	}
}

@import "../../style/animation.scss";
@import "../../style/border.scss";
@import "../../style/colors.scss";
@import "../../style/media.scss";

.Item-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.Item-buttons {
	display: flex;
	align-items: center;
	transition: opacity $short-duration, visibility $short-duration;
}

.Item-buttons-hidden {
	@extend .Item-buttons;

	opacity: 0;
	visibility: hidden;

	@include smartphone {
		opacity: 1;
		visibility: visible;
	}
}

.Item-button {
	color: $black;
	font-size: 1.5em;
	display: flex;
	margin-right: 0.1em;
	transition: color $instant-duration, transform $instant-duration;
	cursor: pointer;

	&:last-child {
		margin-right: 0;
	}

	&:hover {
		color: $red;
		transform: scale(1.5, 1.5);
	}

	@include smartphone {
		color: $grey;
	}
}

Make button color lighter on smartphones
Make button color lighter on smartphones
