@import '../../../styles/definitions/mixins';

$button-icon-size: 32px;

.buttonPageScroll {
	&_button {
		@extend %reset-button;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-decoration: none;
		font-size: 12px;
		line-height: 15px;
		cursor: pointer;
		opacity: 0;
		transition: opacity 0.3s ease;

		&--visible {
			opacity: 1;
		}

		&--mobile-only {
			@include media-lg-up {
				display: none;
			}
		}

		&--desktop-only {
			@include media-lg-down {
				display: none;
			}
		}
	}

	&_button:focus &_iconWrapper,
	&_button:hover &_iconWrapper {
		background-color: $primary-color-hover;
	}

	&_text {
		margin-top: 8px;
		color: $deep-gray;
		text-align: center;

		&--sr-only {
			@extend %sr-only;
		}
	}
	
	&_iconWrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		width: $button-icon-size;
		height: $button-icon-size;
		border-radius: 50%;
		background-color: $primary-color;
	}

	&_icon {
		width: 13px;
		fill: $white;
	}
}