.swatch_container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: inherit;
    gap: var(--gapWidth, 20px);

    div.swatch {
        width: var(--swatchWidth, 150px);
        height: var(--swatchHeight, 150px);
        background-color: var(--swatchColor, #000);
        border: var(--borderWidth, 1px) solid var(--borderColor, #888);
        border-radius: var(--borderRadius, 0px);
        color: #000;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;

        &.dark {
            color: #FFF;
        }
    }
    span.name {
        display: block;
        font-weight: bold;
    }
    code {
        display: block;
        font-size: 80%;
        font-family: monospace;
		cursor: copy;

		position: relative;

		&.copied {
			animation: brandAssetsCopyFeedback 0.5s ease;
		}
    }
    code.small {
        font-size: 70%;
    }
}

@keyframes brandAssetsCopyFeedback {
	0% {
		background-color: transparent;
	}

	50% {
		background-color: #4CAF50;
		color: #fff;
	}

	100% {
		background-color: transparent;
	}
}