@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;
        outline: 0;
        cursor: pointer;
	}

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

	&_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;
	}
}