/* == Label == */
.wojo.label {
		display: inline-flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: center;
		outline: none;
		vertical-align: middle;
		background-color: var(--grey-color-700);
		color: var(--white-color);
		font-family: inherit;
		font-weight: 500;
		letter-spacing: 3px;
		margin: 0;
		line-height: 1rem;
		font-style: normal;
		text-align: center;
		text-decoration: none;
		white-space: normal;
		border-radius: .250rem;
		box-sizing: content-box;
		border: 1px solid var(--grey-color-700);
		transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		position: relative;
		text-transform: uppercase;
}
/* == Colors == */
.wojo.primary.label {
		background-color: var(--primary-color);
		border-color: var(--primary-color);
		color: var(--white-color);
}
.wojo.primary.basic.label {
		background-color: transparent;
		color: var(--primary-color);
}
.wojo.primary.inverted.label {
		background-color: var(--primary-color-inverted);
		border-color: var(--primary-color-inverted);
		color: var(--primary-color);
}
.wojo.secondary.label {
		background-color: var(--secondary-color);
		border-color: var(--secondary-color);
		color: var(--white-color);
}
.wojo.secondary.basic.label {
		background-color: transparent;
		color: var(--secondary-color);
}
.wojo.secondary.inverted.label {
		background-color: var(--secondary-color-inverted);
		border-color: var(--secondary-color-inverted);
		color: var(--secondary-color);
}
.wojo.positive.label {
		border-color: var(--positive-color);
		background-color: var(--positive-color);
		color: var(--white-color);
}
.wojo.positive.basic.label {
		background-color: transparent;
		color: var(--positive-color);
}
.wojo.positive.inverted.label {
		background-color: var(--positive-color-inverted);
		border-color: var(--positive-color-inverted);
		color: var(--positive-color);
}
.wojo.negative.label {
		background-color: var(--negative-color);
		border-color: var(--negative-color);
		color: var(--white-color);
}
.wojo.negative.basic.label {
		background-color: transparent;
		color: var(--negative-color);
}
.wojo.negative.inverted.label {
		background-color: var(--negative-color-inverted);
		border-color: var(--negative-color-inverted);
		color: var(--negative-color);
}
.wojo.light.label {
		background-color: var(--light-color);
		border-color: var(--light-color);
		color: var(--body-color);
}
.wojo.light.basic.label {
		background-color: transparent;
		color: var(--light-color);
}
.wojo.light.inverted.label {
		background-color: var(--light-color-inverted);
		border-color: var(--light-color-inverted);
		color: var(--light-color);
}
.wojo.dark.label {
		background-color: var(--dark-color);
		border-color: var(--dark-color);
		color: var(--white-color);
}
.wojo.dark.basic.label {
		background-color: transparent;
		color: var(--white-color);
}
.wojo.dark.inverted.label {
		background-color: var(--dark-color-inverted);
		border-color: var(--dark-color-inverted);
		color: var(--dark-color);
}
.wojo.alert.label {
		background-color: var(--alert-color);
		border-color: var(--alert-color);
		color: var(--white-color);
}
.wojo.alert.basic.label {
		background-color: transparent;
		color: var(--alert-color);
}
.wojo.white.label {
		background-color: var(--white-color);
		border-color: var(--white-color);
		color: var(--primary-color);
}
.wojo.white.basic.label {
		background-color: transparent;
		color: var(--white-color);
}
.wojo.transparent.label {
		background: rgba(255, 255, 255, 0.2);
		border: 0;
		color: var(--white-color);
}
.wojo.basic.label,
.wojo.inverted.label {
		background-color: transparent;
		box-shadow: none;
		border-color: var(--body-color);
		color: var(--body-color);
}
.wojo.simple.label {
		background-color: transparent;
		border: 0;
		box-shadow: none;
		color: inherit;
}
/* == icon == */
.wojo.label .icon {
		margin-right: .5rem;
		font-size: 1rem;
		letter-spacing: normal;
}
.wojo.right.label .icon {
		margin-left: .5rem;
		margin-right: 0;
}
.wojo.icon.label .icon {
		margin-right: 0;
}
/* == rounded == */
.wojo.rounded.label {
		border-radius: 2rem;
}
/* == circular == */
.wojo.circular.label {
		border-radius: 100rem;
}
/* == initials == */
.wojo.initials.label {
		width: 2rem;
		height: 2rem;
		padding: 0;
		line-height: 2rem;
		font-size: .875rem;
}
.wojo.initials.label .icon {
		margin-right: 0;
}
/* == empty == */
.wojo.empty.label {
		min-width: 0;
		min-height: 0;
		overflow: hidden;
		width: .875rem;
		height: .875rem;
		padding: 0;
}
/* == ring == */
.wojo.ring.label {
		border-radius: 100%;
		border: 0;
		height: 1rem;
		padding: 0;
		vertical-align: middle;
		width: 1rem;
}
.wojo.ring.label.spaced {
		margin-right: .5rem
}
.wojo.ring.label::after {
		background-color: var(--white-color);
		border-radius: 50%;
		content: "";
		height: .625rem;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		position: absolute;
		transition: all 0.3s ease 0s;
		width: .625rem;
}
/* == link == */
.wojo.link.label {
		cursor: pointer;
}
/* == status == */
.wojo.label .status {
		position: absolute;
		top: -2px;
		right: -2px;
		width: .813rem;
		height: .813rem;
		border-radius: 1rem;
		background: var(--white-color);
		border: 2px solid var(--white-color);
}
.wojo.label .status.negative {
		background: var(--negative-color);
}
.wojo.label .status.positive {
		background: var(--positive-color);
}
/* == Bookmark == */
.wojo.bookmark {
		position: absolute;
		top: 1rem;
		right: -1rem;
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
		height: 2rem;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 4rem;
		font-size: .875rem;
		font-weight: 500;
		background: var(--grey-color-700);
		opacity: .75;
		border-radius: .250rem 0 0 0;
		color: #fff;
		z-index: 2;
}
.wojo.bookmark::after {
		content: "";
		position: absolute;
		bottom: 0;
		right: -2rem;
		border: 1rem solid;
		border-color: var(--grey-color-700) transparent var(--grey-color-700) var(--grey-color-700);
}
.wojo.bookmark.primary {
		background: var(--primary-color);
}
.wojo.bookmark.secondary {
		background: var(--secondary-color);
}
.wojo.bookmark.positive {
		background: var(--positive-color);
}
.wojo.bookmark.negative {
		background: var(--negative-color);
}
.wojo.bookmark.primary::after {
		border-color: var(--primary-color) transparent var(--primary-color) var(--primary-color);
}
.wojo.bookmark.secondary::after {
		border-color: var(--secondary-color) transparent var(--secondary-color) var(--secondary-color);
}
.wojo.bookmark.positive::after {
		border-color: var(--positive-color) transparent var(--positive-color) var(--positive-color);
}
.wojo.bookmark.negative::after {
		border-color: var(--negative-color) transparent var(--negative-color) var(--negative-color);
}
/* == Sizes == */
.wojo.label {
		font-size: .750rem;
		padding: .375rem .5rem;
}
.wojo.mini.label {
		font-size: .5rem;
		font-weight: 800;
		padding: .125rem .5rem;
}
.wojo.small.label {
		font-size: .625rem;
		padding: .25rem .5rem;
}
.wojo.small.empty.label {
		width: .750rem;
		height: .750rem;
		padding: 0;
}
.wojo.big.label {
		font-size: .875rem;
}
.wojo.large.label {
		font-size: 1rem;
}