@import "./variables";

/**
 * Default sort style
 */
.vp-sort__style-default {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vp-sort-default--items__gap);

	.vp-sort__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-sort__item {
		flex: 0 0 auto;
		max-width: 100%;
		text-align: center;

		> * {
			display: block;
			min-width: var(--vp-sort-default--items__min-width);
			padding: var(--vp-sort-default--items__padding-v) var(--vp-sort-default--items__padding-h);
			font-size: var(--vp-sort-default--items__font-size);
			font-weight: var(--vp-sort-default--items__font-weight);
			line-height: var(--vp-sort-default--items__line-height);
			color: var(--vp-sort-default--items__color);
			text-decoration: var(--vp-sort-default--items__text-decoration);
			text-transform: var(--vp-sort-default--items__text-transform);
			letter-spacing: var(--vp-sort-default--items__letter-spacing);
			background-color: var(--vp-sort-default--items__background-color);
			border-radius: var(--vp-sort-default--items__border-radius);
			transition: var(--vp-sort-default-transition-duration) background-color var(--vp-sort-default-transition-easing), var(--vp-sort-default-transition-duration) color var(--vp-sort-default-transition-easing);
		}

		> a:hover,
		> a:focus {
			color: var(--vp-sort-default--items-hover__color);
			background-color: var(--vp-sort-default--items-hover__background-color);
		}

		&.vp-sort__item-active {
			--vp-sort-default--items__color: var(--vp-sort-default--items-active__color);
			--vp-sort-default--items__background-color: var(--vp-sort-default--items-active__background-color);
			--vp-sort-default--items-hover__color: var(--vp-sort-default--items-active__color);
			--vp-sort-default--items-hover__background-color: var(--vp-sort-default--items-active__background-color);

			> * {
				cursor: default;
			}
		}

		.vp-sort__item-count {
			float: right;
			margin-left: var(--vp-sort-default--items-count__offset);
			font-size: var(--vp-sort-default--items-count__font-size);
		}
	}
}