

.roletka {
	position: absolute;
	display: none;
	width: 100%;
	width: calc(100% - 20px);
	background: $color--white;
	border: 1px solid $color--grayforms-border;
	top: calc(100% - 2px);
	left: 10px;
	box-shadow: $shadows;
	z-index: 999;

	.roletka__line {
		display: block;
		line-height: 22px;
		font-size: 14px;
		border-bottom: 1px solid $color--grayforms-border;
		padding: 3px 10px;
		color: $color--grayforms-label;
		cursor: pointer;
		transition: all 0.2s ease-out;

		&.focused,
		&:hover {
			background: rgba($color--graylight,0.7);
			color: $color--black;
		}
	}

	.roletka__line--nothing {
		display: block;
		line-height: 22px;
		font-size: 14px;
		border-bottom: 1px solid $color--grayforms-border;
		padding: 3px 10px;
		color: $color--grayforms-label;
		cursor: pointer;
		text-align: center;
		font-style: italic;
	}

	.roletka__line--last {
		display: table;
		width: calc(100% - 20px);
		line-height: 22px;
		font-size: 12px;
		border-bottom: 1px solid $color--grayforms-border;
		padding: 2px 10px;
		color: $color--grayforms-label;
		cursor: pointer;
		text-align: right;

		span {
			padding: 3px 5px;
			display: inline-block;
			float: right;
			&:hover { text-decoration: underline; }
		}
	}

	.label-inside & {
		width: calc(100% - 20px - 0.4rem);
		left: calc(10px + 0.2rem);
		top: calc(100% - 1px - 0.2rem);
	}
}

.roletka--tickets {
	@extend .roletka;
	.roletka__line {
		position: relative;
		svg {
			position: absolute;
			display: block;
			top: 4px;
			right: 8px;
			font-size: 10px;
			color: $color--additional-light;
			pointer-events: none;
		}

		&.focused,
		&:hover {
			background: $color--additional-light;
			color: $color--white;
			&:after {
				color: $color--white;
			}
		}
	}
}