.spinner {
	position: absolute;
	top: .8rem;
	right: .75rem;
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

.a-hover {
	color: $hover-color;
}

.view-show {
	opacity: 0.0;
	display: block;
	@include vendor-prefix(transition, opacity $default-transition-duration);
}

.view-show-visible {
	opacity: 1.0;
}

.view-hide {
	opacity: 1.0;
	@include vendor-prefix(transition, opacity $default-transition-duration);
}

.view-hide-hidden {
	opacity: 0.0;
	display: none;
}

.title {
	@extend %user-select-none;
	padding: $pad;
	height: $title-height;
	font-weight: bold;
	cursor: default;
}

.lib .list {
	@extend %user-select-none;

	position: absolute;

	top: 2.6rem;
	bottom: 20.2rem;
	left: 0;
	right: 1px;

	overflow-x: hidden;
	overflow-y: auto;
}

.list {
  .item {
    padding: $pad;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: solid 1px lighten($lib-bg, 3%);
    cursor: pointer;
    position: relative;

    &:hover, &:hover .detail {
      color: $hover-color;
    }

    .icon {
      font-family: $icon-font;
      display: inline-block;
      vertical-align: middle;
      position: relative;
      top: -0.05em;
    }

    .detail {
      float: right;
      color: darken($lib-color, 22%);

      code {
        font-weight: bold;
      }
    }
  }

  .item.selected, .item.selected .detail {
    background: $theme-color;
    color: $color;
  }

  .item.removed {
    text-decoration: line-through;
    opacity: 0.5;
  }
}

.button {
	font-weight: normal;
	cursor: pointer;
	position: relative;
	top: -0.1em;

	@include vendor-prefix(transition, color 0.15s);

	&:before {
		-webkit-font-smoothing: antialiased;
		content: attr(data-icon);
		font-family: $icon-font;
		display: inline-block;
		font-style: normal;
		position: relative;
		letter-spacing: 0.2em;
		top: 0.10em;
		font-size: 1rem; /* font size uses px because the icons show up nicely with it. */
	}

	&:hover, &.active {
		color: $hover-color;
	}

	&.noicon {
		top: 0;
		&:before { content:none; }
	}

	&.nolabel:before {
		letter-spacing: 0;
	}
}

.check {
	&:before {
		-webkit-font-smoothing: antialiased;
		content: "\e154";
		font-family: $icon-font;
		font-size: 1.125rem;
		top: 0.1rem;
		position: relative;
		margin-right: 0rem;
	}

	code {
		color: $hover-color;
	}
}
.check.checked {
	&:before {
		content: "\e153";
	}
}

/* button and buttonbar */
.buttonbar {
	float: right;
	font-size: 0.875rem;
	margin: 0;
	padding: 0;
	display: block;

	li {
		margin-left: 1.0em;
		display: inline-block;
		vertical-align: middle;
		margin-right: 0;
	}
}

.icon {
	font-family: $icon-font;
}

.disabled {
	pointer-events: none;
}

.regexr-logo {
	@include transform(translateY(.25rem));
	-webkit-font-smoothing: antialiased;
}

.regexr-text {
	@include transform(translateY(.25rem));
	display: inline-block;
}

.small-text {
	font-size: .7rem;
}