ul.amendo-size {
	list-style: none;
	display: flex;
	flex-wrap: wrap;

	li {
		padding: 5px 10px;
		border: 1px solid #ccc;
		margin: 5px;
		cursor: pointer;
	}

	li.selected {
		background-color: #000;
		color: #fff;
	}
}

.amendo-variation-image-list {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;

	&.partial > *:nth-child(n+6):not(.selected) {
		display: none;
	}

	li {
		position: relative;
		display: inline-block;
		cursor: pointer;
		margin: 5px;
	}

	li img {
		display: block;
		max-width: 100%;
		height: auto;
		border:2px solid #0073aa;
	}

	li.named-swatch {
		border: 1px solid black;
		padding: 0.25rem;
	}

	li.selected {
		order: -1;
	}

	li.selected::after {
		content: "✔";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 2rem;
		color: white;
		background-color: rgba(
			0,
			128,
			0,
			0.5
		);
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.amendo-selected-variation-name{font-weight:normal;color:#555;margin-top:.25rem}

/* Utsolgte farger: roedt slor og diagonal strek, samme uttrykk som i
   pakkenes fargevelger. */
.amendo-swatch-item.amendo-swatch-oos {
    position: relative;
    overflow: hidden;
}

.amendo-swatch-item.amendo-swatch-oos img,
.amendo-swatch-item.amendo-swatch-oos .amendo-swatch-label {
    opacity: 0.35;
}

.amendo-swatch-item.amendo-swatch-oos::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to top right,
        transparent calc(50% - 1px),
        rgba(192, 57, 43, 0.6) 50%,
        transparent calc(50% + 1px)
    );
    pointer-events: none;
}

/* Sammenleggbar fargevelger, samme uttrykk som i pakkene */
.amendo-swatch-picker { margin: 4px 0 0; }

.amendo-swatch-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    font-size: 0.95em;
    line-height: 1.4;
    color: inherit;
    cursor: pointer;
}

.amendo-swatch-toggle:hover .amendo-swatch-toggle__text { text-decoration: underline; }

.amendo-swatch-caret {
    font-size: 1.15em;
    line-height: 1;
    transition: transform 0.15s ease;
}

.amendo-swatch-toggle.is-open .amendo-swatch-caret { transform: rotate(180deg); }

.amendo-swatch-panel[hidden] { display: none !important; }

.amendo-swatch-panel {
    margin-top: 8px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #fff;
}