@import "../bootstrap/scss/functions";
@import "../base/functions";
@import "../base/variables";
@import "../bootstrap/scss/variables";
@import "../bootstrap/scss/mixins";
@import "../base/mixins";


// Variables
$tag-light-bg: $gray-200;
$tag-light-color: $body-color;
$tag-light-bg-hover: $white;
$tag-light-border-hover: $gray-300;


// Modifying
.tag-light {
	display: inline-block;
	padding: 10px 9px;
	font-size: $font-size-sm;
	line-height: 1;
	font-weight: 400;
	border-radius: px-to-rem( 5px );
	color: $tag-light-color;
	background-color: $tag-light-bg;
	border: 1px solid $tag-light-bg;
	transition: $transition-base;
	box-shadow: none;

	&:hover {
		background-color: $tag-light-bg-hover;
		color: $tag-light-color;
		border-color: $tag-light-border-hover;
	}
}


// Context dark
.context-dark {
	.tag-light {
		color: $white;
		background-color: rgba( $white, .35 );
		border-color: rgba( $white, .35 );

		&:hover {
			color: $white;
			background-color: rgba( $white, .15 );
			border-color: rgba( $white, .15 );
		}
	}
}

// Tag container
@import 'tag-container';