@use "sass:math";

$crc: '.h-paginator';

#{$crc}{
	min-width: $v-control-height;
	height: $v-control-height;
	border-radius: $v-control-border-radius;
	border-width: $v-control-border-width;
	border-style: solid;
	border-color: $c-primary-border;
	font-size: $fs-default;
	background: transparent;
	transition: $t-fast-standard;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}

#{$crc}__button{
	position: relative;
	background: none;
	border: none;
	height: $v-control-height - ($v-control-border-width * 2);
	min-width: $v-control-height - ($v-control-border-width * 2);
	color: $c-dark-text;
	margin-right: 1px;
	outline: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color $t-fast-standard;

	&.-active {
		color: $c-primary-text;
		font-weight: $fw-bold;
	}
	&:hover {
		color: $c-primary-text;
	}

	&:after {
		content: '';
		position: absolute;
		width: 1px;
		height: $v-control-height-tiny;
		right: 0;
		top: math.div(($v-control-height - ($v-control-border-width * 2) - $v-control-height-tiny), 2);
		background: $c-primary-border;
	}

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

		&:after {
			display: none;
		}
	}


	&:disabled {
		color: $c-disabled--negative-text;
		opacity: $v-control-disabled-opacity;
		pointer-events: none;
		cursor: default;
	}
}

#{$crc}__indicator{
	position: absolute;
	bottom: -$v-control-border-width;
	left: 0;
	height: 2px;
	background: $c-primary-text;
	border-radius: 2px 2px 0 0;
	transition: $t-medium-deceleration;

	&.-hidden{
		opacity: $o-0;
	}
}