/* Product Resources - [product_resources] - CSS */

.product-resources-icons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    list-style: none;
    padding: 0;
    margin: 20px 0;
    gap: 1px;
	position: relative; /* Ensures pseudo-elements are positioned correctly */
}
.product-resources-icons li {
    flex-grow: 0;
	min-width: 100px;
    display: flex;
	justify-content: center;
	position: relative;
	padding: 0 2em;
}

.product-resources-icons .resource-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centers content vertically within the link */
    padding: 10px;
	width: 100%;
    text-align: center;
    text-decoration: none; /* Removes underline from text */
    color: inherit; /* Ensures the link takes on the current color */
    border: 1px solid transparent; /* Optional: Add a border for styling */
    border-radius: 8px; /* Optional: Add border radius for styling */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition for hover effects */
}

.product-resources-icons li::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: -1px; /* Position it at the right edge, adjust if needed */
    width: 1px; /* Width of the vertical line */
    background-color: #ccc; /* Color of the vertical line */
}

.product-resources-icons li:nth-child(3)::after {
    display: none; /* Hide the line after the last item */
}

.product-resources-icons .resource-link:hover {
    background-color: #f0f0f0; /* Optional: Change background on hover */
    border-color: #ddd; /* Optional: Change border color on hover */
}

.product-resources-icons li svg {
    width: clamp(6rem, 4.95rem + 3.5vw, 7.75rem);
    height: auto;
    margin-bottom: 10px; /* Space between the icon and the text */
	fill:grey;
}

.product-resources-icons .resource-link:hover svg {
	fill:var(--e-global-color-primary);
}

.product-resources-icons li span {
    margin: 0;
	text-align: center;
	font-weight:600;
	font-size:clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
	line-height:1;
	display:block;
	color: var(--e-global-color-primary);
}