@mixin swatch-with-label($swatch-color) {
    display: inline-block;
    height: $swatch-height + $swatch-label-height + 2px;
    margin: $swatch-margin;
    vertical-align: top;
    width: $swatch-width;

    label {
        background-color: $color-base-0;
        display: block;
        font-weight: bold;
        height: $swatch-label-height;
        margin: $swatch-margin;
        text-align: center;
        width: $swatch-width;
    }

    .swatch {
        background-color: $swatch-color;
        border-radius: .25rem;
        box-shadow: 2px 2px 2px $color-base-50;
        display: block;
        height: $swatch-height;
        padding: $swatch-padding;
        vertical-align: top;
        width: $swatch-width;
        &:before {
            content: '#{$swatch-color}';
        }
    }
}