@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";

.quick-links.foldable-card.card {
	padding: 1rem;
	border-radius: 0;

	@media only screen and (min-width: $break-small) {
		border-radius: 3px;
	}

	@media only screen and (min-width: $break-xlarge) {
		padding: 0;
		box-shadow: none;
	}

	.foldable-card__header {
		padding: 16px;
		min-height: auto;

		@include breakpoint-deprecated( ">660px" ) {
			padding: 16px 24px 14px;
		}
	}

	.foldable-card__action {
		margin-right: 8px;

		&:focus-visible {
			box-shadow: inset 0 0 0 2px var(--color-primary);
			outline: 0;
		}
	}

	.foldable-card__content {
		border: 0;
		padding-bottom: 0;
		padding-top: 0;
	}

	// Fix for alignment issue in Safari.
	.foldable-card__expand .gridicon {
		width: auto;
	}
}

.quick-links__boxes {
	margin-left: -16px;
}

.card.quick-links__action-box {
	display: flex;
	align-items: center;
	transition: all 0.1s;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 16px;
	box-shadow: none;
	@include breakpoint-deprecated( ">660px" ) {
		padding-left: 24px;
	}

	.quick-links__action-box-image {
		display: flex;
		flex-shrink: 0;
		align-items: center;
		width: 20px;
		margin-right: 12px;
	}

	.quick-links__action-box-icon {
		width: 24px;
		height: 24px;
		fill: var(--color-neutral-60);
		transition: all 0.1s;

		&.dashicons {
			color: var(--color-neutral-80);

			&.dashicons-admin-appearance {
				color: var(--color-neutral-60);
				line-height: 24px;
			}
		}
	}

	.quick-links__action-box-text {
		display: flex;
	}

	.quick-links__action-box-label {
		color: var(--color-text);
		font-size: $font-body-small;
	}

	.quick-links__action-box-subtitle {
		color: var(--color-text-subtle);
		font-size: $font-body-small;
		display: none;

		@include breakpoint-deprecated( ">480px" ) {
			display: block;
		}
	}

	.card__link-indicator {
		fill: var(--color-neutral-20);
		right: 20px;
	}

	&.quick-links__action-box__hide-link-indicator {
		.card__link-indicator {
			display: none;
		}
	}

	&:hover {
		.quick-links__action-box-icon {
			color: var(--color-primary-60);
			fill: var(--color-primary-60);
		}
		.quick-links__action-box-label {
			color: var(--color-primary-60);
		}
	}

	&:focus-visible {
		box-shadow: inset 0 0 0 2px var(--color-primary);
		outline: 0;
	}

	&:last-of-type {
		margin-bottom: 0;
	}
}

.quick-links__action-box-label {
	font-size: $font-body-small;
}

.quick-links__boxes .jetpack-logo {
	width: 16px;
	height: 16px;
	margin-left: 2px;
}

