@import "./variables";

/**
 * Minimal filter style
 */
.vp-filter__style-minimal {
	display: flex;
	flex-wrap: wrap;

	.vp-filter__item a {
		outline: none;
		box-shadow: none;
	}
	// align
	.vp-portfolio__layout-elements-align-left & {
		justify-content: flex-start;
	}

	.vp-portfolio__layout-elements-align-center & {
		justify-content: center;
	}

	.vp-portfolio__layout-elements-align-right & {
		justify-content: flex-end;
	}

	.vp-filter__item {
		flex: 0 0 auto;
		text-align: center;

		> * {
			display: block;
			padding: var(--vp-filter-minimal--items__padding-v) var(--vp-filter-minimal--items__padding-h);
			font-size: var(--vp-filter-minimal--items__font-size);
			font-weight: var(--vp-filter-minimal--items__font-weight);
			line-height: var(--vp-filter-minimal--items__line-height);
			color: var(--vp-filter-minimal--items__color);
			text-decoration: var(--vp-filter-minimal--items__text-decoration);
			text-transform: var(--vp-filter-minimal--items__text-transform);
			letter-spacing: var(--vp-filter-minimal--items__letter-spacing);
			transition: var(--vp-filter-minimal-transition-duration) color var(--vp-filter-minimal-transition-easing);
		}

		> a:hover,
		> a:focus {
			color: var(--vp-filter-minimal--items-hover__color);
		}

		&.vp-filter__item-active {
			--vp-filter-minimal--items__color: var(--vp-filter-minimal--items-active__color);
			--vp-filter-minimal--items-hover__color: var(--vp-filter-minimal--items-active__color);

			> * {
				cursor: default;
			}
		}

		.vp-filter__item-count {
			float: right;
			margin-left: var(--vp-filter-minimal--items-count__offset);
			font-size: var(--vp-filter-minimal--items-count__font-size);
		}
	}
}
