.roletka {
	position: absolute;
	width: 100%;
	background: $color--white;
	border: 1px solid $color--seashell;
	top: calc(100% - 1.1rem);
	left: 0;
	box-shadow: $shadows;
	z-index: 999;

	.roletka__line {
		display: block;
		line-height: 22px;
		font-size: 14px;
		border-bottom: 1px solid rgba($color--seashell, 0.5);
		padding: 3px 10px;
		color: $color--gray;
		cursor: pointer;
		transition: all 0.2s ease-out;

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

	.roletka__line--nothing {
		display: block;
		line-height: 22px;
		font-size: 14px;
		border-bottom: 1px solid rgba($color--seashell, 0.5);
		padding: 3px 10px;
		color: $color--black;
		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: none;
		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; }
		}
	}
}

.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--mint;
			color: $color--white;
			&:after {
				color: $color--white;
			}
		}
	}
}