$prefix: 'cb-';
$text: #333;
$border: #eaeaea;
$hover: #30323F;

@function setColor($background) {
  @if (lightness($background) > 50) {
    @return $text;
  } @else {
    @return #ffffff;
  }
}

.choosebumps{
	font-family: 'Raleway';
	font-size: 18px;
	line-height: 1.58;

	border:1px solid $border;

	width: 100%;
	outline: none;

	position:relative;

	box-sizing: border-box;

  &.#{$prefix}-active,
  &:focus{
    border-color: #ccc;
    outline: none;
  }

	*,
	*:before,
	*:after{
		box-sizing: border-box;
	}
}

.#{$prefix}main-item{
	padding: 1em 3em 1em 1em;
	cursor: default;

	&.#{$prefix}placeholder:before{
		content: attr(placeholder);
		opacity: .4;
	}
}

.#{$prefix}caret{
	height: 1em;
	width: 1em;

	position:absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
  z-index: 1;

	path{
		stroke: #333;
		stroke-width: 20px;
	}
}

.#{$prefix}items{
	display:none;
	position: absolute;
	width: calc(100% + 2px);
	max-height: 300px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	top: calc(100% + 1px);
	left: -1px;
	z-index: 2;
	background: white;
  box-shadow: 0 15px 35px -10px rgba(black,0.3);
	border: 1px solid $border;
  border-top: none;

  &:empty:not([no-results-text]){
    display: none!important;
  }

  &[no-results-text]:after{
    content: attr(no-results-text);
    padding: 1em;
    display: block;
  }

	& > div{
		padding: 1em;
		cursor: default;

		&:not(:first-child){
			border-top: 1px solid lighten($border,15%);
		}

		&[category]{
			border-top: none;
			&:before{
				content: attr(category);
				display: block;
				margin: -1em -1em 1em -1em;
				padding: 0.5em 1em;
				background: $border;
				color: darken($border,35%);
			}
		}

		&:hover{
			background-color: $hover;
			color: setColor($hover);
		}
	}
}

.#{$prefix}selected-item{
	display:inline;
}

.#{$prefix}selected{
	background-color: $hover;
	color: setColor($hover);
}

.#{$prefix}tag{
	display:inline-block;
	background-color: $border;
	padding: 0 .5em;
    border-radius: .25em;
	margin: .25em;

	svg{
		cursor: pointer;
		width: 10px;
		height: 10px;
		margin-left: 10px;
		stroke-width: 50px;
		stroke: #000;
		position: relative;
		top: -2px;
	}
}

.#{$prefix}active{
	&.#{$prefix}search-enabled{
		.#{$prefix}placeholder:before{
			display:none;
		}
		.#{$prefix}selected-item{
			position:absolute;
			opacity:.1;
		}
	}

	.#{$prefix}items{
		display: block;
	}

	.#{$prefix}search{
		display:inline;
	}
}

.#{$prefix}search{
	display:none;
	padding: 0;
	font-size: inherit;
	font-family: inherit;
	line-height: inherit;
	z-index: 1;
	outline:none;
	border:none;
	background-color: transparent;
}

$loader-size: 1em;
.#{$prefix}loader{
  position: absolute;
  top: 50%;
  margin-top: -$loader-size/2;
  right: 1em;
  width: $loader-size;
  height: $loader-size;
  border: 2px solid;
  border-top-color: transparent;
  border-radius: 50%;
  animation: #{$prefix}-spin .5s infinite linear;
  display: none;

  @keyframes #{$prefix}-spin{
    100%{
      transform: rotate(1turn);
    }
  }
}