input[type="color"] {
    padding-left: var(--size);
    cursor: pointer;

    &::-webkit-color-swatch-wrapper {
        padding: calc(0.1 * var(--input-height)) 0;
    }

    &::-moz-color-swatch {
        margin-inline: 0;
        border: 0;
    }

    &::-webkit-color-swatch {
        border-width: 0;
        border-radius: var(--radius);
        width: calc(0.8 * var(--input-height));
        height: calc(0.8 * var(--input-height));
        flex: 0 0 auto;
    }

    &::-moz-color-swatch {
        border-width: 0;
        border-radius: var(--radius);
        width: calc(0.8 * var(--input-height));
        height: calc(0.8 * var(--input-height));
        flex: 0 0 auto;
    }
}